Изменить / поменять данные Highcharts

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