Question

我想使用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]
                    }]
                });
            });

            });

Answer 1

在文档中，您可以在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);
        }
    }
},
`

Answer 2

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

这是一个链接，您可以在其中找到一种方法：

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

如果你不擅长javascript，你可能需要这个函数声明：var functionName = function() {} vs function functionName() {}

Answer 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(),
                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等）

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

3 个答案: