javascript - 将图表点绘制为实时流 : 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