highcharts - 更新 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]
    );
  });