更新Highcharts柱状图中的单个类别数据

我想使用单个类别的柱状图，但是有4个值。图表的初始渲染效果很好。但是，当我使用series [0] .setData（）方法更新数据时，它会创建4个类别，而不是更新单个类别。更新Highcharts柱状图中的单个类别数据

$(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] 
    ]); 
    }); 
});

我无法弄清楚我在做什么错在这里。任何帮助表示赞赏。

感谢

来源

2017-04-18 Vivek Kandhvar

作为一个实际的解释，以低于答案* Deep3015 *：你有四个不同的系列，每一个数据点。但是当你调用你的更新函数时，你只更新一个系列（'chart.series [0]'），有四个数据点。该图表添加了三个新类别以适应系列1的三个额外数据点，并且没有要添加到系列2-4的数据。您需要分别为每个系列调用'setData（）'（*或者，不要使用四个不同的系列 - 您可以通过使用单个系列来简化代码和视觉显示...） – jlbriggs

快速示例使用单系列：http://jsfiddle.net/jlbriggs/mhuzmnev/ – jlbriggs

只有正确的答案工作代码是不够的。也写了适当的解释。感谢您的解释 –

必须更新图表作为

Fiddle

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

来源

2017-04-18 10:04:09

非常感谢你的回复。它现在按需要工作。我怎么错过了这个！ –

如果此答案被接受，请参阅[这里]（https://meta.stackexchange.com/a/5235）如何接受 –

更新Highcharts柱状图中的单个类别数据

回答

相关问题