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/

将数组传递给setData（）函数

1 个答案: