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

Question

我必须将 Javascript 图表 (HighCharts) 导出到 excel 文件中；图表在 div 中呈现，但 excel 不呈现 javascript 生成的 html+css 内容，仅呈现没有样式的文本。

解决方案是将图表呈现为图像（jpeg）的地方转换，但我没有成功......

谢谢！

Answer 1

HighCharts 已经通过随附的导出模块支持图像导出功能。 Exporting 得到它后，您应该能够修改脚本以任何您需要的方式保存图像。这当然不是初学者的任务，需要大量的修补。

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

Answer 2

这可能有点晚了，但我是通过 Google 偶然发现的，所以它可能会对某人有所帮助。 Highchart 的图片为 SVG 格式：http://en.wikipedia.org/wiki/Svg，您需要将其转换为位图格式的图片。 您必须将 Highcharts 导出选项 URL 更改为您自己的 URL：

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

在您的导出脚本中，您必须将 SVG 图像转换为位图图像（我使用 PHP 和 imagick），然后导出为适合您需要的任何内容，将位图图像保存到服务器，通过电子邮件发送等，

Answer 3

经过一番搜索，我发现了这个最近的answer in their forums，还有一个jsfiddle 可以修改。

它描述了如何使用服务器上的脚本导出 CSV，根据过去的经验，这是完成此操作的唯一方法，因为 HighChart 图表本身不包含几乎足够的信息来生成可用的电子表格。我们已经使用了不同的图表库，并使用phpExcel 来实际创建电子表格。

Answer 4

如果您愿意尝试加载项，有一种方法可以在 Excel 中使用 Javascript、HTML 和 css。它被称为 Funfun，它拥有一个带有嵌入式电子表格的在线编辑器，因此从网站到 Excel 之间的转换并不难。

这是我用 Highcharts 制作的图表：

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

在此示例中，我从Highchart demo 中获取图表，并用我的数据替换了数据。 我将我的数据存储在嵌入式电子表格中，并且由于有一个 json 文件，我可以在我的 javascript 代码中使用它。

这就是我使用 json 文件从电子表格中获取数据的方式：

{
    "data": "=A1:E16"
}

我以正确的格式将它存储在我的 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]
    }
  );

为图表选择所有选项后，您可以添加数据：

series: [{
        data: data
    }]

对图表感到满意后，您可以通过将 URL 粘贴到 Funfun add-in 中直接将其加载到 Excel 中。以下是我的示例：

当然，您可以使用除 Highcharts 之外的其他库，还有很多强大的数据可视化库，如 chart.js 和 D3.js。

我知道这是一篇旧帖子，但我希望它可以帮助遇到同样问题的人。

披露：我是 Funfun 的开发者。

Answer 5

我知道为时已晚，但我遇到了同样的问题，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());
});