如何将 JavaScript 图表导出到 Excel 文件 (HighCharts)
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7325363/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to Export JavaScript Chart to Excel file (HighCharts)
提问by Rafael Ranzolin
I have to Export a Javascript chart (HighCharts) into an excel file; the chart was rendered in a div, but the excel doesn't render the html+css content the javascript generates, render only the text without style.
我必须将 Javascript 图表 (HighCharts) 导出到 excel 文件中；图表在 div 中呈现，但 excel 不呈现 javascript 生成的 html+css 内容，仅呈现没有样式的文本。
A solution would be convert this where the chart was rendered into an image(jpeg) but I have no success...
一个解决方案是将图表转换为图像（jpeg），但我没有成功......
Thanks !
谢谢 ！
采纳答案by Gunnar Hoffman
HighCharts already supports the image exporting functionality via the Exporting Module which is packaged with it. ExportingAfter getting it you should be able to modify the script to save the image in any way you need. It's certainly not a beginners task and will require lots of tinkering.
HighCharts 已经通过随附的导出模块支持图像导出功能。导出获得它后，您应该能够修改脚本以按您需要的任何方式保存图像。这当然不是初学者的任务，需要大量的修补。
If it were me I would modify the code that responds to the export button so that I can activate it with JavaScript and also pass in information so that the PHP file on the back-end could save the picture in the manner you want rather than returning it to the client.
如果是我，我会修改响应导出按钮的代码，以便我可以使用 JavaScript 激活它并传递信息，以便后端的 PHP 文件可以以您想要的方式保存图片而不是返回它给客户。
回答by The Coder
This might be a little late, but I stumbled across this via Google so it might help someone. Highchart's image is in SVG format: http://en.wikipedia.org/wiki/Svg, you need to convert that to a bitmap format image. You have to change the Highcharts exporting options URL to your own URL:
这可能有点晚了，但我通过谷歌偶然发现了这个，所以它可能对某人有所帮助。Highchart 的图像是 SVG 格式：http: //en.wikipedia.org/wiki/Svg，您需要将其转换为位图格式图像。您必须将 Highcharts 导出选项 URL 更改为您自己的 URL：
exporting : {
url: 'http://mydomain.com/export.php'
}
In your export script you must convert the SVG image to a bitmap image (I used PHP & imagick) then export to whatever suits your needs, save the bitmap image to the server, send by e-mail, etc. ,
在您的导出脚本中，您必须将 SVG 图像转换为位图图像（我使用 PHP 和 imagick），然后导出到适合您需要的任何内容，将位图图像保存到服务器，通过电子邮件发送等，
回答by GDP
After some searching, I found this recent answer in their forums, with a jsfiddleto tinker with.
经过一番搜索，我在他们的论坛中找到了这个最近的答案，其中有一个jsfiddle可以修改。
It describes how to export a CSV using a script on your server, which from past experience, is the only way this can get done because the HighChart graph itself doesn't contain nearly enough information to produce a usable spreadsheet. We already do with a different charting library, and use phpExcelto actually create the spreadsheet.
它描述了如何使用服务器上的脚本导出 CSV，根据过去的经验，这是唯一可以完成的方法，因为 HighChart 图形本身不包含几乎足够的信息来生成可用的电子表格。我们已经使用了不同的图表库，并使用phpExcel来实际创建电子表格。
回答by nicolas dejean
If you are willing to try an Add-in, there is a way to use Javascript, HTML and css in Excel. It's called Funfun and it hosts an online editor with an embedded spreadsheet so the transition isn't hard between the website to Excel.
如果您愿意尝试一个插件，有一种方法可以在 Excel 中使用 Javascript、HTML 和 css。它被称为 Funfun，它拥有一个带有嵌入式电子表格的在线编辑器，因此在网站到 Excel 之间的转换并不难。
Here is a chart I made with Highcharts:
这是我用 Highcharts 制作的图表：
https://www.funfun.io/1/#/edit/5a61c190404f66229bda3f0f
https://www.funfun.io/1/#/edit/5a61c190404f66229bda3f0f
In this example I took the chart from a Highchart demo, and replaced the data with mine. I store my data in the embedded spreadsheet, and thanks to a json file I can use it in my javascript code.
在这个例子中，我从Highchart demo 中获取了图表，并用我的数据替换了数据。我将数据存储在嵌入的电子表格中，多亏了 json 文件，我可以在我的 javascript 代码中使用它。
That is how I get my data from the spreadsheet with the json file:
这就是我从带有 json 文件的电子表格中获取数据的方式：
{
"data": "=A1:E16"
}
I store it in my script.js with the right format so I can directly load it in Highcharts (for numbers you must convert your data into floats or int):
我将它以正确的格式存储在我的 script.js 中，以便我可以直接将它加载到 Highcharts 中（对于数字，您必须将数据转换为浮点数或整数）：
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]
}
);
After You've chosen all of you're options for your chart you can add your data:
为图表选择所有选项后，您可以添加数据：
series: [{
data: data
}]
Once you are happy with your chart you can directly load it into Excel by pasting the URL in the Funfun add-in. Here is how it looks like with my example:
一旦您对您的图表感到满意，您就可以通过将 URL 粘贴到Funfun 插件中来将其直接加载到 Excel中。这是我的示例的样子：
Of course you can use another library than Highcharts, there are a lot of powerful libraries for data visualization like charts.js and D3.js.
当然你可以使用 Highcharts 以外的其他库，有很多强大的数据可视化库，比如 charts.js 和 D3.js。
I know this is an old post but I hope it helps people with the same problem.
我知道这是一个旧帖子，但我希望它可以帮助有同样问题的人。
Disclosure : I'm a developer of Funfun.
披露：我是 Funfun 的开发人员。
回答by osyan
I know it's too late but i have the same problem and this jsfiddlehelped me to create excel from highchart. The Download CSVoption added to export menu works fine. Here is the code:
我知道为时已晚，但我遇到了同样的问题，这个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());
});
