JSONの複数のシリーズによるハイチャート動的に

Question

私はユーザーが生成するJSONデータからHighChartsから棒グラフを作成しています。 JSONは次のようにフォーマットされます。ユーザーは、プロジェクトを選択し

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

ので、このJSONデータも5つのプロジェクトのかもしれません！私は自分のハイチャートに直列に動的にロードできる必要があります。これは私が今持っているコードです。

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

私は唯一の私のチャートで一つのプロジェクトを持っているとき、これは動作しますが、より多くがある場合、チャート自体がいくつかの方法が上書きされ、唯一のJSONの最後のプロジェクトを示しています。誰かがこの問題で私を助けてくれますか？

Answer 1

。

私はこのターンになります。本当に、あなたのケースでは、あなたがすべてでループする必要はありませんが、あなたのリターンJSONので、

$.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); 

を：もっとこのようなものに

$.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); 

をハイチャートのための適切なフォーマットになっています。

あなたは（未テスト、微調整が必​​要になる場合があります）の代わりに

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

ような何かを試すことができます。

Answer 2

これを試してください：あなたはその方法では、ループの外でそれらを宣言することによって、あなたのnewseriesオブジェクトのループをするたびにnameとdataノードを上書きする

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