圖表使用具有多個系列Highcharts從JSON

Question

，我有以下格式的JSON文件：

[ 

    { name: 'Pay Off', 
    data: [ [2850,0], 
      [3135,0], 
      [3420,0], 
      [3705,0], 
      [3990,0], 
      [4275,0], 
      [4560,0], 
      [4845,0], 
      [5130,0], 
      [5415,0], 
      [5700,0], 
      [5985,285], 
      [6270,570], 
      [6555,855], 
      [6840,1140], 
      [7125,1425], 
      [7410,1710], 
      [7695,1995], 
      [7980,2280], 
      [8265,2565], 
      [8550,2850] 
     ] 
}, 

{ 
    name: 'Profit', 
    data: [ [2850,-250],  
      [3135,-250], 
      [3420,-250], 
      [3705,-250], 
      [3990,-250], 
      [4275,-250], 
      [4560,-250], 
      [4845,-250], 
      [5130,-250], 
      [5415,-250], 
      [5700,-250], 
      [5985,35], 
      [6270,320], 
      [6555,605], 
      [6840,890], 
      [7125,1175], 
      [7410,1460], 
      [7695,1745], 
      [7980,2030], 
      [8265,2315], 
      [8550,2600] 
     ] 
    } 
] 

我要繪製圖表爲「還清」和「利潤」在一起。根據要求，更多的圖可能會添加到列表中。數據數組的x軸爲第0個元素，y軸爲第1個元素。 什麼我目前做的是以下 -

$(document).ready(function() { 
    var options = { 
     chart: { 
      renderTo: 'container', 
      type: 'line' 
      }, 
    title: { 
     text: 'PayOff Curve' 
    }, 
    legend: { 
      layout: 'vertical', 
      align: 'right', 
      verticalAlign: 'middle', 
      borderWidth: 0 
    }, 
    series: [] 
}; 
$.getJSON('data.json', function(list) { 
    var newseries = { 
     name: '', 
     data: [] 
    }; 

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

      // Create the chart 
    var chart = new Highcharts.Chart(options); 
    }); 

但我沒有任何曲線可言。由於我對JavaScript和Python都是新手，所以我無法弄清楚它的問題。請建議一個有效的方法來做到這一點。 感謝您的幫助..

Answer 1

你的JSON是不正確的，嘗試驗證它。屬性名稱shold有雙引號，從：name: 'Pay Off'更改爲："name": "Pay Off"

Answer 2

您的JSON是有效的highcharts系列 - 你不必試圖在所有改造它：

$(document).ready(function() { 
    var options = { 
     chart: { 
      renderTo: 'container', 
      type: 'line' 
     }, 
     title: { 
      text: 'PayOff Curve' 
     }, 
     legend: { 
      layout: 'vertical', 
      align: 'right', 
      verticalAlign: 'middle', 
      borderWidth: 0 
     }, 
     series: [] 
    }; 
    $.getJSON('data.json', function(list) { 
     options.series = list; // <- just assign the data to the series property. 
     var chart = new Highcharts.Chart(options); 
    }); 
}); 

如果仍然不起作用，打開控制檯查看是否存在JavaScript錯誤。

這是fiddle。