high Chartsグラフ入門例

本論文はHighchartsが簡単な3 Dヒストグラムを生成する例を説明することによって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>

バックグラウンドでデータを送る
action方法get Project Chart()

/**
	 *        
	 * @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，     
　　　　　　}