javascript - 更改/交换 Highcharts 数据

Question

我已经使用 Highcharts 设置了饼图，我需要通过按钮交换数据。第二个按钮(远程)交换数据没有问题，但是当我尝试使用第一个按钮(立即)交换回原始数据时，它不起作用。

这是我的代码笔: https://codepen.io/doitliketyler/pen/mQMyGe?editors=1011

我的按钮如下所示:

$('#immediate').click(function() {
  chart.series[0].setData(immediate);
});

$('#distant').click(function() {
  chart.series[0].setData(distant);
});

关于如何正确完成此操作有什么想法吗？

Answer 1

给你。问题是，当您设置其中一个数据数组时，它会通过引用传递，因此两个数据集都指向同一事物。因此，首先复制您要设置的数据。然后设置一个空数组作为数据以清除 highcharts 数据，然后使用复制数组进行设置。

var chart = Highcharts.chart('container', {
  chart: {
    type: 'pie'
  },
  title: {
    text: 'Swap Pie Data'
  },
  series: [
    {
      id: 'relative',
      name: 'Immediate',
      type: 'pie',
      size: '100%',
      innerSize: '30%',
      colorByPoint: true,
      data: immediate
    },
    {
      type: 'pie',
      size: '30%',
      name: 'Original',
      colorByPoint: true,
      data: original
    }
  ]
});

$('#immediate').click(function() {
  var temp = immediate.slice(0);

  chart.series[0].setData([]);
   chart.series[0].setData(temp);

});

$('#distant').click(function() {
    var temp = distant.slice(0);

    chart.series[0].setData([]);
    chart.series[0].setData(temp);
});