将数组传递给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传递给高层图初始化时，您将传递对该高层图转换为对象数组的data1的引用。你必须传递数组的一个副本，以便有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/