Highcharts - 实时更新柱形图

Question

我试图动态更新qazxsw poi类型的Highcharts没有运气。这是qazxsw poi图表的演示代码：

HTML：

column

JS：

column

我想动态更新

<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

的jsfiddle：charts

有人能告诉我怎样才能用Javascript来解决这个问题？提前致谢。

Answer 1

您的代码中有两个错误，没有

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'
    }, 
[...]

属性，您应该使用https://jsfiddle.net/af8p9yon/或events方法：

使用setData方法

setData

使用更新方法

update

现场演示：

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

API：

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/