如何將JavaScript圖表導出到Excel文件（HighCharts）

Question

我必須將Javascript圖表（HighCharts）導出到excel文件中; 圖表是在div中呈現的，但是excel不會渲染javascript生成的html + css內容，只渲染沒有樣式的文本。

一個解決方案是將圖表呈現為圖像（jpeg）的轉換，但我沒有成功...

謝謝 ！

Answer 1

HighCharts已經通過與其一起打包的導出模塊支持圖像導出功能。 導出獲取后，您應該能夠修改腳本以任何方式保存圖像。 這肯定不是初學者的任務，需要大量的修修補補。

如果是我，我會修改響應導出按鈕的代碼，以便我可以使用JavaScript激活它並傳入信息，以便后端的PHP文件可以按照您想要的方式保存圖片而不是返回它給客戶。

Answer 2

經過一番搜索后，我在他們的論壇中找到了這個最近的答案 ，並帶着一個jsfiddle來修補。

它描述了如何使用服務器上的腳本導出CSV，從過去的經驗來看，這是完成此操作的唯一方法，因為HighChart圖本身不包含足夠的信息來生成可用的電子表格。 我們已經使用了不同的圖表庫，並使用phpExcel實際創建電子表格。

Answer 3

如果您願意嘗試加載項，可以使用Excel中的Javascript，HTML和css。 它被稱為Funfun，它擁有一個帶有嵌入式電子表格的在線編輯器，因此網站與Excel之間的轉換並不難。

這是我用Highcharts制作的圖表：

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

在這個例子中，我從Highchart演示中獲取了圖表，並用我的數據替換了數據。 我將我的數據存儲在嵌入式電子表格中，並且由於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加載項中的URL將其直接加載到Excel 中 。 以下是我的示例：

當然你可以使用另一個庫而不是Highcharts，有很多強大的數據庫可視化庫，如charts.js和D3.js.

我知道這是一個老帖子，但我希望它可以幫助有同樣問題的人。

披露：我是Funfun的開發者。

Answer 4

這可能有點晚了，但我偶然發現了谷歌，所以它可能對某人有所幫助。 Highchart的圖像采用SVG格式： http ： //en.wikipedia.org/wiki/Svg ，您需要將其轉換為位圖格式圖像。 您必須將Highcharts導出選項URL更改為您自己的URL：

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

在導出腳本中，您必須將SVG圖像轉換為位圖圖像（我使用PHP和imagick）然后導出到適合您需要的任何內容，將位圖圖像保存到服務器，通過電子郵件發送等，

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());
});