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

Write JSON parser to format data for pie chart (HighCharts)

本文关键字：HighCharts 数据 格式化 JSON 编写      更新时间：2023-09-26

我与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的新手，所以如果我的一些问题描述没有意义，请随时指出。谢谢！

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

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

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

在分配选项时，您需要创建一个解析器，如HighCharts预处理中所述基本上，您解析数据并将其包含在选项中：

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

这是一个在 Fiddle 中使用 $.map 和选项的工作示例

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

对于柱形图，这将是：

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

您可以直接将图表与 JSON 数据绑定。您只需要将 json 属性名称设置为 highchart 标准。"Y"表示值，"名称"表示标签。

您的 JSON 应如下所示：

[
    {
        name: "Stopped '/ Idle",
        y: 17.469444444444
    }, {
        name: "Working",
        y: 0
    }, {
        name: "Headland Turning",
        y: 0
    }, {
        name: "Transport",
        y: 0.15333333333333
    }
]
相关文章：