如何导出JavaScript图表到Excel文件(HighCharts)

我必须导出一个Javascript图表(HighCharts)到一个excel文件; 图表呈现在div中,但是excel不呈现JavaScript生成的html + css内容,只呈现没有样式的文本。

一个解决scheme将转换为图表(jpeg)的图表,但我没有成功…

谢谢 !

HighCharts已经通过与其打包的导出模块支持图像导出function。 导出获取后,您应该能够修改脚本以任何您需要的方式保存图像。 这当然不是一个初学者的任务,将需要大量的修补。

如果是我,我会修改响应导出button的代码,以便我可以用JavaScript激活它,并传递信息,以便后端的PHP文件可以以您想要的方式保存图片而不是返回它给客户端。

这可能有点晚,但我偶然发现了谷歌,所以它可以帮助别人。 Highchart的图像格式为SVG: http : //en.wikipedia.org/wiki/Svg ,您需要将其转换为位图格式图像。 您必须将Highcharts导出选项url更改为您自己的url:

exporting : { url: 'http://mydomain.com/export.php' } 

在您的导出脚本中,您必须将SVG图像转换为位图图像(我使用PHP&imagick),然后导出到任何适合您的需求,将位图图像保存到服务器,通过电子邮件发送等,

经过一番search之后,我在他们的论坛中find了这个最近的答案 ,用jsfiddle来鼓捣。

它描述了如何使用服务器上的脚本导出CSV,这是从以往经验来看的唯一方法,因为HighChart图本身并不包含足够的信息来生成可用的电子表格。 我们已经做了一个不同的图表库,并使用phpExcel实际创build电子表格。

我知道这太晚了,但我也有同样的问题,这jsfiddle帮助我从高图创buildexcel。 添加到导出菜单的下载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()); }); 

如果将图表转换为图像,那么只需使用屏幕截图(Windows上的Print Scrn,然后粘贴到任何图像编辑器或Mac上的Command + Shift + 4),然后将图像拖放到Excel中。