highcharts 实现曲线报表

最新推荐文章于 2024-09-07 15:18:54 发布
最新推荐文章于 2024-09-07 15:18:54 发布
阅读量125 收藏
点赞数
文章标签： Java Web JSP jQuery json ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wlhbye/article/details/83971730
版权

由于业务上的需求，网上找了不少例子，最终选择了highcharts 来实现曲线报表。下面我把个人心得与大家分享下：

 

 

如上图所示

X轴为整点时间轴

Y轴为数据坐标轴

该功能主要是检测当天 某时间检测到的数据。

代码如下所示：

 

Highcharts.setOptions({global:{useUTC : false}});
$(function(){  
	//声明报表对象  
	var chart = new Highcharts.Chart({  
		chart: {
		renderTo: 'container', // 报表显示在 页面位置 container 为 div 定义的属性
		defaultSeriesType: 'spline', // 定义报表类型 例如：line ，spline ，colume
		events: {
				load:  getForm  //调用js 方法
			}
		},
		title:{
			text:'实时监测曲线图" //定义曲线报表 名称
		},
		xAxis: {
			type: 'datetime', // 定义时间轴的 类型
			maxPadding : 0.05,
			minPadding : 0.05,
			tickWidth:1,//刻度的宽度
			lineWidth :1,//自定义x轴宽度
			gridLineWidth :1,//默认是0，即在图上没有纵轴间隔线
			lineColor : '#990000' 	
		},
		yAxis: {
				max:12, // 定义Y轴 最大值
				min:0, // 定义最小值
				minPadding: 0.2, 
				maxPadding: 0.2,
				tickInterval:1, // 刻度值
				title: {
					text: 'PH值'
				},
				// plotLines 表示为定义曲线报表中的 （刻度线）或者叫做（定义的区间范围）
// 一下为2条表示线
				plotLines: [{ 
							value: 6,
							color: 'green',
							dashStyle: 'shortdash',
							width: 2,
							label: {
								text: '正常'
							}
						},{
							value: 8,
							color: 'green',
							dashStyle: 'shortdash',
							width: 2,
							label: {
								text: '正常'
							}
						}
				}]
		},
		tooltip: {  // 表示为 鼠标放在报表图中数据点上显示的数据信息
			formatter: function() {
				  return '<b>'+'日期:' +'</b>'
+Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) +'<br/>'+
				   '<b>'+'<%=lbname%>:' +'</b>'+ this.y+'  <%=shll%>';
			}
		},
		series: [{
			name: 'PH',
			data: [] // 此处存放数据值 用,分开 例如：1.8,8.9,null,9.2,   如果在某一点数据为空  
//可以用null 来表示 
			//如果是想动态扶植  这个位置 应该为空 即：data: []
		}]
	});  
	// 与后台进行数据交互
	function getForm(){  
		jQuery.getJSON("test!test.do?id=123456", null, function(data) {   
			//为图表设置值   
			chart.series[0].setData(data);   
		});   	
	}  
	//定时刷新 列表数据
   $(document).ready(function() {  
	   //每隔3秒自动调用方法，实现图表的实时更新  
	   window.setInterval(getForm,50000);   
   });  
});

//定义 曲线报表图 的样式
	Highcharts.theme = {
	   colors: ['#058DC7', '#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655',
 '#FFF263', '#6AF9C4'],
	   chart: {
		  backgroundColor: {
			 linearGradient: [0, 0, 500, 500],
			 stops: [
				[0, 'rgb(255, 255, 255)'],
				[1, 'rgb(240, 240, 255)']
			 ]
		  },
		  borderWidth: 2,
		  plotBackgroundColor: 'rgba(255, 255, 255, .9)',
		  plotShadow: true,
		  plotBorderWidth: 1
	   },
	   title: {
		  style: { 
			 color: '#000',
			 font: 'bold 16px "Trebuchet MS", Verdana, sans-serif'
		  }
	   },
	   subtitle: {
		  style: { 
			 color: '#666666',
			 font: 'bold 12px "Trebuchet MS", Verdana, sans-serif'
		  }
	   },
	   xAxis: {
		  gridLineWidth: 1,
		  lineColor: '#000',
		  tickColor: '#000',
		  labels: {
			 style: {
				color: '#000',
				font: '11px Trebuchet MS, Verdana, sans-serif'
			 }
		  },
		  title: {
			 style: {
				color: '#333',
				fontWeight: 'bold',
				fontSize: '12px',
				fontFamily: 'Trebuchet MS, Verdana, sans-serif'

			 }            
		  }
	   },
	   yAxis: {
		  //minorTickInterval: 'auto'  // 此处会在Y轴坐标2点之前出现小格  所以就没有使用。
	   },
	   legend: {
		  itemStyle: {         
			 font: '9pt Trebuchet MS, Verdana, sans-serif',
			 color: 'black'
		  },
		  itemHoverStyle: {
			 color: '#039'
		  },
		  itemHiddenStyle: {
			 color: 'gray'
		  }
	   },
	   labels: {
		  style: {
			 color: '#99b'
		  }
	   }
	};
	var highchartsOptions = Highcharts.setOptions(Highcharts.theme);

 

 

 

 

 

 针对于此种情况的后台返回的参数如：[new DATE().gettime(),12] --->[时间，数据]

后台传值为：[[new DATE().gettime(),12] ,[new DATE().gettime(),10] ,[new DATE().gettime(),9] ]

 

根据查询返回的list 

        JSONArray array =  new JSONArray();
        array.addAll(list);
        response.getWriter().println(array.toString());

返回 结果集到前台js中去

 

 

上图是实现的 月报表，主要是查询系统当前月每天的平均数的记录

sql：

select round(avg(jcsz), 2) jcsz ,mdate from (

	select to_char(to_date(substr(z_date,1,10),'yyyy-mm-dd'), 'dd') mdate, jcsz  

	from table  where z_date like '%"2011-07-07"%'  and cydd = '123456'
	
) a  group by a.mdate order by mdate

 

如果某天数据不存在 则 需要补空 ‘null’

补空后台代码：

Set<Integer> set = new HashSet<Integer>();
for(int a =1 ; a<31 ; a++){
	set.add(a);
}

for(int k:set){
	boolean flag = false;
	
	for(int i = 0 ; i<list.size() ; i++){
		Test test = list.get(i);
		int day = test.getInt("MDATE");
		if(k==day){
			map.put(k, bean.getStr("JCSZ"));
			flag = true;
		}
	}
	if(flag)
		continue;
	map.put(k, "null");
}

   传map返回页面

request.setAttribute("map", map);

 

前台代码

var chart;
jQuery(document).ready(function() {
	chart = new Highcharts.Chart({
		chart: {
			renderTo: 'container',
			defaultSeriesType: 'spline'
		},
		title: {
			text:  "月监测曲线图",
			x: -20  
		}, 
		xAxis: {
			maxPadding : 0.05,
            minPadding : 0.05,
			tickPixelInterval : 10,
	        tickWidth:5,//刻度的宽度
	        lineColor : '#990000',//自定义刻度颜色
	        lineWidth :1,//自定义x轴宽度
	        gridLineWidth :1,//默认是0，即在图上没有纵轴间隔线
			categories: ['1', '2', '3', '4', '5', '6',  '7', '8', '9', '10', '11', '12', '13', '14', '15',
 '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30','31']		
			},
		yAxis: {
			 max:12, 
			 min:0,
		     minPadding: 0.2,
		     maxPadding: 0.2,
		     tickInterval:1,
			title: {
			text: 'test'
		},
		plotLines: [{
			        	value: 150,
			        	color: 'green',
			        	dashStyle: 'shortdash',
			        	width: 2,
			        	label: {
			        		text: '正常'
			        	}
					},
				   	{
			        	value: 1,
			        	color: 'green',
			        	dashStyle: 'shortdash',
			        	width: 2,
			        	label: {
			        		text: '正常'
			        	}
			        }]
		},
		tooltip: {
			formatter: function() {
	                return '<b>'+ '第' +'</b>'+ this.x +' 天 : '+ this.y;
			}
		},
		series: [ {
			name: 'test',
			data: [ <%
					Map map = (Map)request.getAttribute("map");
						Iterator it = map.entrySet().iterator();
						String valuee =" ";
						while (it.hasNext()) {   
					
							Map.Entry entry = (Map.Entry) it.next();   
					
							Object key = entry.getKey();   
							valuee+= entry.getValue()+",";
						}
						out.println(valuee);
					%>	
				]
		}]
	});
});

