本文通过讲解Highcharts生成一个简单的3D柱状图实例来学习Highcharts的使用。
JSP 页面
1、需要引入的js文件
<script src="<%=basePath%>javascript/jquery-1.6.1.js"></script>
<script src="<%=basePath%>javascript/wiassess/highCharts4.0.3/highcharts.js"></script>
<script src="<%=basePath%>javascript/wiassess/highCharts4.0.3/highcharts-3d.js"></script>
<script src="<%=basePath%>javascript/wiassess/highCharts4.0.3/modules/exporting.js"></script>
2、javascript
<script type="text/javascript">
function Query(){
/* 省略tradTp,county,nature等参数的获取过程 */
$.ajax({
type:"post",
dataType:"json",
data: {"project.tradTp":tradTp,"project.county":county,"project.projNature":nature,"project.replDtS":replDtS,"project.replDtE":replDtE,"project.chartTp":chartTp}, //参数列表
async:false,
url:"<%=basePath%>wiassess/projectMgr/projectMgrAction!getProjectChart.action",
success: function(result){
var jsonData=result;
var xdata=jsonData.xdata; //xdata是后台传向前台的参数，代表横轴的数组
var data=jsonData.data; //data是后台传向前台的参数，代表显示数据，本实例显示的是年用水量
var tiltleTm=jsonData.title; //tiltleTm 是后台传向前台的参数，代表图标的标题
var chart = new Highcharts.Chart({
chart: {
renderTo: 'chartPro', //要显示柱状图的div的id
type: 'column', //图表类型为柱状图
margin: 75,
options3d: { //这里设置3D图表的样式
enabled: true,
alpha: 10,
beta: 0,
depth: 50,
viewDistance: 25
}
}, title: {
text: tiltleTm //显示柱状图的标题
},
credits: {//不显示highchart超链接
enabled: false
},
plotOptions: {
column: {
depth: 10,
value: 0,
width: 1
}
},
yAxis:{ //纵坐标
title:{
text:'单位：立方米'
}
},
xAxis: { //横坐标
categories: xdata
},
tooltip: { //提示格式
shared: true,
useHTML: true,
headerFormat: '<small>{point.key}</small><table>',
pointFormat: '<tr><td style="color: {series.color}">{series.name}: </td>' +
'<td style="text-align: right"><b>{point.y} 立方米</b></td></tr>',
footerFormat: '</table>',
valueDecimals: 2
},
series: [{
name:'取水总量',
data: data
}]
});
},
error: function(){
alert('获取失败!');
}
});
}
</script>
3、jsp
<div id="chartPro" style=" width: 66%; height: 400px; " ></div>
后台传数据----拼接json
action方法getProjectChart()
/**
* 获得项目统计图
* @return
* @throws Exception
*/
public String getProjectChart() throws Exception{
//省略参数获取过程<br> //需要获取的参数<br> //1、title：titleStr----柱状图的标题，StringBuffer类型，将其值传入前台
//2、data:sumWaterByCounty-----柱状图的数据列，是一个数组
//3、xdata:xdata-------横坐标轴的数据，也是一个数组
<br>
/**
* 输出统计的字符串转化成JSON，返回JSON
* */
StringBuilder sb=new StringBuilder();
sb.append("{\"success\":true,");
sb.append("\"title\":\""+titleStr.toString()+"\",");
sb.append("\"data\":"+JSONArray.fromObject(sumWaterByCounty)+",\"xdata\":"+JSONArray.fromObject(xdata)+"");
sb.append("}");
jsonStr=sb.toString();
return jsonStr;//返回拼接的JSON，供前台获取<br> }