首页 > 开发 > HTML > 正文

hchart实时刷新页面问题

2017-09-09 13:30:37  来源: 网友分享

如图,想做一个这个

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

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