将Highcharts数据导出为CSV文件

Question

我尝试使用Highcharts的导出功能，就像他们的网站上所示的例子一样：http://jsfiddle.net/highcharts/cqjvD/，但我想下载CSV文件而不是警告/显示它。

这是我的图表：http://jsfiddle.net/uF4H7/10/ 显示CSV的代码很简单，只需添加：

$('#getcsv').click(function () {
   alert(chart.getCSV());
 });

这个能用HTML/JS/Highcharts实现吗？

- user40721

Answer 1

请查看以下链接：http://jsfiddle.net/uF4H7/11/

$('#getcsv').click(function () {
    var chart = $('#container').highcharts();
    alert(chart.getCSV());
    window.open();
    //this line was added to your code to download the CSV
    window.open("data:text/csv;charset=utf-8," + escape(chart.getCSV()));
});

以下这行代码告诉浏览器在新窗口中打开数据 - 浏览器无法识别text/csv格式，因此会要求您下载CSV文件。

window.open("data:text/csv;charset=utf-8," + escape(chart.getCSV()));

或者您可以使用HTML的新功能-链接，它强制使用download属性进行下载。在您的情况下，将此代码添加到JavaScript中：

$('#getcsvAnchor').click(function() {
    var chart = $('#container').highcharts();
    $(this).attr('href', 'data:text/csv;charset=utf-8,'+escape(chart.getCSV())); 
    $(this).attr('download', "data-visualisation.csv");
});

将此添加到您的HTML代码中 - 下载链接：

<a id="getcsvAnchor" href="#">download</a>

JavaScript获取CSV内容并将其作为锚链接的href属性，然后将download属性添加到锚链接中，其中值为文件名。您可以在此处查看预览：http://jsfiddle.net/uF4H7/12/（单击“Alert CSV”旁边的“下载”）。

- user3714582

---

有没有一种方法可以在不打开新窗口的情况下完成这个操作？ - user40721

第二种方法正是我所需要的 - 谢谢！ - user40721

在哪个浏览器中？我在FF和Chrome中测试过，都有data-visualization.csv。如果问题仍然存在，请尝试从js中删除$(this).attr('download', "data-visualisation.csv");这一行，并将download="data-visualisation.csv"属性添加到锚点中。 - user3714582

我正在使用Chrome浏览器，尝试了您提供的两种方法，但仍然下载为“download.csv”文件 - 我的Chrome浏览器已经是最新版本。这很奇怪。 - user40721

看起来这是一个已知的 bug：https://dev59.com/questions/dGAg5IYBdhLWcg3wQo9X - user40721

Answer 2

exporting: {
           buttons: {
               contextButton: {
                   menuItems: [{
                       textKey: 'downloadXLS',
                       onclick: function () {
                           this.downloadXLS();
                       }
                   }, {
                       textKey: 'downloadCSV',
                       onclick: function () {
                           this.downloadCSV();
                       }
                   }]
               }
           }
       },

您可以在创建 Highcharts 图表时直接添加这些选项。

- Asiya Shaikh

Answer 3

只有在我添加了以下Highcharts插件后，Asiya Shaikh的建议才对我起作用：

<script src="http://highcharts.github.io/export-csv/export-csv.js"></script>

考虑到插件主页上没有提及downloadXLS();函数，这有点奇怪。如果这不起作用，您还应该尝试使用：

<script src="http://code.highcharts.com/modules/exporting.js"></script>

您可以使用EXPORT-CSV插件主页作为参考，但正如我所说，它没有提及downloadXLS()。

- Colin