Highcharts.theme = {
   colors: ['#058DC7', '#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', 
'#FFF263', '#6AF9C4'],
   chart: {
	  backgroundColor: {
		 linearGradient: [0, 0, 500, 500],
		 stops: [
			[0, 'rgb(255, 255, 255)'],
			[1, 'rgb(240, 240, 255)']
		 ]
	  },
	  borderWidth: 2,
	  plotBackgroundColor: 'rgba(255, 255, 255, .9)',
	  plotShadow: true,
	  plotBorderWidth: 1
   },
   title: {
	  style: { 
		 color: '#000',
		 font: 'bold 16px "Trebuchet MS", Verdana, sans-serif'
	  }
   },
   subtitle: {
	  style: { 
		 color: '#666666',
		 font: 'bold 12px "Trebuchet MS", Verdana, sans-serif'
	  }
   },
   xAxis: {
	  gridLineWidth: 1,
	  lineColor: '#000',
	  tickColor: '#000',
	  labels: {
		 style: {
			color: '#000',
			font: '11px Trebuchet MS, Verdana, sans-serif'
		 }
	  },
	  title: {
		 style: {
			color: '#333',
			fontWeight: 'bold',
			fontSize: '12px',
			fontFamily: 'Trebuchet MS, Verdana, sans-serif'

		 }            
	  }
   },
   yAxis: {
	  //minorTickInterval: 'auto'
	
	   
   },
   legend: {
	  itemStyle: {         
		 font: '9pt Trebuchet MS, Verdana, sans-serif',
		 color: 'black'

	  },
	  itemHoverStyle: {
		 color: '#039'
	  },
	  itemHiddenStyle: {
		 color: 'gray'
	  }
   },
   labels: {
	  style: {
		 color: '#99b'
	  }
   }
};

var highchartsOptions = Highcharts.setOptions(Highcharts.theme);

 

 

 

wlhbye
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
使用Highcharts快速开发报表中文WORD版
07-22
Highcharts目前支持折线图，曲线图，块状图，块状-曲线图，柱形图，条形图，饼图和散点图类型。由于Highcharts具有强兼容性、灵活易用性、画面效果好等特点，能被广泛用于报表开发。感兴趣 资源太大，传百度网盘了...
Highcharts AJAX后台JAVA JSON 曲线报表完美可运行例子 不包含官方JS 自己下载
09-24
在这个"Highcharts AJAX后台JAVA JSON 曲线报表完美可运行例子"中，我们将探讨如何结合Java后端和JSON数据格式，通过AJAX技术在网页上展示动态曲线报表。 首先，`index_lineAjax.htm`是前端HTML文件，它包含了...
HighChars 之曲线报表和柱状报表
java
11-27 1728
第一章介绍了highchars 的基本情况和一个饼型报表。 接下来我们做一个曲线报表和柱状报表，就当做一个代码的备份。具体的步骤就不说了。可以参见第一篇文章。 代码如下： package com.highcharts; import java.io.IOException; import javax.servlet.ServletException; import javax.servl
图表报表应用02~~使用Highcharts绘制图表报表
自学之路←_←
07-21 736
1. 简介 Highcharts 是一个用纯JavaScript编写的一个图表库， 能够很简单便捷的在web网站或是web应用程序添加有交互性的图表，并且免费提供给个人学习、个人网站和非商业用途使用。HighCharts支持的图表类型有曲线图、区域图、柱状图、饼状图、散状点图和综合图表。 2. 下载安装 官网下载： https://www.highcharts.com.cn/download 把js放入到项目中 3. 入门案例 ...
Highcharts常用图形报表展示
在路上。。。
07-26 2552
Highcharts 是一个用纯JavaScript编写的一个图表库， 能够很简单便捷的在web网站或是web应用程序添加有交互性的图表，并且免费提供给个人学习、个人网站和非商业用途使用。HighCharts支持的图表类型有曲线图、区域图、柱状图、饼状图、散状点图和综合图表。
highcharts图表及报表展示、导出数据
folyh
11-08 2065
文章目录前言一、使用highcharts前后端交互展示图表，及使用报表导出二、实现思路1.图表可以选择echarts、highcharts，我们这里选择highcharts，使用很简洁方便，并自带导出图表、打印等功能。2.报表导出我们选择apache的HSSFWorkbook进行报表导出。三、实现步骤1.ElementUI代码2.js代码：2.1 首先要使用mounted钩子函数挂载调用图表及报表方法：2.2 然后要创建methods2.4 着重要讲一点：下面是直接在报表多生成一行并计算总票数3.后端HS.
Highcharts 动态曲线图
xinjiatao的专栏
07-02 182
   $(function (){ Highcharts.setOptions({ global: { useUTC: false } }); });   var chart; var varseries; // 动态曲线图 function b(){ chart = new Highcha...
SpringMVC+highstock实现曲线报表
8豆少爷博客
07-04 2484
最近项目要做曲线报表，之前用的是生成图片然后传到前端，感觉不是很好，在网上找到资料说highstock就可以而且还可以做类似股票的那种实时的曲线，研究的一段时间把项目问题解决了做个总结： 首先把highstock.js放到项目资源路径下，因为这个需要JQuery，所以jquery-1.7.2.min.js也需要放，而且在页面引用是要先引用jquery-1.7.2.min.js再引用highsto
使用Highcharts制作系统报表
薛秋艳的博客
06-04 581
 这几天使用Highcharts制作系统报表，经过摸索总结下使用方法： ·1去官网下载http://www.highcharts.com/，和jquery  http://www.jquery.com/download 2.在页面引人js文件 注意引人的顺序，先jquery的，否则页面不显示。  这个是主题样式文件，可选的 3.
Highcharts:在HTML页面上应用highcharts实现与后台数据的交互
weixin_42201350的博客
11-25 2819
在我们项目过程中，常常许多时候需要用到图形化报表，以方便查看统计数据。而highcharts则是我们做图形报表的不二选择，支持各种图表：如曲线图、区域图、柱状图、饼状图、散状点图和综合图表等等。 这篇博客主要是介绍怎么将后台的数据展示在html页面上，下面就来进行实战操作： 操作之前先把完成的报表亮出来，这里主要是一个折线图： 先需要引入highcharts的核心文件： &lt;script s...
使用Highcharts快速开发报表.pdf
10-24
Highcharts是一个基于JavaScript的图表库，它提供了丰富的图表类型，如折线图、曲线图、柱形图、饼图等，使得开发者能够轻松地在网站或Web应用程序中添加交互式图表。该库的特点包括： 1. **兼容性广泛**：...
Highcharts-3.0.10 jquery报表
03-28
3. **线型报表**：线型图是数据趋势分析的常见工具，通过连接一系列数据点形成曲线，清晰地展示数据随时间的变化。在Highcharts中，可以自定义线的颜色、样式、点标记等，还能添加数据标签和工具提示。 4. **圆形...
使用HighCharts实现实时数据展示
伏虎游侠的博客
11-28 3529
使用HighCharts实现实时数据展示   在众多的工业控制系统领域常常会实时采集现场的温度、压力、扭矩等数据，这些数据对于监控人员进行现场态势感知、进行未来趋势预测具有重大指导价值。工程控制人员如果只是阅读海量的数据报表，对于现场整个态势的掌控会十分困难，因此往往希望借助一些图表进行展示，其中趋势图是常用的实时数据展示方式之一。目前实现趋势图、曲线图的工具很多也很成熟，一些是通过CS模式开发
uniapp去除顶部标题栏
heliang399的博客
09-04 558
其实很简单，只需两个步骤即可彻底除掉，首先找到项目文件夹下的pages.json路由文件点开，在这个文件里可以看到你创建的所有页面，然后在你想要去除头部标题栏的页面中添加"navigationStyle": "custom"即可去除😁
JavaScript前端面试题——深拷贝及浅拷贝
lbcbjtlhmjq的博客
09-05 844
深拷贝和浅拷贝是复制数据结构的两种不同方式。浅拷贝是指创建一个新对象，但仅复制原对象的属性引用，而不是其属性值。即，如果原对象的属性值是对象或数组，浅拷贝后的新对象会引用相同的内存地址，因此修改内层对象会影响到原对象。（简单数据类型拷贝值，引用数据类型拷贝地址）深拷贝是创建一个新的对象，并复制原始对象的所有属性，包括嵌套的对象和数组。这意味着在原始对象或新对象上的更改不会相互影响。
京东获得JD商品详情 API 返回值说明||京东商品详情数据采集API接口详解
最新发布
电商数据Girl的博客
09-07 309
请求参数：num_iid=10335871600。参数说明：num_iid:JD商品ID。
Vue实战：利用vue2-highcharts绘制曲线图表教程
在Vue中使用vue2-highcharts实现曲线数据展示，首先需要安装vue2-highcharts这个库，它是一个将Highcharts图表库与Vue.js框架集成的组件。以下是实现这一功能的关键步骤： 1. 安装依赖：在项目中，通过npm或yarn来...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值