首页 > 代码库 > highCharts图表入门实例

highCharts图表入门实例

  本文通过讲解Highcharts生成一个简单的3D柱状图实例来学习Highcharts的使用。

  JSP 页面

  1、需要引入的js文件

<script src="http://www.mamicode.com/javascript/jquery-1.6.1.js"></script><script src="http://www.mamicode.com/javascript/wiassess/highCharts4.0.3/highcharts.js"></script><script src="http://www.mamicode.com/javascript/wiassess/highCharts4.0.3/highcharts-3d.js"></script><script src="http://www.mamicode.com/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=http://www.mamicode.com/result;"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,供前台获取
      }

  

 

highCharts图表入门实例