[英]Loading JSON into a Highcharts pie chart
我認為我可能有一個簡單的問題。 這很棒..
$(document).ready(function() { // Original data var data = [{ "name": "Tokyo", "y": 3.0 }, { "name": "NewYork", "y": 2.0 }, { "name": "Berlin", "y": 3.5 }, { "name": "London", "y": 1.5 }]; var chart = new Highcharts.Chart({ chart: { renderTo: 'container', type: 'pie' }, series: [{ data: data }] }); });
我想修改代碼以使用getJSON加載,並且JSON的格式正確。 所以我做到了...
$(document).ready(function() { $.getJSON("etstats?rtype=bestpgs_ec&month=2016-06-01&no_requested=10", function(json){ var data = json var chart = new Highcharts.Chart({ chart: { renderTo: 'container', type: 'pie' }, series: [{ data: data }] }); }); });
我在Firebug中檢查了JSON,並使用“名稱”和“ y”正確格式化了JSON
[{"name": "14704", "y": "0.17"}, {"name": "14706", "y": "0.20"}, {"name": "21304", "y": "0.25"}, {"name" : "23201", "y": "0.39"}, {"name": "23501", "y": "0.42"}, {"name": "17102", "y": "0.46"}, {"name": "15001" , "y": "0.48"}, {"name": "23002", "y": "0.50"}, {"name": "13201", "y": "0.50"}, {"name": "17401", "y" : "0.52"}]
有人對我的圖表為什么不顯示有任何指示嗎?
注意:已編輯以添加答案。 引用的值就是問題。 通過遍歷它們並評估其值來刪除它們。
$.getJSON("etstats?rtype=bestpgs_ec&month=2016-06-01&no_requested=10", function(json){ data = json $.each(data, function (i, point) { point.y = eval(point.y); }); var chart = new Highcharts.Chart({
您能檢查一下您對getJSON
的響應是json字符串嗎? 如果是,請執行以下操作:
var data = JSON.parse(json);
我使用上面給出的數據。 我認為highchart只是不接受y
string
類型
這是演示
有效的JSON格式應為
[
{"name":"14704","y":0.17},
{"name":"14706","y":0.2},
{"name":"21304","y":0.25},
{"name":"23201","y":0.39},
{"name":"23501","y":0.42},
{"name":"17102","y":0.46},
{"name":"15001","y":0.48},
{"name":"23002","y":0.5},
{"name":"13201","y":0.5},
{"name":"17401","y":0.52}
]
在完成getJSON
之后,請記住首先執行JSON.parse
以獲取正確的對象,然后最終可以將其傳遞到highchart
這是我使用jQuery從MySQL更新餅圖上的數據的解決方案
首先,在PHP中:創建一個具有值/名稱對的數組數組,並確保返回“ json_encode” d數據:
... [code] ...
while($aRow = mysqli_fetch_assoc($oRes)){
$aData[] = array("y" => $aRow['number'], "name" => $aRow['string']);
}
exit(json_encode($aData));
其次,創建圖表:
oGraph = new Highcharts.chart({
chart: {
renderTo: 'graphid',
... [code] ...
plotOptions: {
pie: {
... [code] ...
series: [{
name: 'MyName',
data: []
... [code] ...
});
第三,構建jQuery代碼以檢索數據:
$.ajax({
type : 'post',
url : '/path/to/the/above/php/data-script.php',
dataType : 'json'
}).done(function( oJson ) {
var oObj = [];
$.each(oJson, function(ix,sliceData) {
oObj.push({
name: sliceData.name,
y: eval(sliceData.y)
});
});
oGraph.series[0].setData(oObj, true);
});
我花了整整一天的時間意識到我必須(1)重新打包數據,並且(2)將eval()用作值參數y!
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.