Question

因此，我拥有的是一组存储的数据，我可以在Highchart中轻松访问这些数据。但是现在我需要将数据显示为实时流像下面的例子一样：

https://www.highcharts.com/demo/dynamic-update

到目前为止，我在这里所做的事情：

var a: String = null.asInstanceOf[String]
while( { a = scala.io.StdIn.readLine; a != null } ) {
namesMap.get( a ) match {
    case Some( value ) => println( s"$a=$value" )
    case None => println( "Not found" )
  }
}

我的数据如何像上述示例一样流动？在10 10个补丁中。这是工作中的JSFiddle：

https://jsfiddle.net/abnitchauhan/3vj2afnt/

Answer 1

您可以最初仅添加前10个点，然后使用图表load事件函数并设置间隔以使用shift参数添加剩余点：

var xValues = [],
    counter = 11,
    startValues;

xValues = [...];

startValues = xValues.slice(0, counter);

var chart = Highcharts.chart('ppg', {
    chart: {
        type: 'line',
        events: {
            load: function() {
                var chart = this,
                    interval = setInterval(function() {
                        chart.series[0].addPoint(xValues[counter], true, true);
                        counter++;

                        if (counter === xValues.length - 1) {
                            clearInterval(interval);
                        }
                    }, 1000);
            }
        }
    },
    ...
});

实时演示： https://jsfiddle.net/BlackLabel/7x9vrLqm/

API参考：

https://api.highcharts.com/highcharts/chart.events.load

https://api.highcharts.com/class-reference/Highcharts.Series#addPoint

Answer 2

缺少您的代码事件，该事件将每秒触发一次更改。

类似这样的事情。我使用了随机数。

var xValues = [];
 xValues = [1,4,3,9,3,4,4,6,4,5,3,4,3,3,1,3,2,3,2,3,4,4,3,3,4,3,5,3,6,7,3,2,5,7,4,6,7,3,6,7,4,7,4,7,3,2,5,6,7,4,3,4,6,6,7,4,6,6,7,3,6,7,3,2,4,5,6,5,9,8,4,6,2,1,5,8,5,8,2,6,3,8,4,7,3,6,1,5,8,0,2,4,7,5,8,3,7,9,3,7];


Highcharts.chart('ppg', {
    chart: {
        type: 'line',
         events: {
            load: function () {
                // set up the updating of the chart each second
                var series = this.series[0];
                setInterval(function () {
                    var x = Math.random();
                        y = Math.random();
                    series.addPoint([x, y], true, true);
                }, 1000);
            }
        }
    },
    title: {
        text: 'ECG Data'
    },
    subtitle: {
        text: ''
    },
    xAxis: {


        crosshair: false
    },
    yAxis: {

        title: {
            text: 'Peaks'
        }
    },
   tooltip: {
        enable: false
    },
    plotOptions: {
        column: {
            pointPadding: 0.2,
            borderWidth: 0
        }
    },
    series: [{
        name: '',
        lineWidth: 2,
        data: xValues,
         animation: {
                duration: 5000
            }
    }]
});

工作fiddle

将数据作为实时流显示，Highcharts

2 个答案: