解析Highcharts的JSON數據

我一直在這裏圈了幾個小時，並用盡了所有類似的stackoverflow線程和highcharts文檔，所以希望有人可以提供幫助。解析Highcharts的JSON數據

我想繪製一個性別分裂的餅圖。我曾與折線圖合作過，因此不得不在X和Y軸的格式我的數據，像這樣：

[{"y":"Mr","x":"145"},{"y":"Miss","x":"43"},{"y":"Mrs","x":"18"},{"y":"Ms","x":"2"}]

這總算有了一些進展，我可以挖掘到JSON和拉出整數，但我想不出我的生活得到與數字有關的標題...

function genderData() { 
$.getJSON('/statsboard/gender', function(data_g) { 
    $.each(data_g, function(key_g, val_g) { 
     obj_g = val_g; 
     genderChart.series[0].addPoint(parseInt(obj_g.x)); 

     //genderChart.xAxis[0].categories.push(obj_g.y); 
    }); 
}); 
}

我然後只調用的函數genderData如下：

genderChart = new Highcharts.Chart({ 
     chart: { 
      renderTo: 'gender', 
      events: { 
       load: genderData 
      } 
     } 
     title: { 
      text: 'Gender Split' 
     }, 
     plotOptions: { 
      pie: { 
       allowPointSelect: true, 
       cursor: 'pointer', 
       dataLabels: { 
        enabled: false 
       }, 
       showInLegend: true 
      }, 
     }, 
     series: [{ 
      type: 'pie', 
      name: 'Gender Split', 
      data: [] 
     }] 
    });

所以我結束了一個精確的圖表，但用好標籤，而他們只會默認爲「片」 ......

如此接近，但沒有雪茄;-)

SOOOO我改變了我的服務器端代碼返回下面的格式按照文檔： - ），現在返回以下：

[{"Mr":"145"},{"Miss":"43"},{"Mrs":"18"},{"Ms":"2"}]

這看起來對我相當多地方，但很可惜，當我試圖適應這種在js代碼，一切都分崩離析。

我一直在尋找這樣的： Write JSON parser to format data for pie chart (HighCharts)

，但不能在這裏得到應用，以適應我的情況的做法..誰能幫助？

來源

2012-10-16 Opentuned

您可以進行如下設置你的觀點：

genderChart.series[0].addPoint({ 

     name: key_g, 
     y: val_g 

    });

來源

2012-10-16 19:20:07

是此使用JSON在以後的形式？ [{「Mr」：「145」}，... 如果是這樣，那裏有名稱：和y：來自哪裏？因爲它似乎沒有工作... – Opentuned

是的。將此代碼放入'genderData'函數中，將原始調用替換爲'addPoint'。 'name'和'y'是在傳遞給'addPoint'的點對象上設置的屬性。這裏表示爲一個字面json對象。 –

好吧，我到了那裏，在你們倆的幫助下，最後我需要指定和類型化整數... function genderData（）{ $ .getJSON（'/ statsboard/gender'，function （data_g）{$ 。每個（data_g，函數（key_g，val_g）{ obj_g = val_g; genderChart.series [0] .addPoint（{ 名：obj_g.name， Y：parseInt函數（obj_g.y） }）; console.log（obj_g.y） }）; }）; } 有一點控制檯日誌記錄我能夠到達那裏！非常感謝！ – Opentuned

的形式：

[{"name": "Mr", "y": 145}, ...]

或

[["Mr", 145], ...]

會工作。注意第二種形式是陣列的數組不是對象的數組（您已經關閉）。

請參閱basic-pie demo（單擊查看選項並向下滾動到數據），series.data docs和series.addPoint docs瞭解更多信息。

如果使服務器側的上述兩種形式之一返回數據，你可以這樣做：

function genderData() { 
    $.getJSON('/statsboard/gender', function(data_g) { 
    genderChart.series[0].setData(data_g, true); 
    }); 
}

來源

2012-10-16 19:33:41 Chad

您好，乍得，感謝這個，它取得了一些進展，json的形式如下： [{「name」：「Mr」，「y」：「145」}，{「name」：「Miss」，「y」：「43」}，{「name」：「Mrs」，「y」：「18」}，{「name」：「Ms」，「y」：「2」}] 我越來越錯誤：未捕獲Highcharts錯誤＃14：www.highcharts.com/errors/14 香港專業教育學院不得不通過您推薦的文檔看看，但因爲它總是referes靜態數據Im不知道在哪裏我去錯了，但生病繼續尋找... – Opentuned

這是因爲你的價值觀需要數字而不是字符串。它需要是'[{「y」：43}，...]'不''[{「y」：「43」}，...]' – Chad

對，我知道了，最後我做了在js方面類型化的事情，因爲它不容易在後端得到，在你的幫助和@Greg之間我做到了。 – Opentuned

通過重新安排我的Json有「名」和「y」的鍵，我是能取得進展，即：

[{"name":"Mr","y":"145"},{"name":"Miss","y":"43"},{"name":"Mrs","y":"18"},{"name":"Ms","y":"2"}]

然後通過JSON數據循環和解析了JS的「Y」值與函數parseInt函數（一INT）我能得到我想要的結果...

function genderData() { 
$.getJSON('/statsboard/gender', function(data_g) { 
$.each(data_g, function(key_g, val_g) { 
    obj_g = val_g; 
    genderChart.series[0].addPoint({ 
     name: obj_g.name, 
     y: parseInt(obj_g.y) 
}); 
console.log(obj_g.y) 
}); 
}); 
}

來源

2012-10-17 12:35:56 Opentuned

如果theres更漂亮的方式來做到這一點im所有的耳朵，但它現在在運行最少;-) – Opentuned

效率更高的做法是將值設爲服務器端，因此您不必重複對象兩次。但是對於這樣的小對象，這並不是什麼大不了的事情。 – Chad

正式指出，感謝您對此乍得的幫助，非常感謝！ – Opentuned

我知道這個問題已經解決了。但是在這些情況下，數組的映射函數可能是一個不錯的選擇，我喜歡函數式語言的地圖！

data = [{"y":"Mr","x":"145"},{"y":"Miss","x":"43"}, 
     {"y":"Mrs","x":"18"},{"y":"Ms","x":"2"}]; 

var series = data.map(function(e){ return parseInt(e.x); });

.... HIGHT圖表....

來源

2013-04-16 00:24:11 zhenjie

解析Highcharts的JSON數據

回答

相關問題