Highcharts mit mehreren Serien von JSON Dynamisch

Question

Ich mache ein Balkendiagramm von HighCharts aus JSON-Daten, die der Benutzer generiert. Die JSON wird wie folgt formatiert:

[{"name":"project1","data":[50291,7410,2013,2013,524,201]},{"name":"project2","data":[1776995,758630,25633,4120054,24521,2045]}] 

Da der Benutzer die Projekte wählt, könnte dies JSON-Daten auch von 5 Projekte sein! Ich muss in der Lage sein, dynamisch in meine Highcharts zu laden. Dies ist der Code, den ich jetzt habe.

$(function() { 

    var options = { 
     chart: { 
      renderTo: 'container', 
      type: 'column', 
      options3d: { 
       enabled: true, 
       alpha: 0, 
       beta: 0, 
       depth: 0, 
       viewDistance: 25 
      } 
     }, 
     title: { 
      text: 'Data' 
     }, 
     subtitle: { 
      text: 'Dataset' 
     }, 
     plotOptions: { 
      column: { 
       depth: 0 
      } 
     }, 
     series: [], 
     xAxis: { 
      categories: ['XA', 'XB', 'XC', 'XD', 'XE', 'XF'] 
     }, 

     credits: { 
      enabled: false 
     } 
    }; 
    $.getJSON('/uploads/test.json', function (list) { 
     var newseries = { 
      name: '', 
      data: [] 
     }; 

     $.each(list, function (i, item) { 
      newseries.name = item.name; 
      newseries.data = item.data; 
      options.series.push(newseries); 
     }); 
     var chart = new Highcharts.Chart(options); 


     function showValues() { 
      $('#alpha-value').html(chart.options.chart.options3d.alpha); 
      $('#beta-value').html(chart.options.chart.options3d.beta); 
      $('#depth-value').html(chart.options.chart.options3d.depth); 
     } 

     // Activate the sliders 
     $('#sliders input').on('input change', function() { 
      chart.options.chart.options3d[this.id] = this.value; 
      showValues(); 
      chart.redraw(false); 
     }); 

     showValues(); 
    }); 
}); 

Dies funktioniert, wenn ich nur ein Projekt in meinem Diagramm, aber wenn es mehr das Diagramm überschreibt sich in gewisser Weise sind und zeigt nur das letzte Projekt in der JSON. Könnte mir bitte jemand bei diesem Problem helfen?

Answer 1

Sie sind die name und data Knoten Ihres newseries Objekt überschrieben wird jedes Mal, wenn Schleife, die sie außerhalb der Schleife auf diese Weise zu erklären.

Ich würde diese drehen:

$.getJSON('/uploads/test.json', function (list) { 
    var newseries = { 
     name: '', 
     data: [] 
    }; 

    $.each(list, function (i, item) { 
     newseries.name = item.name; 
     newseries.data = item.data; 
     options.series.push(newseries); 
    }); 
    var chart = new Highcharts.Chart(options); 

in etwas wie folgt aus:

$.getJSON('/uploads/test.json', function (list) { 
    var newseries; 

    $.each(list, function (i, item) { 
     newseries = {}; 
     newseries.name = item.name; 
     newseries.data = item.data; 
     options.series.push(newseries); 
    }); 
    var chart = new Highcharts.Chart(options); 

Obwohl wirklich, in Ihrem Fall, brauchen Sie gar nicht zu Schleife, weil Ihre Rückkehr JSON ist bereits im richtigen Format für Highcharts.

Sie können so etwas wie

$.getJSON('/uploads/test.json', function (list) { 
    options.series = list; 
    var chart = new Highcharts.Chart(options); 

Stattdessen versuchen (nicht getestet, könnte gezwickt müssen).

Answer 2

Bitte versuchen Sie dies:

$.each(list, function (i, item) { 
    if(item.name!=undefined){ 
     options.series.push({ 
      name:item.name, 
      data:item.data 
     }); 
    } 
});