将highstock(highcharts)绑定到实时数据?

时间:2018-03-09 15:48:42

标签: javascript highcharts

我使用.net core 2.0 web socket生成一些数据。我想将数据发送到此图表并绘制图表。 在下面的代码中,我想显示没有默认值的实时数据。我尝试了很多,但我没有成功。如果我从'系列'中删除默认值,图表将消失。有可能动态绘制这个图表吗?

Highcharts.setOptions({
global: {
    useUTC: false
}});

Highcharts.stockChart('container', {
chart: {
    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.round(Math.random() * 100);
                series.addPoint([x, y], true, true);
            }, 1000);
        }
    }
},

rangeSelector: {
    buttons: [{
        count: 1,
        type: 'minute',
        text: '1M'
    }, {
        count: 5,
        type: 'minute',
        text: '5M'
    }, {
        type: 'all',
        text: 'All'
    }],
    inputEnabled: false,
    selected: 0
},

title: {
    text: 'Live random data'
},

exporting: {
    enabled: false
},

series: [{
    name: 'Random data',
    data: (function () {
        // generate an array of random data
        var data = [],
            time = (new Date()).getTime(),
            i;

        for (i = -999; i <= 0; i += 1) {
            data.push([
                time + i * 1000,
                Math.round(Math.random() * 100)
            ]);
        }
        return data;
    }())
}]});

1 个答案:

答案 0 :(得分:0)

最后我找到了解决方案。我需要将xAxis属性添加到我的图表中。通过添加下面的代码,问题解决了。现在它从当前时间开始。

xAxis: {
                type: 'datetime',
                tickPixelInterval: null,
                maxZoom: 10 * 1000,
                min: new Date().getTime()
            }