2

为了格式化选项的数据输入，我与 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 格式了。

我只是想知道我有必要为 to 的数据编写解析器format 2吗format 1？或者我是否缺少 HighCharts 可以识别 JSON 格式数据并且我实际上不需要编写解析器的东西？

我是 HighCharts 的新手，所以如果我的一些问题描述没有意义，请随时指出。谢谢！

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

4

5 回答 5

6

当脚本需要特定格式的数据时，您通常必须将数据映射到适合格式。这可以在服务器代码中修改或使用 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'] ])
}
于 2012-06-28T20:53:05.663 回答
1

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-28T20:36:23.913 回答
1

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

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

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

于 2012-06-28T21:25:01.350 回答
1

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

对于柱形图，这将是：

    xAxis: {
        type: 'category',
    },

    series: [{
        data: [{
            name: 'Point 1',
            color: '#00FF00',
            y: 1
        }, {
            name: 'Point 2',
            color: '#FF00FF',
            y: 5
        }]
    }]
于 2013-05-10T15:05:13.963 回答
0

您可以直接将图表与 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-20T09:32:28.783 回答