如何在动态更新的图表上更新高价指标

Posted 2021-05-05

指标仅绘制图表的“历史”部分，但在新点出现时不会更新。 http://jsfiddle.net/yp6ocybe/

    series: [{
            id: 'rand',
        name: 'Random data',
        data: (function () {
            // generate an array of random data
            var data = [],
                time = (new Date()).getTime(),
                i;

            for (i = -999; i <= 0; i += 1) {
                data.push([
                    time + i * 1000,
                    Math.round(Math.random() * 100)
                ]);
            }
            return data;
        }())
    },
    {
            type: 'sma',
            linkedTo: 'rand',
            name: 'SMA (14)'
        }, {
            type: 'sma',
            linkedTo: 'rand',
            name: 'SMA (50)',
            params: {
                period: 50
            }
        }]
});

答案

我找到的最佳解决方案是在更新主系列时在SMA系列上手动调用update。

load: function () {
  // set up the updating of the chart each second
  var series = this.series[0];
  var series1 = this.series[1];
  var series2 = this.series[2];
  setInterval(function () {
    var x = (new Date()).getTime(), // current time
        y = Math.round(Math.random() * 100);
    series.addPoint([x, y], true, true);
    //call update by passing the old options and redraw = true
    series1.update(series1.options, true);
    series2.update(series2.options, true);
  }, 1000);
}

它至少在我的机器上顺利停止动画。

http://jsfiddle.net/yp6ocybe/3/

Highcharts.setOptions({
    global: {
        useUTC: false
    }
});

// Create the chart
Highcharts.stockChart('container', {
    chart: {
        events: {
          load: function () {

            // set up the updating of the chart each second
            var series = this.series[0];
            var series1 = this.series[1];
            var series2 = this.series[2];
            setInterval(function () {
              var x = (new Date()).getTime(), // current time
                  y = Math.round(Math.random() * 100);
              series.addPoint([x, y], true, true);
              series1.update(series1.options,true);
              series2.update(series2.options,true);
            }, 1000);
          }
        }
    },

    rangeSelector: {
        buttons: [{
            count: 1,
            type: 'minute',
            text: '1M'
        }, {
            count: 5,
            type: 'minute',
            text: '5M'
        }, {
            type: 'all',
            text: 'All'
        }],
        inputEnabled: false,
        selected: 0
    },

    title: {
        text: 'Live random data'
    },

    exporting: {
        enabled: false
    },

    series: [{
    		id: 'rand',
        name: 'Random data',
        data: (function () {
            // generate an array of random data
            var data = [],
                time = (new Date()).getTime(),
                i;

            for (i = -999; i <= 0; i += 1) {
                data.push([
                    time + i * 1000,
                    Math.round(Math.random() * 100)
                ]);
            }
            return data;
        }())
    },
    {
            type: 'sma',
            linkedTo: 'rand',
            name: 'SMA (14)'
        }, {
            type: 'sma',
            linkedTo: 'rand',
            name: 'SMA (50)',
            params: {
                period: 50
            }
        }]
});

<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
<script src="https://code.highcharts.com/stock/indicators/indicators.js"></script>
<div id="container" style="height: 400px; min-width: 310px"></div>

以上是关于如何在动态更新的图表上更新高价指标的主要内容，如果未能解决你的问题，请参考以下文章

如何创建动态更新样条 Highcharts 图表？

如何通过Websocket的数据动态更新Ngx图表的条形图

DASH 实时烛台图表在实时更新时消失但仍保留指标

Angular 4 - 为 Facebook 动态更新 Meta 标签（打开图表）

使用指定的 x 和 y 值更新动态 Dojo 图表

动态 TextView 未在片段中更新