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

系列属性是一个数组，所以你需要像这样编写它（为系列添加一个数据点）：

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

我在看this JS Fiddle。

Answer 2

您的代码出错：
你说你想要动态加载值，怎么做？但是你的代码只是设置了初始的serie数据，然后再渲染它因此，在您的情况下，如果您想“动态地”更改您的系列数据，您必须销毁当前图表，更新它的数据然后再次渲染它。 可能会导致表现不佳。

正确的方法使用highstock api并且不要手动更新。如果你这样做，你可能会在使用图表缩放时遇到一些错误，因为为了更新图表点，这个api必须再次计算点数，并且当你使用上面的函数时它就会产生。您可以在serie reference上看到更新图表数据，您必须使用以下功能：
设置新数据：chart.series[0].setData(newData, redraw); example
添加新点：chart.series[0].addPoint(arrayOfPoints, redraw); example

看这个fiddle ，在这里我手动更新图表系列，不使用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() Method specification

和 Highcharts control specification

系列是一个对象数组，所以你应该这样做：

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

在这种情况下，你会得到

series: [{

    type: 'pie',

    name: 'service status',

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

    }]

DEMO with pie chart

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;

如何在javascript中动态地向数组中添加项目

5 个答案: