SSH+Highcharts 生成动态图表 ——在思考中解决问题
来源:互联网 发布:tgp网络出口不稳定 编辑:程序博客网 时间:2024/06/05 22:42
SSH+Highcharts 生成动态图表 ——在思考中解决问题
- 博客分类:
- JAVA后台
Highchartsjs图表Highcharts jsonHighcharts动态生成数据
最近一个项目中需要用到图表分析,能直观看出一个月内访问量的变化曲线。
问题1:js图表插件那么多,到底选哪一个呢?
通过在网上搜索,选中了Highcharts。
那么第一步肯定是去官网下载,查看demo。
- http://www.highcharts.com/
选中曲线图的示例,查看Highcharts的加载方式:
- <script type="text/javascript">
- $(function () {
- $('#container').highcharts({
- chart: {
- type: 'line',
- marginRight: 130,
- marginBottom: 25
- },
- title: {
- text: 'Monthly Average Temperature',
- x: -20 //center
- },
- subtitle: {
- text: 'Source: WorldClimate.com',
- x: -20
- },
- xAxis: {
- categories: <span style="color: #ff0000;">['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
- 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']</span>
- },
- yAxis: {
- title: {
- text: 'Temperature (°C)'
- },
- plotLines: [{
- value: 0,
- width: 1,
- color: '#808080'
- }]
- },
- tooltip: {
- valueSuffix: '°C'
- },
- legend: {
- layout: 'vertical',
- align: 'right',
- verticalAlign: 'top',
- x: -10,
- y: 100,
- borderWidth: 0
- },
- series: [<span style="color: #ff0000;">{
- name: 'Tokyo',
- data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
- }, {
- name: 'New York',
- data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
- }, {
- name: 'Berlin',
- data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
- }, {
- name: 'London',
- data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
- }</span>]
- });
- });
- </script>
- </head>
- <body>
- <script src="../../js/highcharts.js"></script>
- <script src="../../js/modules/exporting.js"></script>
- <div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
- </body>
通过阅读源码我们不难发现,xAxis与series是应该要动态生成的,需要后台构造。
问题2:如何在后台构造动态数据呢?
不难发现,有几条曲线就应该有几个{},这样我们就可以用一个普通类来封装它了!需要有name,data属性:
- public class Highcharts {
- private String name;
- private List data = new ArrayList();
- //get and set
- }
这样在Service层就是一个解析查询List的过程了:
- public JSONObject getPlusCharts() {
- String hql = "select sum(plustimei),sum(nopluswithdis),substring(time,6,10) from AnalyseResult group by time";
- List chartList = analyseResultDao.find(hql);
- List<Highcharts> dataList = new ArrayList<Highcharts>();
- JSONObject jsonData = new JSONObject();
- Highcharts highchart1 = new Highcharts();
- Highcharts highchart2 = new Highcharts();
- List<String> xdataList = new ArrayList<String>();
- List<Long> imeilist = new ArrayList<Long>();//imei
- List<Long> pluslist = new ArrayList<Long>();//noplus
- for(int i =0;i<chartList.size();i++){
- Object[] object = (Object[]) chartList.get(i);
- imeilist.add((Long) object[0]);
- pluslist.add((Long) object[1]);
- xdataList.add(object[2].toString());
- }
- <span style="color: #ff0000;">highchart1.setName("imei去重分析");
- highchart1.setData(imeilist);
- highchart2.setName("没有带插件分析");
- highchart2.setData(pluslist);</span>
- dataList.add(highchart1);
- dataList.add(highchart2);
- jsonData.put("data", dataList);
- jsonData.put("listXdata", xdataList);
- return jsonData;
- }
红色部分表示有几条曲线,就应该有几个类来封装。
这里用到了fastjson,一款json解析插件。
Action层接收以后传值给前台就行了:
- public void getPlusCharts(){
- JSONObject jsonObject = analyseResultService.getPlusCharts();
- super.writeJson(jsonObject);//传入前台
- }
项目进行到这里,我们打开火狐调试工具Firebug,请求该Action,可以看到后台生成的数据格式如下:
- {"listYdata":[{"data":[1549,2106,3372],"name":"imei去重分析"},{"data":[364,841,1565],"name":"没有带插件分析"}],"listXdata":["04-16","04-17","04-18"]}
问题3:后台生成了数据,那么在前台如何处理呢?
我们可以在页面加载的时候发送一段ajax到后台,生成数据格式,如果返回了数据再来构造曲线图:
- <script type="text/javascript">
- var chart;
- $(function(){
- $.ajax({
- type: 'POST',
- dataType: 'JSON',
- url: '${pageContext.request.contextPath}/analyseResultAction!getPlusCharts.action',
- success : function(result){
- //此处构建曲线
- $('#container').highcharts({
- chart:{
- defaultSeriesType: 'spline',//图表的显示类型(line,spline,scatter,splinearea bar,pie,area,column)
- marginRight: 125,//上下左右空隙
- marginBottom: 25 //上下左右空隙
- },
- title:{
- text: '插件分析视图',//主标题
- x: -20 //center
- },
- xAxis: { //横坐标
- <span style="color: #ff0000;"> categories: result.listXdata //动态解析</span>
- },
- yAxis: {
- title: {
- text: '' //纵坐标
- },
- plotLines: [{ //标线属性
- value: 0,
- width: 1,
- color: 'red'
- }]
- },
- tooltip: { //数据点的提示框
- formatter: function() { //formatter格式化函数
- return '<b>'+ this.series.name +'</b><br/>'+
- this.x +': '+ this.y;
- }
- },
- legend: {
- layout: 'vertical',
- align: 'right',
- verticalAlign: 'top',
- x: -10,
- y: 100,
- borderWidth: 0
- },
- <span style="color: #ff0000;">series:result.listYdata //动态解析</span>
- });
- }
- });
- });
- </script>
生成的图表如下:
大功告成!
经常有网友问我需要用到哪些包,我将所用到的包放到网盘,有需要的就去下载吧!
- http://pan.baidu.com/share/link?shareid=4042236307&uk=3173707519
- SSH+Highcharts 生成动态图表 ——在思考中解决问题
- highcharts动态生成图表
- 调用后台动态的生成Highcharts图表
- JQuery Highcharts 动态图表生成方法
- highcharts生成线性图表
- Highcharts动态刷新图表
- highcharts动态图表
- 使用 HighCharts 动态获取后台数据生成图表
- ASP.NET中动态获取数据使用Highcharts图表控件
- highcharts图表生成插件学习心得
- 在ASP.NET中使用Highcharts js图表
- 在ASP.NET中使用Highcharts js图表
- 在ASP.NET中使用Highcharts js图表
- 在vue项目中引入highcharts图表的方法
- JQuery图表插件——Highcharts
- 纯JavaScrip图表插件——Highcharts
- 纯JavaScrip图表插件——Highcharts
- 在Java中使用Highcharts+Ajax+Json生成动态饼图
- linux小记6 权限
- Hadoop公平调度器算法解析
- 排序算法总结(一)计数排序
- 编译mongodb C++驱动 windows
- Hadoop中Map任务的执行框架
- SSH+Highcharts 生成动态图表 ——在思考中解决问题
- apache 集成多个tomcat的方法
- 如何估算PGA,SGA的大小,配置数据库服务器的内存
- Job的任务分解
- Hibernate与H2
- Job的map任务分配
- directX 数学基础-向量
- 堆排序
- 穆利堂推荐-软件行业销售宝典-目录,待续....