编写 JSON 解析器以格式化饼图的数据（HighCharts）答案

【问题标题】：Write JSON parser to format data for pie chart (HighCharts)编写 JSON 解析器以格式化饼图的数据（HighCharts）
【发布时间】：2012-06-30 10:22:50
【问题描述】：

为了将数据输入格式化为series 选项，我与 HighCharts 争论了好几个小时。最后我看到链接here解决了我的数据格式化和输入问题。

HighCharts 饼图可以识别的数据格式是这样的(format 1)，如上面的链接所示：

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

我实际上想要从外部 URL 输入动态数据并格式化数据以便 HighCharts 可以识别它。我从网址得到的数据格式是这样的(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 的新手，如果我的一些问题描述没有意义，请随时指出。谢谢！

编辑：感谢所有回答我问题的人！

【问题讨论】：

请记住，您发布的文本不是有效的 JSON。见json.org

标签： javascript jquery json parsing highcharts

【解决方案1】：

您可以直接将图表与 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
    }
]

【讨论】：

【解决方案2】：

从 Highcharts 3.0 开始，还可以通过为每个点命名并将轴类型设置为“类别”来提取类别。

对于柱状图，这将是：

    xAxis: {
        type: 'category',
    },

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

【讨论】：

【解决方案3】：

将选项分配为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

【讨论】：

【解决方案4】：

当脚本需要特定格式的数据时，您通常必须将数据映射到适合格式。这可以在服务器代码中修改或使用 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 Docs

原生 javascript 中的替代方法

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

【讨论】：

谢谢，非常完整和周到的回答！

【解决方案5】：

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

【讨论】：