編寫JSON解析器來爲餅圖格式化數據（HighCharts）

爲了格式化輸入到series選項的數據，我與HighCharts打了幾個小時。最後我看到鏈接here解決了我的數據格式化和輸入問題。編寫JSON解析器來爲餅圖格式化數據（HighCharts）

將由HighCharts餅圖被識別的數據格式是這樣(format 1)作爲由鏈路上面所指出的：

[["chrome",15],["firefox",20]]

事實上，我想從外部URL 動態數據輸入和格式化數據，使得HighCharts可以識別它。我從URL得到的數據格式是這樣的(format 2)：

[ 
    { 
     "status": "Stopped \/ Idle", 
     "val": 17.469444444444, 
    }, { 
     "status": "Working", 
     "val": 0, 
    }, { 
     "status": "Headland Turning", 
     "val": 0, 
    }, { 
     "status": "Transport", 
     "val": 0.15333333333333, 
    } 
]

這已經是JSON格式。

我只是想知道，這是我需要編寫一個解析器的數據從format 2到format 1？還是我錯過HighCharts可以識別JSON格式數據的東西，而我實際上並不需要編寫解析器？

我是HighCharts的新手，所以請隨時指出，如果我的一些問題描述沒有意義..謝謝！

編輯：謝謝所有人回答我的問題！

來源

2012-06-28 sozhen

請記住，您發佈的文字不是有效的JSON。請參閱https://json.org – ChaosPandion

感謝提醒 – sozhen

當腳本需要特定格式的數據時，您通常必須將數據映射到適合的格式。這可以在服務器代碼中修改或使用javascript

可以使用jQuery $.map重新配置對象或數組到另一個數組。

DEMO：http://jsfiddle.net/qpsSe/1

。注意，在樣品JSON尾隨逗號需要移除來驗證JSON在本地JavaScript

/* "json" is your response object, modify variable names to match */ 
var chartData=$.map(json, function(obj,i){ 
     return [[ obj.status, obj.val]];        
})

$.map API Docs

替代方法

var chartData=[]; 
for(i=0; i<json.length; i++){ 
    chartData.push([ json[i]['status'], json[i]['val'] ]) 
}

來源

2012-06-28 20:53:05 charlietfl

謝謝，一個非常完整和深思熟慮的答案！ – sozhen

AFAIK這就是Highcharts想要它的數據。話雖這麼說，解析器是很容易的：

var data; // this is your received data 
var highchartsData = []; // this is data for highcharts 

$.each(data, function(i, e) { 
    highchartsData.push([e.status, e.val]); 
});

有一點需要注意的是，如果您收到的數據是文本（比如，從一個AJAX調用的響應），那麼你需要將其轉換爲一個JavaScript對象，如下所示：

var data = $.parseJSON(textData);

來源

2012-06-28 20:36:23

你需要做一個解析器stated in HighCharts preprocessing 基本上分配方案時，您解析數據，包括它的選項：

var serie1 = json.map(function(e) { 
    return [e.status, e.val]; 
}); 
options.series.push({data: serie1});

Here is a working example using $.map and options in Fiddle

來源

2012-06-28 21:25:01 pdjota

由於Highcharts 3.0，類別也可以通過提取爲每個點指定一個名稱並將軸類型設置爲「類別」。

對於柱條形圖這將是：

xAxis: { 
     type: 'category', 
    }, 

    series: [{ 
     data: [{ 
      name: 'Point 1', 
      color: '#00FF00', 
      y: 1 
     }, { 
      name: 'Point 2', 
      color: '#FF00FF', 
      y: 5 
     }] 
    }]

來源

2013-05-10 15:05:13

正是我的意思，謝謝。 – offset

可以綁定圖表與JSON數據，直接。你只需要將json屬性名稱設置爲highchart標準。 'Y'表示標籤的值，'name'表示標籤。

你的JSON應該像如下：

[ 
    { 
     name: "Stopped \/ Idle", 
     y: 17.469444444444 
    }, { 
     name: "Working", 
     y: 0 
    }, { 
     name: "Headland Turning", 
     y: 0 
    }, { 
     name: "Transport", 
     y: 0.15333333333333 
    } 
]

來源

2014-01-20 09:32:28 zerg

編寫JSON解析器來爲餅圖格式化數據（HighCharts）

回答

相關問題