[英]How to Export JavaScript Chart to Excel file (HighCharts)
我必须将Javascript图表(HighCharts)导出到excel文件中; 图表是在div中呈现的,但是excel不会渲染javascript生成的html + css内容,只渲染没有样式的文本。
一个解决方案是将图表呈现为图像(jpeg)的转换,但我没有成功...
谢谢 !
HighCharts已经通过与其一起打包的导出模块支持图像导出功能。 导出获取后,您应该能够修改脚本以任何方式保存图像。 这肯定不是初学者的任务,需要大量的修修补补。
如果是我,我会修改响应导出按钮的代码,以便我可以使用JavaScript激活它并传入信息,以便后端的PHP文件可以按照您想要的方式保存图片而不是返回它给客户。
如果您愿意尝试加载项,可以使用Excel中的Javascript,HTML和css。 它被称为Funfun,它拥有一个带有嵌入式电子表格的在线编辑器,因此网站与Excel之间的转换并不难。
这是我用Highcharts制作的图表:
https://www.funfun.io/1/#/edit/5a61c190404f66229bda3f0f
在这个例子中,我从Highchart演示中获取了图表,并用我的数据替换了数据。 我将我的数据存储在嵌入式电子表格中,并且由于json文件,我可以在我的javascript代码中使用它。
这就是我使用json文件从电子表格中获取数据的方法:
{
"data": "=A1:E16"
}
我将它存储在我的script.js中,格式正确,因此我可以直接将其加载到Highcharts中(对于数字,您必须将数据转换为浮点数或int):
var data = [];
for (var i = 1; i < $internal.data.length; i++)
data.push(
{
x: parseFloat($internal.data[i][2]),
y: parseFloat($internal.data[i][3]),
z: parseFloat($internal.data[i][4]),
name: $internal.data[i][1],
country: $internal.data[i][0]
}
);
在为图表选择所有选项后,您可以添加数据:
series: [{
data: data
}]
一旦您对图表感到满意,您可以通过粘贴Funfun加载项中的URL将其直接加载到Excel 中 。 以下是我的示例:
当然你可以使用另一个库而不是Highcharts,有很多强大的数据库可视化库,如charts.js和D3.js.
我知道这是一个老帖子,但我希望它可以帮助有同样问题的人。
披露:我是Funfun的开发者。
这可能有点晚了,但我偶然发现了谷歌,所以它可能对某人有所帮助。 Highchart的图像采用SVG格式: http : //en.wikipedia.org/wiki/Svg ,您需要将其转换为位图格式图像。 您必须将Highcharts导出选项URL更改为您自己的URL:
exporting : {
url: 'http://mydomain.com/export.php'
}
在导出脚本中,您必须将SVG图像转换为位图图像(我使用PHP和imagick)然后导出到适合您需要的任何内容,将位图图像保存到服务器,通过电子邮件发送等,
我知道现在为时已晚,但我有同样的问题,这个jsfiddle帮助我从highchart创建excel。 添加到导出菜单的下载CSV选项工作正常。 这是代码:
/**
* A small plugin for getting the CSV of a categorized chart
*/
(function (Highcharts) {
// Options
var itemDelimiter = ',', // use ';' for direct import to Excel
lineDelimiter = '\n';
var each = Highcharts.each;
Highcharts.Chart.prototype.getCSV = function () {
var xAxis = this.xAxis[0],
columns = [],
line,
csv = "",
row,
col;
if (xAxis.categories) {
columns.push(xAxis.categories);
columns[0].unshift("");
}
each (this.series, function (series) {
columns.push(series.yData);
columns[columns.length - 1].unshift(series.name);
});
// Transform the columns to CSV
for (row = 0; row < columns[0].length; row++) {
line = [];
for (col = 0; col < columns.length; col++) {
line.push(columns[col][row]);
}
csv += line.join(itemDelimiter) + lineDelimiter;
}
return csv;
};
}(Highcharts));
// Now we want to add "Download CSV" to the exporting menu. We post the CSV
// to a simple PHP script that returns it with a content-type header as a
// downloadable file.
// The source code for the PHP script can be viewed at
// https://raw.github.com/highslide-software/highcharts.com/master/studies/csv-export/csv.php
Highcharts.getOptions().exporting.buttons.contextButton.menuItems.push({
text: 'Download CSV',
onclick: function () {
Highcharts.post('http://www.highcharts.com/studies/csv-export/csv.php', {
csv: this.getCSV()
});
}
});
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}]
});
$('#getcsv').click(function () {
alert(chart.getCSV());
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.