Question

我正在与HighCharts斗争很长时间，以便将数据输入格式化为series选项。最后我看到链接here解决了我的数据格式化和输入问题。

HighCharts饼图可识别的数据格式与此(format 1)类似，如上面的链接所示：

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

我实际上希望从外部网址输入动态数据并格式化数据，以便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的新手，所以如果我的一些问题描述没有意义，请随时指出。谢谢！

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

Answer 1

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

可以使用jQuery $.map将对象或数组重新配置为另一个数组。

DEMO：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'] ])
}

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

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

Answer 4

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

对于柱状条形图，这将是：

    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
    }
]

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

5 个答案: