可以使用Highcharts的exportFunction功能来导出整个页面或HTML内容。exportFunction允许您将需要导出的内容作为一个函数进行编写,然后将其传递给Highcharts的exportFunction。
以下是一个示例代码:
// 引入Highcharts库
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
// 创建一个图表
Highcharts.chart('chart', {
// 示例数据
chart: {
type: 'line'
},
title: {
text: '使用Highcharts导出整个页面或html内容'
},
xAxis: {
categories: ['Category A', 'Category B', 'Category C', 'Category D'],
tickmarkPlacement: 'on',
lineWidth: 0
},
yAxis: {
gridLineInterpolation: 'polygon',
lineWidth: 0,
min: 0
},
tooltip: {
shared: true,
pointFormat: '<span>{series.name}: <b>{point.y:.1f}</b><br/>'
},
legend: {
align: 'right',
verticalAlign: 'top',
layout: 'vertical',
x: -40,
y: 80
},
series: [{
name: 'Series 1',
data: [43, 52, 67, 34],
pointPlacement: 'on'
},{
name: 'Series 2',
data: [34, 63, 56, 35],
pointPlacement: 'on'
}]
});
// 导出整个页面为PDF
Highcharts.chart('container', {
chart: {
polar: true,
type: 'line'
},
title: {
text: 'Chart with Polar Coordinates'
},
pane: {
size: '80%'
},
xAxis: {
categories: ['Category A', 'Category B', 'Category C', 'Category D'],
tickmarkPlacement: 'on',
lineWidth: 0,
gridLineInterpolation: 'polygon',
offset: 20
},
yAxis: {
lineWidth: 0,
gridLineInterpolation: 'polygon',
min: 0,
max: 100
},
tooltip: {
shared: true,
pointFormat: '<span>{series.name}: <b>{point.y:.1f}</b><br/>'
},
legend: {
align: 'right',
verticalAlign: 'top',
layout: 'vertical',
x: -40,
y: 80
},
series: [{
name: 'Series 1',
data: [43, 52, 67, 34],
pointPlacement: 'on'
},{
name: 'Series 2',
data: [34, 63, 56, 35],
pointPlacement: 'on'
}]
}, function(chart) {
// 处理数据
chart.exportChart({
type: 'image/svg+xml',
filename: 'mychart',
width: 800,
height: 600,
chartOptions: {
polar: true,
rangeSelector: {
enabled: true
},
title: {
text: 'Chart with Polar Coordinates'
}
}
});
});
在上面的代码中,我们首先创建了一个带有两个数据系列的图表,然后在exportChart
方法中使用type: 'image/svg+xml'
指定导出类型为SVG,并使用filename
、width
和height
参数指定导出文件的名称、宽度和高度。最后,在chartOptions
中设置导出选项,包括启用范围选择器和设置图表标题。
使用exportFunction
方法,您可以将整个页面导出为SVG格式的文件,包括图表、标题、坐标轴和图例等元素。以下是一个示例代码:
领取专属 10元无门槛券
手把手带您无忧上云