Highcharts案例-区域分布图

xiaoxiao2021-03-25 84

客户端报表技术—HighCharts图表

常见流行的客户端（JS）报表技术有FusionCharts、HighCharts、ECharts等。 Highchart是基于JQuery的一个插件。

Highcharts

引入Highcharts的js和样式资源参考官方文档案例：

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.8.3.js"></script>  <script type="text/javascript" src="${pageContext.request.contextPath}/js/highcharts/highcharts.js"></script>  <script type="text/javascript" src="${pageContext.request.contextPath}/js/highcharts/highcharts-3d.js"></script>  <script type="text/javascript" src="${pageContext.request.contextPath}/js/highcharts/modules/exporting.js"></script> <title>图表</title> <script type="text/javascript"> //初始化 $(function () { //初始化容器div（存放报表-）-div：报表对象 //初始化语法有两种： //1.div.highchats({各种属性}) //2. var chart = new Highcharts.Chart({各种属性：chart: {renderTo: 'container',}) $('#container').highcharts({ //报表本身的一些基础设置 chart: { //报表的类型 type: 'column'//柱状图 //type: 'bar'//条形图 , //3d效果 options3d: { enabled: true,//生效 alpha: 15, beta: 15, depth: 50, viewDistance: 25 } }, //覆盖导出服务器的地址 exporting: { //将来要换成自己搭建的导出服务器地址即可 url: 'http://export.hcharts.cn/' }, //主标题 title: { text: '月份平均降雨量' }, //副标题（可选） subtitle: { text: '数据来源: WorldClimate.com' }, //x轴的类别 xAxis: { categories: [ '一月', '二月', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec' ], //鼠标放到某一个类别上是否有阴影 crosshair: true }, //y轴 yAxis: { //y轴的最小值 min: 0, //y轴标题 title: { text: '降雨量 (mm)' } }, //鼠标放到图上的提示 tooltip: { //{point.key}:获取x轴的当前分类名字 headerFormat: '<span style="font-size:20px">{point.key}</span><table>', //{series.name}数据的name //{point.y:.1f}当前分类中y轴的值,保留一个小数点 pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' + '<td style="padding:0"><b>{point.y:.2f} mm</b></td></tr>', footerFormat: '</table>', shared: true, useHTML: true }, plotOptions: { column: { pointPadding: 0.2, borderWidth: 0 } }, //数据 series: [{ name: '客户新增数量', data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4] }, { name: '客户流失数量', data: [83.6, 78.8, 98.5, 93.4, 106.0, 84.5, 105.0, 104.3, 91.2, 83.5, 106.6, 92.3] }] }); }); </script> </head> <body> <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div> </body> </html>

区域分布图案例（使用JavaScript和Java）

页面

引入资源文件创建区域分布窗口  <div class="easyui-window" title="分区分布图" id="searchCharWindow" collapsible="false" minimizable="false" maximizable="false" style="top:20px;left:200px"> <div id="subareaChart" style="overflow:auto;padding:5px;" border="false"></div> </div> //查询分区,分布图 $("#searchCharWindow").window({ title: '分区分布图', width: 700, modal: true, //模式窗口 shadow: true, //窗口显示阴影 closed: true, //设置默认关闭 height: 400, resizable: false //窗口不可以调整大小 }); 添加按钮，绑定事件 //工具栏 var toolbar = [ { id : 'button-charts', text : '分区分布图', iconCls : 'icon-tip', handler : doCharts }]; //打开分布图 function doCharts(){ $("#searchCharWindow").window("open"); } 发送异步请求获取数据 //ajax查询所有分区数据,返回json $.post("${pageContext.request.contextPath}/subarea_fingGroupSubareas.action", function(data){ $("#subareaChart").highcharts({ chart:{ type:'pie', height:350, width:600 }, series:[{ data:data }], title:{ text:'区域分区分布图' } }); }, "json" ); });

Java实现

Action /** * 根据省对分区进行分组统计 * @return json字符串 * @throws Exception */ @Action(value="subarea_fingGroupSubareas") public String fingGroupSubareas() throws Exception{ //调用service查询 List<Object> list = subareaService.fingGroupSubareas(); //转为json,使用了struts-json插件 //将list压入栈顶 pushToValueStack(list); return JSON; } Service /** * 根据省对分区进行分组统计 */ @Override public List<Object> fingGroupSubareas() { return subareaDao.fingGroupSubareas(); } Dao /** * 根据省对分区进行分组统计 * @return */ @Query(value="select r.province,count(*) from Subarea s join s.region r group by r.province") public List<Object> fingGroupSubareas();

转载请注明原文地址: https://ju.6miu.com/read-33489.html

技术

最新回复(0)