首页 > 代码库 > 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图表入门实例
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。