Обновление данных одной категории в столбчатой ​​диаграмме Highcharts

Question

Я пытаюсь использовать столбчатую диаграмму с одной категорией, но 4 значениями. Первоначальный рендеринг графика работает отлично. Однако, когда я использую метод series[0].setData() для обновления данных, он создает 4 категории, а не обновляет одну категорию.

Вот ссылка на jsfiddle

$(function() {
  var chart;
  $(document).ready(function() {
    chart = Highcharts.chart('container', {
      chart: {
        type: 'column'
      },
      title: {
        text: 'Packet Summary Stats'
      },
      subtitle: {
        text: 'Source: ABC'
      },
      xAxis: {
        categories: [
          'Packet Summary'
        ],
        crosshair: true
      },
      yAxis: {
        min: 0,
        title: {
          text: 'Packet Count'
        }
      },
      tooltip: {
        headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
        pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' + '<td style="padding:0"><b>{point.y}</b></td></tr>',
        footerFormat: '</table>',
        shared: true,
        useHTML: true
      },
      plotOptions: {
        column: {
          pointPadding: 0.2,
          borderWidth: 1
        }
      },
      series: [{
        "data": [100],
        "name": "Rx"
      }, {
        "data": [90],
        "name": "Tx"
      }, {
        "data": [10],
        "name": "Dropped"
      }, {
        "data": [10],
        "name": "No Match"
      }]
    });
  });

  $('#button').click(function() {
    chart.series[0].setData([
      [200],
      [180],
      [20],
      [20]
    ]);
  });
});

Я не могу понять, что я делаю здесь неправильно. Любая помощь приветствуется.

Спасибо

Answer 1

Вы должны обновить график как

скрипка

   $('#button').click(function() {
    chart.series[0].setData(
      [200]
    );
     chart.series[1].setData(
      [180]
    );
     chart.series[2].setData(
      [20]
    );
     chart.series[3].setData(
      [20]
    );
  });