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

2  

HighCharts already supports the image exporting functionality via the Exporting Module which is packaged with it. Exporting After 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文件可以保存图片你想要的方式而不是返回给客户端。

1  

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)，然后导出任何适合您需要的内容，将位图图像保存到服务器，通过电子邮件发送，等等。

1  

After some searching, I found this recent answer in their forums, with a jsfiddle to tinker with.

在搜索之后，我在他们的论坛上找到了这个最近的答案，我需要修改一下。

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 phpExcel to actually create the spreadsheet.

它描述了如何使用服务器上的脚本导出CSV，这是过去经验中惟一可以实现的方法，因为HighChart图本身没有包含足够的信息来生成可用的电子表格。我们已经使用了不同的绘图库，并使用phpExcel实际创建电子表格。

1  

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:

这是我用海图制作的一张图表:

https://www.funfun.io/1/#/edit/5a61c190404f66229bda3f0f

https://www.funfun.io/1/ /编辑/ 5 a61c190404f66229bda3f0f

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演示中获取图表，并将数据替换为我的。我将数据存储在嵌入式电子表格中，由于有了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):

我将它保存在我的脚本中。使用正确的格式，这样我就可以直接以海图的形式加载它(对于数字，您必须将数据转换为浮点数或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]
    }
  );

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:

一旦你对你的图表满意，你可以直接将它加载到Excel中，粘贴在Funfun插件中的URL。下面是我的例子:

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的开发者。

0  

I know it's too late but i have the same problem and this jsfiddle helped me to create excel from highchart. The Download CSV option 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