how to add items to an array dynamically in javascript

问题

First of all I am a total javascript newbie so please bear with me. I have the following script to draw pie charts using the Highchart framework

$(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)
    });

});

What i am trying to do is to dynamically load the values into series.data array as an array of objects. What am doing wrong here, and is there a better way to load the data into the data array?

回答1:

The series property is an array, so you would need to write it like this (to add a single data point to the series):

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

I was looking at this JS Fiddle.

回答2:

You have an error on your code:
You said you want to dynamically load the values, rigth ?
But you code just sets the initial serie data and then render it.
So in your case if you want to 'dinamically' change your serie data you have to destroy the current chart, update it's data and then render it again. Propably you loss performance.

The correct way to do it is using highstock api and don't update it manually. If you do it probably you'll get some errors when you use chart zoom, because to update the chart points this api have to calculate the points again, and it's made when you use the functions above.
As you can see on the serie reference to update your chart data you have to use the following functions:
Set new data: chart.series[0].setData(newData, redraw); example
Add a new point: chart.series[0].addPoint(arrayOfPoints, redraw); example

Look this fiddle, here I update the chart serie manually, without use api functions, and what happens ? Nothing.

For the best performance you can use the following code:

    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();
    });
});

回答3:

I think it might helps you JavaScript push() Method specification

and Highcharts control specification

Series is an array of objects so you should do like this:

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

In this case you will get

series: [{

    type: 'pie',

    name: 'service status',

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

    }]

DEMO with pie chart

回答4:

Try this

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

回答5:

try

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

来源：https://stackoverflow.com/questions/10632180/how-to-add-items-to-an-array-dynamically-in-javascript

标签

javascript

jquery

Highcharts