Highcharts - обновлять столбчатую диаграмму в реальном времени

Question

Я попытался динамически обновить Highcarts типа column, но безуспешно.Это демонстрационный код для диаграммы column:

HTML:

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

JS:

Highcharts.chart('container', {
    chart: {
        type: 'column',
    },
    title: {
        text: ''
    },
    xAxis: {
        type: 'category'
    },
    yAxis: {
        title: {
            text: ''
        },
            max: 100
    },
    legend: {
        enabled: false
    },
    exporting: {
        enabled: false
    },
    plotOptions: {
        series: {
            borderWidth: 0,
            dataLabels: {
                enabled: true,
                format: '{point.y:.1f}m/s²rms'
            }
        }
    },    
    "series": [
        {
            "name": "",
            "colorByPoint": true,
            "data": [
                {
                    "name": "",
                    "y": 30
                }
            ]
        }
    ]
});

Я хотел бы обновить значение yдинамически.Я пытался добавить это в charts разделе JS:

Highcharts.chart('container', {
    chart: {
        type: 'column',

        // This is my new code to update Y every second
        load : function() {
          var series = this.series[0];
          setInterval(function() {
            y = Math.random();
            series.data.y([y]);
          }, 1000);
        }
        // End of my new code
    },
    title: {
        text: ''
    },
    xAxis: {
        type: 'category'
    }, 
[...]

JSFiddle: https://jsfiddle.net/af8p9yon/

Может кто-нибудь сказать мне, как я могу архивировать этос помощью JavaScript?Заранее спасибо.

Answer 1

В вашем коде есть две ошибки, отсутствует свойство events, и вы должны использовать метод setData или update:

с использованием метода setData

    events: {
        load: function() {
            var series = this.series[0];
            setInterval(function() {
                y = Math.random();
                series.setData([y]);
            }, 1000);
        }
    }

с использованиемметод обновления

events: {
  load: function() {
    var series = this.series[0];
    setInterval(function() {
      y = Math.random() * 100;
      series.update({
        data: [y],
      }, true)
    }, 1000);
  }
}

Демонстрационная версия: https://jsfiddle.net/BlackLabel/Louath3b/

API:

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

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