Как добавить элементы в массив динамически в 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

серии свойство является массивом, так что вам нужно будет написать это (добавить одну точку данных в серии):

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

Я был глядя на this JS Fiddle.

Answer 2

Я думаю, что это, возможно, поможет вам 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 3

Попробуйте

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

Answer 4

попробовать

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

Answer 5

У вас ошибка в коде:
Вы сказали, что вы хотите, чтобы динамически загружать значения, Rigth?
Но вы кодируете только заданные начальные данные, а затем визуализируете их.
Так что в вашем случае, если вы хотите «динамически» изменить свои серийные данные, вам нужно уничтожить текущий график, обновить его данные и затем снова отобразить его. Удовлетворительно вы проигрываете.

правильный способ сделать это использует 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(); 
    }); 
});​