Comment ajouter des éléments à un tableau dynamiquement en javascript

Tout d'abord, je suis un débutant javascript total, alors, veuillez supporter avec moi. J'ai le script suivant pour dessiner des diagrammes circulaires en utilisant le cadre 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) }); });​ 

Ce que j'essaie de faire, c'est de charger dynamiquement les valeurs dans le tableau series.data comme un ensemble d'objets. Qu'est-ce qui ne fonctionne pas ici, et existe-t-il une meilleure façon de charger les données dans le tableau de données?

  • Diagrammes dynamiques avec données json
  • Comment transmettre les données de json à la série Highcharts?
  • Highcharts - problème concernant la largeur du graphique complet
  • Grouping Legends in Highcharts
  • Highcharts => Obtenir l'id d'un point en cliquant sur un tableau de lignes
  • Highstock highcharts les données irrégulières se trompe x-scale
  • Comment obtenir le paramètre url dans le nœud rapide js
  • Ouvrez iframe manuellement dans nyroModal?
  • JQuery a différé: annuler la progression
  • Array.map ne semble pas fonctionner sur des tableaux non initialisés
  • Supprimez les étiquettes de mise en forme de la chaîne de courrier électronique
  • Comment puis-je effectuer une requête dans Mongoose?
  • 5 Solutions collect form web for “Comment ajouter des éléments à un tableau dynamiquement en javascript”

    La propriété série est un tableau, donc vous devriez l'écrire comme ceci (pour ajouter un point de données unique à la série):

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

    Je regardais ce JS Fiddle .

    Vous avez une erreur sur votre code:
    Vous avez dit que vous souhaitez charger dynamiquement les valeurs, rigth?
    Mais vous codez simplement définir les données de la série initiale et ensuite la rendre.
    Donc, dans votre cas, si vous souhaitez modifier «dynamiquement» vos données de série, vous devez détruire le graphique actuel, mettre à jour les données et les redéfinir. Propably vous perte de performance .

    La façon correcte de le faire est d'utiliser les api highstock et ne le mettez pas à jour manuellement. Si vous le faites probablement, vous obtiendrez des erreurs lorsque vous utilisez le zoom du graphique, car pour mettre à jour les points du graphique, cet api doit calculer les points à nouveau, et il est fait lorsque vous utilisez les fonctions ci-dessus.
    Comme vous pouvez le voir sur la référence de la série pour mettre à jour les données de votre graphique, vous devez utiliser les fonctions suivantes:
    Définir de nouvelles données: chart.series[0].setData(newData, redraw); Exemple
    Ajouter un nouveau point: chart.series[0].addPoint(arrayOfPoints, redraw); Exemple

    Regardez cette violon , ici je met à jour manuellement la série de graphiques, sans utiliser les fonctions api, et ce qui se passe? Rien.

    Pour la meilleure performance, vous pouvez utiliser le code suivant:

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

    Je pense que cela vous aidera JavaScript push () Spécification de la méthode

    Et la spécification de contrôle de Highcharts

    La série est un ensemble d'objets, donc vous devriez faire comme ceci:

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

    Dans ce cas, vous obtiendrez

     series: [{ type: 'pie', name: 'service status', data: [ ["Service Ok", 45.0 ] ] }] 

    DEMO avec diagramme circulaire

    Essaye ça

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

    essayer

     options.series[0]data[0]= 'Service Ok'; options.series[0]data[1]= 45.0; 
    JavaScript rend le site Web intelligent, beauté et facile à utiliser.