Highcharts 从数组数据更新图表

Question

我正在使用 Highcharts.js，我不确定如何更新图表。

系列数据取自一个名为 "Data_A" 的数组，但如果我更改数组中的值，图表不会发生任何变化。

此外，如果有人知道更好的方法来从数组中获取数据并将其放入图表中，而不是现在的方式，那就太好了，我相信有更好的方法。

我现在所在的位置： http://jsfiddle.net/zadaq5e5/1/

这是我的 Javascript:

var Data_A = [];
var Data_B = [];

Data_A[ 2500 ] = 98;
Data_A[ 2501 ] = 95;
Data_A[ 2502 ] = 98;
Data_A[ 2503 ] = 98;
Data_A[ 2504 ] = 92;
Data_A[ 2505 ] = 98;
Data_A[ 2506 ] = 95;
Data_A[ 2507 ] = 98;
Data_A[ 2508 ] = 98;
Data_A[ 2509 ] = 92;

Data_B[ 2500 ] = 20;
Data_B[ 2501 ] = 30;
Data_B[ 2502 ] = 55;
Data_B[ 2503 ] = 66;
Data_B[ 2504 ] = 02;
Data_B[ 2505 ] = 20;
Data_B[ 2506 ] = 11;
Data_B[ 2507 ] = 26;
Data_B[ 2508 ] = 8;
Data_B[ 2509 ] = 96;


$(function () {

    setInterval(function(){ Data_A[ 2500 ] = Data_A[ 2500 ] + 1; },1000);

    chart = $('#container').highcharts({

        xAxis: {
            categories: []
        },

        tooltip: {
            shared: true,
            useHTML: true,            
            formatter: function() {
                HTML = "";
                HTML = HTML + "<table>";
                HTML = HTML + "<tr><td>Pressure A:</td><td>" + Data_A[this.x] + "</td></tr>";
                HTML = HTML + "<tr><td>Other data:</td><td>" + Data_B[this.x] + "</td></tr>";              
                HTML = HTML + "</table>";                
                return HTML;
            }
        },

        series: [{
            name: 'Compressebility',
            data: [
                {
                    x: 2500,
                    y: Data_A[2500],
                },
                {
                    x: 2501,
                    y: Data_A[2501],
                },
                {
                    x: 2502,
                    y: Data_A[2502],
                },
                {
                    x: 2503,
                    y: Data_A[2503],
                },
                {
                    x: 2504,
                    y: Data_A[2504],
                },
                {
                    x: 2505,
                    y: Data_A[2505],
                },
                {
                    x: 2506,
                    y: Data_A[2506],
                },
                {
                    x: 2507,
                    y: Data_A[2507],
                }
            ]
        }]

    });
});

Answer 1

如果您只想更新系列中的一个点，可以使用 Point.update()
Docs Here

但是，如果您想更新整个系列，您可能需要使用 Series.setData()。
Docs Here

如何使用：

首先，要处理您的 Chart 对象，您应该如何实例化它：

var myChart = new Highcharts.Chart({
   chart : {
            renderTo : $('#container')[0] // The element to where the chart will be rendered
        },
    // Additional options
})

要使用 Point.update()，您可以通过
访问系列中的特定点 myChart.series[0].data[indexOfSpecificPoint].update(optionsObject).

要使用Series.setData()，您可以通过
访问该系列 myChart.series[0].setData(dataArray).

根据您的示例，假设您只想更新 Data_A[ 2500 ]，这是我做的fiddle。

Highcharts 从数组数据更新图表

Highcharts update graph from array data

javascript

highcharts

如何使用：