如何在不重新绘制的情况下更新Highcharts中的条形图

我想更新带动态数据的条形图，而无需重新绘制整个图形。 My sample Code is here 如何在不重新绘制的情况下更新Highcharts中的条形图

$(function() { 
    $('#container').highcharts({ 
     chart: { 
      type: 'bar' 
     }, 
     title: { 
      text: 'Stacked bar chart' 
     }, 
     xAxis: { 
      categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas'] 
     }, 
     yAxis: { 
      min: 0, 
      title: { 
       text: 'Total fruit consumption' 
      } 
     }, 
     legend: { 
      reversed: true 
     }, 
     plotOptions: { 
      series: { 
       stacking: 'normal' 
      } 
     }, 
     series: [{ 
      name: 'John', 
      data: [5] 
     }, { 
      name: 'Jane', 
      data: [2] 
     }, { 
      name: 'Joe', 
      data: [3] 
     }] 
    }); 
});

这里，如果在该系列中的数据动态地出现，那么如何只增加或减少线条的宽度或递增/递减计数的特定酒吧。另外，如果另一个栏加起来或现有栏不在新数据中。

来源

2016-07-21 k.p

您可以使用Series.update（）用于更新全系列，Series.setData（）用于设定系列的数据，chart.addSeries（）用于添加新的Series和Series.addPoint（）以将单点添加到您的系列。您可以在Highcharts API中找到关于这种方法的信息：http：//api.highcharts.com/ –

添加以下

events: { 
       load: function() { 

        // set up the updating of the chart each second 
        var series = this.series[0]; 
        setInterval(function() { 
         var x = (new Date()).getTime(), // current time 
          y = Math.random(); 
         series.addPoint([x, y], true, true); 
        }, 1000); 
       }

这增加了分每一秒，但你可以改变间隔或发泄自己说click事件。

所以highcharts有一个演示，你可以检查出这一点，如果你需要进一步澄清：

http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/dynamic-update/

来源

2016-07-21 06:23:52 Alan

您好艾伦，这很好，但您能解释我如何更新我的数据如果我的系列数据更新了，在这里用一些函数改变数据@Alan –

你在用JS/Jquery更新系列数据吗？ – Alan

这个整个文件是一个小孩主持人，并且数据出现在父进程和ajax请求时，并且数据传递到子主持人的一个函数里面（这个图形主持人）@Alan –

如何在不重新绘制的情况下更新Highcharts中的条形图

回答

相关问题