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

我在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 2format 1的数据编写解析器是必要的吗? 或者我错过了HighCharts可以识别JSON格式数据的东西,我实际上不需要编写解析器?

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

编辑 :感谢所有人回答我的问题!

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

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

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

请注意,示例JSON中的尾随逗号需要删除才能validationJSON

 /* "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 

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属性名称设置为高图标准。 ‘Y’表示价值,’name’表示标签。

您的JSON应如下所示:

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