highcharts柱状图动态加载
(1):导入样式
<script type="text/javascript" src="<%=request.getContextPath()%>/boot_js/jquery/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/highCharts/highcharts.js"></script>
(2):代码
<script type="text/javascript">
var oChart;
var oOptions;
var rntData;
oOptions = {
chart: {
renderTo: 'container', //将饼图渲染到container容器中，页面中需有一个id为container的div
type: 'column'//图表类型 column-柱状图 pie-饼图 line表示折线型(默认)spline表示曲线型areaspline表示曲线区域型
},
title: {
text: '公司地址分布图'//主标题
},
subtitle: {
text: '---------'//副标题
},
xAxis: {
type: 'category',//轴的类型
labels: {
//rotation: 20,倾斜度
style: {
fontSize: '13px',
//fontFamily: 'Verdana, sans-serif'
}
},
//设置x轴text文本
//categories:[]
},
yAxis: {
min: 0,
title: {
text: '人数'
}
},
legend: {
enabled: true
},
column:{
dataLabels:{
enabled:true, // dataLabels设为true
style:{
color:'#D7DEE9'
}
}
},
//绑定鼠标放上后显示的字段
tooltip: {
pointFormat: '{series.name}: <b>{point.y:.1f} 人</b>',
shared: false,//节点数据框共享
enabled: true,//每个节点显示数据框
formatter: function() {//格式化每个节点数据框
//return '<b>'+ this.x +'</b><br>'+ this.series.name +': '+ this.y;
return '<b>'+ this.series.name +'</b>入职人数: <b>'+ this.y +'</b>人';
}
},
series: []
}
$(document).ready(function(){
oChart = new Highcharts.Chart(oOptions);
//异步动态加载数据列
LoadSerie_Ajax();
});
//异步读取数据并加载到图表
function LoadSerie_Ajax() {
var startTime = $("#startTime").val();
var endTime = $("#endTime").val();
//oChart.showLoading();
$.ajax({
url :
'<%=request.getContextPath()%>/charts/getCharts.action?startTime='+startTime+"&endTime="+endTime,
type : 'POST',
dataType : 'json',
contentType: "application/x-www-form-urlencoded; charset=utf-8",
success : function(rntData){
for(var i in rntData){
var oSeries = {
name:rntData[i].dname, //该 name 是data数值的名称
pointPadding: 0, //数据点之间的距离值
groupPadding: 0, //分组之间的距离值
borderWidth: 20,
shadow: true,
pointWidth:5, //柱子之间的距离值
data: eval("[" + rntData[i].count + "]") // series的data接受json数组
};
oChart.addSeries(oSeries);//将对象添加到series中
}
}
});
oChart.hideLoading();
}
</script>
（3）html代码
<div id="container" style="width:800px;height: 400px;margin-top: 80px;margin-left: 330px;"></div>
根据以上的配置可以实现柱状图的动态调用。
如果需要再加条件查询时，页面加载后需要清空上一次的数据，将data数组的length长度设置为0；
