如何导出JavaScript图表到Excel文件（HighCharts）

Question

我必须导出一个Javascript图表（HighCharts）到Excel文件;图表以div形式呈现，但excel不呈现javascript生成的html + css内容，只呈现没有样式的文本。

一种解决方案来转换这在图表被渲染成图像（JPEG格式），但我没有成功...

谢谢！

Answer 1

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

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

Answer 2

如果你的罚款与图表转换为图像，然后只需用一个屏幕截图（打印SCRN在Windows上，然后粘贴到任何图像编辑器，在Mac上的命令+ SHIFT + 4），然后放下你的图像到Excel中。

Answer 3

这可能是有点晚，但我通过谷歌碰到这个偶然所以它可能帮助别人。 Highchart的图像为SVG格式：http://en.wikipedia.org/wiki/Svg，您需要将其转换为位图格式图像。 你必须在Highcharts导出选项网址更改为您自己的网址：

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

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

Answer 4

经过一番搜索，我发现这个最近的answer in their forums，与jsfiddle修补。

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

Answer 5

我知道这太晚了，但我有同样的问题，这jsfiddle帮助我从高图创建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()); 
}); 

Answer 6

如果你愿意尝试的插件，有使用JavaScript，HTML和CSS在Excel中的一种方式。它被称为Funfun，它拥有一个带有嵌入式电子表格的在线编辑器，因此网站与Excel之间的转换并不困难。

这里是一个图表I与Highcharts制成：

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

在这个例子中我把图表从Highchart demo，用矿替换的数据。 我将数据存储在嵌入式电子表格中，并感谢json文件，我可以在我的JavaScript代码中使用它。

这就是我如何得到我的数据从JSON文件的电子表格：

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

我把它保存在我的script.js用正确的格式，所以我可以直接加载在Highcharts（为你的数字必须将数据转换为浮动或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] 
    } 
); 

后，您已经选择所有的你正在为你的图表选项，你可以添加数据：

series: [{ 
     data: data 
    }] 

一旦您对图表满意，可以通过将网址粘贴到Funfun add-in中直接将其加载到Excel中。这里是如何看起来像我的例子：

当然你也可以使用其他的库比Highcharts，也有用于数据可视化像charts.js和D3.js.了很多强大的库

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

披露：我是Funfun的开发商。