javascript - 将数组传递给 setData() 函数时出现问题

Question

我正在尝试创建一个饼图，我可以使用按钮在两个数据系列之间切换。

当我将值直接传递给按钮 onclick 事件上的 setData() 函数时，一切正常。请参阅jsfiddle (在职的)。

但是，如果我将数据保存在数组中，当我使用 setData() 时，该函数会用第二个数组覆盖第一个数组。请参阅jsfiddle (不工作)。

总而言之，当我直接使用数据时，它是有效的:

// the button action
    $('#button').click(function () {
        var chart = $('#container').highcharts();
        bool_pie = !bool_pie;
        if(!bool_pie){
            chart.series[0].setData([129.2, 144.0, 176.0]);
        }else{
            chart.series[0].setData([29.9, 71.5, 106.4]); 
        }
    });

但是当我使用变量时，数组data1被数组data2覆盖

    var data1 = [29.9, 71.5, 106.4];
    var data2 = [129.2, 144.0, 176.0];
// the button action
    $('#button').click(function () {
        var chart = $('#container').highcharts();
        bool_pie = !bool_pie;
        if(!bool_pie){
            chart.series[0].setData(data2);
        }else{
            chart.series[0].setData(data1); 
        }
    });

因此，我发现了这个问题，但我不知道如何管理它。

Answer 1

我发现了你的问题。当您将 data1 传递给 highcharts 初始化时，您将传递对该 data1 的引用，该引用将被 highcharts 转换为对象数组。您必须传递该数组的副本才能将 data1 和 data2 作为数组:

$(function () {
    var data1 = [29.9, 71.5, 106.4];
    var data2 = [129.2, 144.0, 176.0];
    var bool_pie = true;
    $('#container').highcharts({
        chart: {
            type: 'pie'
        },
        series: [{
            data: data1.slice(0, data1.length)
        }]
    });

    // the button action
    $('#button').click(function () {
        var chart = $('#container').highcharts();
        bool_pie = !bool_pie;
        var data = (!bool_pie) ? data2 : data1;
        chart.series[0].setData(data); //PASSING ARRAY VARIABLE
    });
});

我修改了以下行:data: data1.slice(0, data1.length)

http://jsfiddle.net/8rjg30pc/4/