如何在一段时间内动态更新Highcharts数据

How to update Highcharts data dynamically over a period of time

本文关键字：更新 Highcharts 数据 动态 一段时间      更新时间：2023-09-26

我想使用Highcharts图并动态更新y轴。实际上，我想每5秒更新nsw，Tas，ACT。我该怎么做？

这是我的密码。

$(function () {
$('#container').highcharts({
                    title: {
                        text: 'Histogram',
                        x: -20 // center
                    },
                    subtitle: {
                        text: 'Source: www.trove.com',
                        x: -20
                    },
                    xAxis: {
                        categories: ['NSW', 'Tas', 'ACT','QLD','VIC','SA','WA']
                    },
                    yAxis: {
                        title: {
                            text: 'Hits'
                        },
                        plotLines: [{
                            value: 0,
                            width: 1,
                            color: '#808080'
                        }]
                    },
                    tooltip: {
                        valueSuffix: '°C'
                    },
                    legend: {
                        layout: 'vertical',
                        align: 'right',
                        verticalAlign: 'middle',
                        borderWidth: 0
                    },
                    series: [{
                        name: 'States',
                        data: [nsw, Tas, ACT,qld,vic,sa,wa]
                    }]
                });
            });
            });

在文档中，您可以在jsfiddle的Highcharts中找到一个示例。看看吧http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/dynamic-update/.在该示例中，每秒钟都会添加一个新点。下面是相关的代码部分：

chart: {
    type: 'spline',
    animation: Highcharts.svg, // don't animate in old IE
    marginRight: 10,
    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);
        }
    }
},
`

最简单的方法是使用javascript函数"setInterval（）"来调用它。

这里有一个链接，你可以找到一种方法：

http://www.w3schools.com/js/js_timing.asp

如果你不太擅长javascript，你可能需要这样的函数声明：var functionName=function（）{}vs function functionName（）{}

使用：

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(),
                l = series.data.length;
            for(var i  = 0; i < l; i++) {
                series.data[i].update({ 
                  y: getHits(i) // or something else
                });
            }
        }, 5000); // 5 seconds
    }
}

其中index是数据数组中nsw/Tas/ACT的索引（从0开始计数）。（对于nsw=0，对于Tas=1等）

相关文章：