时间戳

首页 > 解决方案 > 更改/交换 Highcharts 数据

javascript - 更改/交换 Highcharts 数据

问题描述

我已经使用 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);
});

关于如何正确完成的任何想法？

标签： javascripthighcharts

解决方案

干得好。问题是，当您设置其中一个数据数组时，它通过引用传递，因此两个数据集都指向同一事物。因此，首先复制您要设置的数据。然后将一个空数组设置为您的数据以清除 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);
});

推荐阅读