将图形点绘制为实时流：Highcharts

Question

所以我有一个图表，它可以一次更新特定点。但问题是该图表没有被绘制为实时流。它只是一次绘制点

代码如下：

var chart;

function requestData() {
    $.ajax({
        url: 'https://api.myjson.com/bins/wmxsn',
        success: function(data) {
            var series = chart.series[0],
                shift = series.data.length > 20, // shift if the series is 
                y = data;

            data.forEach(function(el) {
                chart.series[0].addPoint(el, false, shift);
            });

            chart.redraw();

            setTimeout(requestData, 1000);
        },
        cache: false
    });
}

document.addEventListener('DOMContentLoaded', function() {
    chart = Highcharts.chart('container', {
        chart: {
            type: 'line',
            events: {
                load: requestData
            }
        },
        title: {
            text: 'Live random data'
        },
        xAxis: {
            crosshair: false
        },
        yAxis: {
            minPadding: 0.2,
            maxPadding: 0.2,
            title: {
                text: 'Value',
                margin: 80
            }
        },
        series: [{
            name: 'Random data',
            data: []
        }]
    });
});

这是如何绘制数据点的 Fiddle 示例。

http://jsfiddle.net/abnitchauhan/g86tbydj/

但我想要的是流畅的流程，如下例所示： （这只是一个示例，说明数据应该如何流动而与代码无关。请仅查看以下代码中的图形动画）

https://codepen.io/AbnitChauhan/pen/BaBxyMV

Answer 1

问题是您正在获取数据，添加点并在添加所有点后重新绘制图表。为了使其“活”和平滑地分别在相等的间隔中添加点。如果间隔非常小，则禁用动画以使其更好地工作（chart.animation = false）。查看下面发布的演示。

示例代码：

function requestData() {
  $.ajax({
    url: 'https://api.myjson.com/bins/wmxsn',
    success: function(data) {
      var series = chart.series[0],
        shift = series.data.length > 200, // shift if the series is 
        y = data,
        i = 0;

      var interval = setInterval(function () {
        if (i < 10) {
            chart.series[0].addPoint(data[i] * Math.random() * 10, true, shift);
          i++
        } else {
            clearInterval(interval);
          requestData();
        }
      }, 30);
    },
    cache: false
  });
}

演示：

• http://jsfiddle.net/BlackLabel/cuxr865g/
• http://jsfiddle.net/BlackLabel/jdvm4u2o/

API 参考：

• https://api.highcharts.com/highcharts/chart.animation