如何在javascript中將項目動態添加到數組

Question

首先，我是一個JavaScript新手，所以請多多包涵。 我有以下腳本使用Highchart框架繪制餅圖

$(function() {
    var options = {
        colors: ["#66CC00", "#FF0000", "#FF6600"],
        chart: {
            renderTo: 'container',
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: true
        },
        title: {
            text: 'Host Status'
        },
        tooltip: {
            formatter: function() {
                return '<b>' + this.point.name + '</b>: ' + this.total;
            }
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: true,
                    color: '#000000',
                    connectorColor: '#000000',
                    formatter: function() {
                        return '<b>' + this.point.name + '</b>';
                    }
                }
            }
        },
        series: [{
            type: 'pie',
            name: 'service status',
            data: []
        }]
    }

    var chart;
    options.series.data.push('['
    Service Ok ',   45.0]')
    $(document).ready(function() {
        chart = new Highcharts.Chart(options)
    });

});​

我正在嘗試做的是將值作為對象數組動態加載到series.data數組中。 這是怎么了，有沒有更好的方法將數據加載到數據數組中？

Answer 1

series屬性是一個數組，因此您需要像這樣編寫它（向系列添加單個數據點）：

options.series[0].data.push( ["Service Ok", 45.0 ]);

我在看這個JS小提琴 。

Answer 2

您的代碼有錯誤：
您說過要動態加載值rigth嗎？
但是，您只需編寫初始意向數據然后進行渲染即可。
因此，在您的情況下，如果要“通常”更改系列數據，則必須銷毀當前圖表，更新它的數據，然后再次呈現它。 可能您會失去性能 。

正確的方法是使用highstock api，不要手動更新。 如果這樣做，使用圖表縮放時可能會出現一些錯誤，因為要更新圖表點，此api必須再次計算點，並且是在使用上述功能時完成的。
正如您在意向書參考中看到的，要更新圖表數據，您必須使用以下功能：
設置新數據： chart.series[0].setData(newData, redraw); 例
添加一個新點： chart.series[0].addPoint(arrayOfPoints, redraw); 例

看看這個小提琴 ，在這里，我不使用api函數就手動更新了圖表系列，會發生什么？ 沒有。

為了獲得最佳性能，可以使用以下代碼：

    function createChart() {
        chart = new Highcharts.Chart(options);
    }

    // when you want to update it's data
    $(element).yourEvent(function() {
        var newData = ['Service Ok', 50.0];
        if(chart.hasRendered) {
            chart.series[0].setData(newData, true);
        } else {
            // only use it if your chart isn't rendered
            options.series[0].data.push(newData);
            createChart();
        }
    });

$(function() {
    var options = {
        colors: ["#66CC00", "#FF0000", "#FF6600"],
        chart: {
            renderTo: 'container',
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: true
        },
        title: {
            text: 'Host Status'
        },
        tooltip: {
            formatter: function() {
                return '<b>' + this.point.name + '</b>: ' + this.total;
            }
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: true,
                    color: '#000000',
                    connectorColor: '#000000',
                    formatter: function() {
                        return '<b>' + this.point.name + '</b>';
                    }
                }
            }
        },
        series: [{
            type: 'pie',
            name: 'service status',
            data: ['Service Ok ',   45.0]
        }]
    }

    var chart;
    $(document).ready(function() {
        createChart();
    });
});​

Answer 3

我認為這可能會對您的JavaScript push（）方法規范有所幫助

和Highcharts控制規范

系列是對象的數組，因此您應該這樣做：

options.series[0].data.push(["Service Ok", 45.0 ])

在這種情況下，您會得到

series: [{

    type: 'pie',

    name: 'service status',

    data: [
             ["Service Ok", 45.0 ]
          ]

    }]

演示與餅圖

Answer 4

嘗試這個

$(function() {
var options = {   
    series: [{
        type: 'pie',
        name: 'service status',
        data: []
        }]
};    
    var objData={ "type":'bar','name':'second','data':[]};
    options.series.push(objData);
});​

Answer 5

嘗試

options.series[0]data[0]= 'Service Ok';
options.series[0]data[1]= 45.0;