Question

我已经使用Highcharts设置了一个饼图，我需要通过按钮交换数据。第二个按钮（遥远）可以毫无问题地交换数据，但是当我尝试使用第一个按钮（立即）交换回原始数据时，则不起作用。

这是我的Codepen： 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

您在这里。问题在于，当您设置一个数据数组时，它通过引用传递，因此两个数据集都指向同一对象。因此，请首先复制要设置的数据。然后将一个空数组设置为数据以清除高图表数据，然后使用复制数组进行设置。

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);
});

更改/交换高图数据

1 个答案: