JS highcharts实现动态曲线代码示例


Posted in Javascript onOctober 16, 2020

Highcharts是一个制作图表的纯Javascript类库, 

主要特性如下:

兼容性:兼容当今所有的浏览器,包括iPhone、IE和火狐等等;

对个人用户完全免费;

纯JS,无BS;

支持大部分的图表类型:直线图,曲线图、区域图、区域曲线图、柱状图、饼装图、散布图;

跨语言:不管是PHP、.net还是Java都可以使用,它只需要三个文件:一个是

Highcharts的核心文件highcharts.js,还有a canvas emulator for IE和Jquery类库或者MooTools类库;

提示功能:鼠标移动到图表的某一点上有提示信息;

放大功能:选中图表部分放大,近距离观察图表;

易用性:无需要特殊的开发技能,只需要设置一下选项就可以制作适合自己的图表;

时间轴:可以精确到毫秒;

其官网网站为:http://www.highcharts.com/ !

里面有他们的例子和参考代码,可以参考着实现自己的应用,如果你做的是静态的图形展示,那么使用是非常简单的!

参照官网的一个例子,我来实现一个动态曲线的应用:

效果如下:

JS highcharts实现动态曲线代码示例

这个曲线是动态的,他的官网效果地址:http://www.highcharts.com/demo/dynamic-update !

我把他应用到JSP中,代码如下:

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<html>
	<head>
		<title>Highcharts Example</title>
		<script language="javascript" type="text/javascript" src="jquery.min.js"></script>
		<script language="javascript" type="text/javascript" src="highcharts.js"></script>
		<script language="javascript" type="text/javascript" src="exporting.js"></script>
<script type="text/javascript">
$(document).ready(function() {
	Highcharts.setOptions({
		global: {
			useUTC: false
		}
	});
	var chart;
	chart = new Highcharts.Chart({
		chart: {
			renderTo: 'container',
			type: 'spline',
			marginRight: 10,
			events: {
				load: function() {
					// set up the updating of the chart each second
					var series = this.series[0];
					setInterval(function() {
						var x = (new Date()).getTime(), // current time
							y = Math.random();
						series.addPoint([x, y], true, true);
					}, 1000);
				}
			}
		},
		title: {
			text: '<b>Java小强制作</b>'
		},
		xAxis: {
			type: 'datetime',
			tickPixelInterval: 150
		},
		yAxis: {
			title: {
				text: '单位:M'
			},
			plotLines: [{
				value: 0,
				width: 1,
				color: '#808080'
			}]
		},
		tooltip: {
			formatter: function() {
					return '<b>'+ this.series.name +'</b><br/>'+
					Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) +'<br/>'+
					Highcharts.numberFormat(this.y, 2);
			}
		},
		legend: {
			enabled: false
		},
		exporting: {
			enabled: false
		},
		series: [{
			name: 'Random data',
			data: (function() {
				// generate an array of random data
				var data = [],
					time = (new Date()).getTime(),
					i;

				for (i = -19; i <= 0; i++) {
					data.push({
						x: time + i * 1000,
						y: Math.random()
					});
				}
				return data;
			})()
		}]
	});
});
</script>
	</head>
	<body>
	<div id="container" style="width: 800px;height: 400px"></div>
	</body>
</html>

DIV的样式可以自己调节,需要关注的是两个点:

他需要的数据格式是双维数组

数据的更新是因为 chart 对象里面有一个 events 属性,里面定义方法使用 addPoint 实现数据点的增加和刷新!

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
在JavaScript中实现命名空间
Nov 23 Javascript
jquery checkbox,radio是否选中的判断代码
Mar 20 Javascript
基于jQuery的可用于选项卡及幻灯的切换插件
Mar 28 Javascript
jquery validation验证身份证号,护照,电话号码,email(实例代码)
Nov 06 Javascript
jQuery学习笔记之jQuery.fn.init()的参数分析
Jun 09 Javascript
jQuery实现的漂亮表单效果代码
Aug 18 Javascript
超详细的JS弹出窗口代码大全
Apr 18 Javascript
javascript函数的四种调用模式
Jan 08 Javascript
完美解决jQuery的hover事件在IE中不停闪动的问题
Feb 10 Javascript
vue不通过路由直接获取url中参数的方法示例
Aug 24 Javascript
详解react-router4 异步加载路由两种方法
Sep 12 Javascript
基于vue写一个全局Message组件的实现
Aug 15 Javascript
Swiper实现导航栏滚动效果
Oct 16 #Javascript
node.js通过url读取文件
Oct 16 #Javascript
vue组件实现移动端九宫格转盘抽奖
Oct 16 #Javascript
Vue3.0的优化总结
Oct 16 #Javascript
JavaScript通如何过RGraph实现动态仪表盘
Oct 15 #Javascript
利用js实现简易红绿灯
Oct 15 #Javascript
关于Node.js中频繁修改代码重启服务器的问题
Oct 15 #Javascript
You might like
朋友网关于QQ相关的PHP代码(研究QQ的绝佳资料)
2015/01/26 PHP
支付宝支付开发――当面付条码支付和扫码支付实例
2016/11/04 PHP
JavaScript入门教程(9) Document文档对象
2009/01/31 Javascript
动态调用CSS文件的JS代码
2010/07/29 Javascript
js验证是否为数字的总结
2013/04/14 Javascript
Jquery如何实现点击时高亮显示代码
2014/01/22 Javascript
select隐藏选中值对应的id,显示其它id的简单实现方法
2016/08/25 Javascript
Bootstrap BootstrapDialog使用详解
2017/02/17 Javascript
详解用vue-cli来搭建vue项目和webpack
2017/04/20 Javascript
详解利用jsx写vue组件的方法示例
2017/07/17 Javascript
详解vue2.0 资源文件assets和static的区别
2018/11/27 Javascript
vscode配置vue下的es6规范自动格式化详解
2019/03/20 Javascript
JQuery中的常用事件、对象属性与使用方法分析
2019/12/23 jQuery
ant-design表单处理和常用方法及自定义验证操作
2020/10/27 Javascript
[07:20]2018DOTA2国际邀请赛寻真——逐梦Mineski
2018/08/10 DOTA
详解Python中的文本处理
2015/04/11 Python
python中as用法实例分析
2015/04/30 Python
python安装numpy&amp;安装matplotlib&amp; scipy的教程
2017/11/02 Python
Numpy 将二维图像矩阵转换为一维向量的方法
2018/06/05 Python
python 拼接文件路径的方法
2018/10/23 Python
Python 从attribute到property详解
2020/03/05 Python
Python 在 VSCode 中使用 IPython Kernel 的方法详解
2020/09/05 Python
兰蔻加拿大官方网站:Lancome加拿大
2016/08/05 全球购物
澳大利亚在线时尚精品店:Hello Molly
2018/02/26 全球购物
MediaMarkt比利时:欧洲最大电器连锁店
2020/12/21 全球购物
荷兰美妆护肤品海淘网站:Beautinow(中文)
2020/11/22 全球购物
大学生自我鉴定
2013/12/08 职场文书
生产总经理岗位职责
2013/12/19 职场文书
简历中自我评价怎么写
2014/02/12 职场文书
2014年大学生就业规划书
2014/04/04 职场文书
影子教师研修方案
2014/06/14 职场文书
2014年小学教师工作总结
2014/11/10 职场文书
2015年读书月活动总结
2015/03/26 职场文书
治庸问责工作总结
2015/08/11 职场文书
CSS3 菱形拼图实现只旋转div 背景图片不旋转功能
2021/03/30 HTML / CSS
【HBU】数据库第四周 单表查询
2021/04/05 SQL Server