Javascript Highcharts:解析多变量JSON数据
我正在尝试制作一个类似于本演示中的highcharts图表:使用json数据,但我看不出如何合理地解析json数据。我的数据按周和日分组,分为三类。以下是一个例子:Javascript Highcharts:解析多变量JSON数据,javascript,json,highcharts,Javascript,Json,Highcharts,我正在尝试制作一个类似于本演示中的highcharts图表:使用json数据,但我看不出如何合理地解析json数据。我的数据按周和日分组,分为三类。以下是一个例子: { "Monday": { "inv": 1126, "oppm": 276, "perc": "24.51" }, "Tuesday": { "inv": 1072, "oppm": 273, "perc": "25.47" }, "Wednesday": { "inv": 1032, "oppm": 271, "perc": "
{ "Monday": { "inv": 1126, "oppm": 276, "perc": "24.51" }, "Tuesday": { "inv": 1072, "oppm": 273, "perc": "25.47" }, "Wednesday": { "inv": 1032, "oppm": 271, "perc": "26.26" }, "Thursday": { "inv": 989, "oppm": 259, "perc": "26.19" }, "Friday": { "inv": 937, "oppm": 240, "perc": "25.61" } }
有没有一种简单的方法可以做到这一点?如果我更改json数据结构会有帮助吗
提前谢谢
编辑:解决方案:
我找到了一种不太复杂的方法,尽管我相信如果你知道你的JS,它会变得更容易。无论如何,此解决方案都可以很好地处理我的JSON数据:
//Convert received AJAX data
success: function(data)
{
cleanData = $.parseJSON(data);
//Make some empty arrays for the categories and data
days = Array();
inv = Array();
oppm = Array();
perc = Array();
//Iterate the data and fill in the new arrays
$.each(cleanData, function(index, value) {
days.push(index);
inv.push(parseFloat(value['inv']));
oppm.push(parseFloat(value['oppm']));
perc.push(parseFloat(value['perc']));
});
//Use the new arrays in the chart
chart1 = new Highcharts.Chart({
chart: {
renderTo: 'div_chart',
type: 'column'
},
xAxis:{
categories: days,
title: {
text: 'Week day'
}
},
series: [{
name: 'Invited',
data: inv
}, {
name: 'Met',
data: oppm
}, {
name: '%',
data: perc
}],
});
您可以在JSFIDLE中编辑该示例: 在研究了如何格式化以及如何将数据添加到脚本中之后,似乎可以使用几个for循环,但我认为您需要稍微更改JSON格式 以下是我的做法(psueodocode): 然后在highcharts调用中设置“categories”选项,通过该选项循环并获取所有日期:
var myCategories;
var idx=0;
for (var key in json) {
myCategories[idx]=json[key]['day'];
idx++;
}
然后在highcharts配置中:
xAxis: {
categories: myCategories
},
然后你所需要做的就是在highchars‘series’调用中再次设置数据点,这将有点复杂,但想法相同
希望这有帮助谢谢,这与我发现的相似没有问题,很高兴我能帮上忙。请将您自己的答案发布为答案并接受,或者将我的答案标记为已接受(如果答案足够好),因此问题标记为已回答:)
xAxis: {
categories: myCategories
},