[英]Create dynamic Highcharts graphs with json data
我有带有数据的json
输出:
[{"hour":"6","value1":"10","value2":"5","value3":"0","value4":45},{"hour":"7","value1":"0","value2":"10","value3":"0","value4":50}]
我需要使用highchart
引擎生成图表 这是highchart
代码片段,但我不明白如何将数据传递到“系列”和“类别”中:
xAxis: {
categories: [
'Jan',
'Feb',
'Mar', <------------------------here need to be a hours
'Apr',
'May',
'Jun',
'Jul',
'Aug',
'Sep',
'Oct',
'Nov',
'Dec'
],
crosshair: true
},
series: [{
name: 'value1',
data: [49.9, 71.5] <----------------values 1
}, {
name: 'value2',
data: [83.6, 78.8] <----------------values 2
}, {
name: 'value3',
data: [48.9, 38.8]
},
{
name: 'value4',
data: [42.4, 33.2]
} ]
});
https://jsfiddle.net/rb8ege93/1/
var json = [{"hour":"6","value1":"10","value2":"5","value3":"0","value4":45},{"hour":"7","value1":"0","value2":"10","value3":"0","value4":50}];
var categories = [], data1 = [], data2 = [], data3 = [], data4 = [];
for(var i in json){
var hour = (parseInt(json[i].hour));
categories.push(hour );
data1.push(parseInt(json[i].value1));
data2.push(parseInt(json[i].value2));
data3.push(parseInt(json[i].value3));
data4.push(parseInt(json[i].value4));
}
Highcharts.chart('container', {
chart: {
type: 'column'
},
xAxis: {
categories: categories ,
crosshair: true
},
yAxis: {
min: 0,
title: {
text: 'Total fruit consumption'
},
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
}
}
},
legend: {
align: 'right',
x: -30,
verticalAlign: 'top',
y: 25,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
borderColor: '#CCC',
borderWidth: 1,
shadow: false
},
tooltip: {
headerFormat: '<b>{point.x}</b><br/>',
pointFormat: '{series.name}: {point.y}<br/>Total: {point.stackTotal}'
},
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: true,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
}
}
},
series: [{
name: 'value1',
data: data1
}, {
name: 'value2',
data: data2
}, {
name: 'value3',
data: data3
},
{
name: 'value4',
data: data4
}]
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.