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

How to update bar graph in Highcharts without redrawing again

本文关键字：情况下 更新 Highcharts 条形图 绘制 新绘制      更新时间：2023-09-26

我想用动态的数据更新条形图，而不需要重新绘制整个图。我的样本代码在这里

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

这里，如果序列中的数据是动态出现的，那么如何增加或减少条形宽度或特定条形的向上/向下计数。此外，如果另一个条形图相加，或者新数据中不存在现有条形图。

添加以下

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

这会每秒增加点数，但您可以更改间隔或通风口本身，以表示单击事件。

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

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

相关文章：