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: []
        }]
    });
});

这是关于数据点如何绘制的小提琴示例。

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

演示：

API参考：

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

将图点绘制为实时流：Highcharts

1 个答案: