Question

我正在使用此js函数从Highcharts图表中导出CSV。我已经在使用最新版本的Highcharts（3.0.7）。正确导出CSV，此代码的问题在于导出3d图表后，在某些情况下，x轴会被修改，就好像Highcharts javascript对象已被更改一样。但是，下面的代码不会触及（至少这是我认为的）真正的Highcharts对象。

经过一些测试，我发现评论这个if-block：

if (xAxis.categories) {
    columns.push(xAxis.categories);
    columns[0].unshift("");
}

阻止导出后更新x轴，但同时这显然会破坏导出的CSV。

这怎么可能？

(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.options.xAxis[0],
            columns = [],
            line,
            csv = "",
            row,
            col;

        if (xAxis.categories) {
            columns.push(xAxis.categories);
            columns[0].unshift("");
        }

        each(this.series, function (v){
            columns.push(v.yData);
            columns[columns.length - 1].unshift(v.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;
    };   

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

经过一番研究，我发现这种“奇怪”行为发生的真正原因在于这行代码：

var xAxis = this.options.xAxis[0];

我没有意识到新的var xAxis被视为“像指针”一样对待真正的Highcharts对象，因此向/从该变量推送/取消移动值也会修改原始对象。这种行为（类似于“通过引用传递”）只发生在对象上，这才是真正误导我的行为。在这种情况下，JavaScript真的很狡猾。

Answer 1

问题可能是：columns[0].unshift("");正在修改原始类别。

解决方案？使用类别副本，例如：

    if (xAxis.categories) {
        var c = $.merge([''], xAxis.categories);
        columns.push(c);
    }

如果这没有帮助，请在jsFiddle上重新创建问题。

Highcharts CSV导出更改图表JS对象

1 个答案: