时间戳

首页 > 解决方案 > 将图形点绘制为实时流：Highcharts

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

问题描述

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

这是代码：

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

标签： javascriptjqueryajaxhighcharts

解决方案

问题是您正在获取数据、添加点并在添加所有点后重绘图表。为了使其“活”和平滑地分别在相等的间隔中添加点。如果间隔非常小，则禁用动画以使其更好地工作（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参考：

推荐阅读