引入Highcharts核心文件
<script src="${pageContext.request.contextPath}/js/highchart/highcharts.js"></script>
js
chart = new Highcharts.Chart({
chart: {
renderTo: 'funChar',
type: 'column'
},
title: {
text: '用户日用电 kWh Top10'
},
xAxis: {
formatter:function(){//格式化标签名称
return this.value;
}
},
yAxis: {
categories: ['1%', '2%', '3%', '4%', '5%'],
title: {
text: '单位 (kwh)',
align: 'high'
}
},
tooltip: {
valueSuffix: ' kwh'
},
plotOptions: {
column: {
stacking: 'normal'
}
},
series:[{//数据列
type:'column',
text:'监测点名称'
}],
});
});
//异步请求数据
$.ajax({
type:"POST",
url:'${pageContext.request.contextPath}/analysis/dayFreeze/getDayFreeze.do',
dataType : "json",
success:function(data){
//定义一个数组
browsers = [],
//迭代,把异步获取的数据放到数组中
$.each(data,function(i,d){
alert(d.monitorName+":"+d.freezeNum);
browsers.push([d.monitorName,d.freezeNum]);
});
//设置数据
chart.series[0].setData(browsers);
},
error:function(e){
alert(e);
}
});