hchart实时刷新页面问题

Question

如图，想做一个这个

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

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

    

}

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

Answer 1

&nbsp;var socket = io.connect();&nbsp; &nbsp; //测试返回数据，连接成功&nbsp; &nbsp; socket.on("test", function (data) {&nbsp; &nbsp; &nbsp; &nbsp; //console.log(data);&nbsp; &nbsp; });&nbsp; &nbsp; var option = {&nbsp; &nbsp; &nbsp; &nbsp; chart: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; renderTo: 'main',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type: 'spline'&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; /* 图标类型 */&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; title: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; text: 'canvas',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; x: -20 //center&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; xAxis: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; categories: []&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; yAxis: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; tickInterval: 100, //自定义刻度&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; max: 0, //纵轴的最大值&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; min: -100000, //纵轴的最小值&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; title: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; text: 'dbm'&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; series: [{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data: []&nbsp; &nbsp; &nbsp; &nbsp; },]&nbsp; &nbsp; }&nbsp; &nbsp; var chart =new Highcharts.Chart(option);&nbsp; &nbsp; //接收转发数据，格式json&nbsp; &nbsp; socket.on('pushToWebClient', function (useData) {&nbsp; &nbsp; &nbsp; &nbsp; var low = 100; //数据低频&nbsp; &nbsp; &nbsp; &nbsp; var high = 900; //数据高频&nbsp; &nbsp; &nbsp; &nbsp; var xArray = new function () {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.getJson = function () {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var arr1 = [];&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; for (var k = low; k < high; k++) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; arr1.push(k);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return {'hz': arr1}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; }();&nbsp; &nbsp; &nbsp; &nbsp; var xData = xArray.getJson();&nbsp; &nbsp; &nbsp; &nbsp; chart.series[0].setData(useData.dbm);&nbsp; &nbsp; &nbsp; &nbsp; chart.xAxis.categories=xData.hz;&nbsp; &nbsp; });