编写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 2
到format 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 } ]