Highcharts CSV 导出更改图表 JS 对象

Question

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

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

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 上重新创建问题。