Question

我使用下面的代码显示Highchart，其中包含3个信号，这些信号会定期更新动画。但问题是，对于2个信号，首先更新点，然后曲线滑入点。当我只有一个信号它看起来更好时，点不会“跳出”曲线。如何更新所有曲线而没有点“跳出”图表？

    <!DOCTYPE html>
    <html lang="en">
    <head>
    </head>
      
    <body>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    
    <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
    
           
    <script type="text/javascript">
    
    $(document).ready(function () {
      function initData()
      {
        var data = [];
        var time = Date.now();
        for (var i = -60; i <= 0; i += 1) {
            data.push({ x: time + i * 1000, y: 0 });
        }
        return data;
      }
    
      Highcharts.chart('container', {
        chart: {
        type: 'spline',
        animation: { duration:500}, //false,
        events: {
          load: function () {
            var series = this.series;
            var len  = series.length;
            setInterval(function () {
              var t = Date.now();
              for (var j = 0; j < len; j++) {
                series[j].addPoint([t, Math.random()], true, true);
              }  
            }, 1000);
          }
        }
        },
        title: {text: 'Live random data'},
        xAxis: {type: 'datetime', tickPixelInterval: 150 },
        yAxis: {title: {text: 'Value' }, plotLines: [{value: 0, width: 1, color: '#808080'}] },
        legend: { enabled: false },
        exporting: { enabled: false },
            series:
            [
              { name: 'Random data', data: initData() },
              { name: 'Signal2', data: initData() },
              { name: 'Signal3', data: initData() }
            ]
        });
    });
    </script>
      
    <script src="https://code.highcharts.com/highcharts.js"></script>
    <script src="https://code.highcharts.com/modules/exporting.js"></script>
    <div id="container" style="min-width: 310px; height: 500px; margin: 0 auto"></div>
    
    </body>
    </html>

Answer 1

查看API，其中添加了以下内容：

重绘布尔

是否在添加点后重绘图表。添加多个点时，强烈建议将重绘选项设置为false，而在完成添加点后显式调用Highcharts.Chart #redraw。否则，在添加每个点后，图表将重新绘制。

更改以便在添加所有点后完成redraw，您的问题似乎已得到解决。

load: function () {
  var series = this.series;
  var len  = series.length;
  setInterval(function () {
    var t = Date.now();
    for (var j = 0; j < len; j++) {
      series[j].addPoint([t, Math.random()], false, true); //set redraw to false
    }
    chart.redraw(); //added a redraw here
  }, 1000);
}

工作示例：https://jsfiddle.net/ewolden/q489nsgw/4/

addPoint上的API ：http://api.highcharts.com/class-reference/Highcharts.Series#addPoint

同步更新所有Highcharts图表系列

1 个答案: