javascript - hchart实时刷新页面问题

问题描述

问 题

如图，想做一个这个

频谱线能够实时刷新动起来，这是我的代码：

socket.on('pushToWebClient', function (useData) {
    
}

这里用了websocket接收数据，会实时接收到useData的数据，刷新时间为100ms。
问题来了，这个hchart应该怎么用才能让点动起来而不是一直刷新图表呢？

解决方案

 var socket = io.connect();
    //测试返回数据，连接成功
    socket.on("test", function (data) {
        //console.log(data);
    });
    var option = {
        chart: {
            renderTo: 'main',
            type: 'spline'
            /* 图标类型 */
        },
        title: {
            text: 'canvas',
            x: -20 //center
        },

        xAxis: {
            categories: []
        },

        yAxis: {
            tickInterval: 100, //自定义刻度
            max: 0, //纵轴的最大值
            min: -100000, //纵轴的最小值
            title: {
                text: 'dbm'
            }

        },
        series: [{
            data: []
        },]

    }
    var chart =new Highcharts.Chart(option);
    //接收转发数据，格式json
    socket.on('pushToWebClient', function (useData) {

        var low = 100; //数据低频
        var high = 900; //数据高频
        var xArray = new function () {
            this.getJson = function () {
                var arr1 = [];
                for (var k = low; k < high; k++) {
                    arr1.push(k);
                }
                return {'hz': arr1}
            }

        }();
        var xData = xArray.getJson();
        chart.series[0].setData(useData.dbm);
        chart.xAxis.categories=xData.hz;



    });

这篇关于javascript - hchart实时刷新页面问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！