highCharts图表入门实例

　　本文通过讲解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{
	       //省略参数获取过程
　　　　　　    //需要获取的参数
　　　　　　　//1、title：titleStr----柱状图的标题，StringBuffer类型，将其值传入前台

　　　　　　　　//2、data:sumWaterByCounty-----柱状图的数据列，是一个数组

　　　　　　　　//3、xdata:xdata-------横坐标轴的数据，也是一个数组

		 /**
	　　　　　　 * 输出统计的字符串转化成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，供前台获取
　　　　　　}