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

Question

我在HighCharts上花了幾個小時來格式化數據輸入到series選項。 最后我看到這里的鏈接解決了我的數據格式化和輸入問題。

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的新手，所以如果我的一些問題描述沒有意義，請隨時指出。謝謝！

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

Answer 1

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

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

演示： http ： //jsfiddle.net/qpsSe/1

請注意，示例JSON中的尾隨逗號需要刪除才能驗證JSON

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

$ .map API文檔

原生javascript中的替代方法

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

Answer 2

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

Answer 3

您需要在分配HighCharts預處理中所述的選項時創建解析器。基本上，您解析數據並將其包含在選項中：

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

這是一個使用Fiddle中的$ .map和選項的工作示例

Answer 4

從Highcharts 3.0開始，也可以通過為每個點指定名稱並將軸類型設置為“類別”來提取類別。

對於柱狀條形圖，這將是：

    xAxis: {
        type: 'category',
    },

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

Answer 5

您可以直接將圖表與JSON數據綁定。 您只需將json屬性名稱設置為高圖標准。 'Y'表示價值，'name'表示標簽。

您的JSON應如下所示：

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