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，供前台獲取
　　　　　　}