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 相关文章推荐
js监听输入框值的即时变化onpropertychange、oninput
Jul 13 Javascript
js用闭包遍历树状数组的方法
Mar 19 Javascript
JavaScript检查弹出窗口是否被阻拦的方法技巧
Mar 13 Javascript
jQuery实现表格行上下移动和置顶效果
Jun 05 Javascript
整理JavaScript创建对象的八种方法
Nov 03 Javascript
Bootstrap实现默认导航栏效果
Sep 21 Javascript
Javascript中的Prototype到底是什么
Feb 16 Javascript
jQuery过滤选择器经典应用
Aug 18 Javascript
使用vue框架 Ajax获取数据列表并用BootStrap显示出来
Apr 24 Javascript
vue.extend实现alert模态框弹窗组件
Apr 28 Javascript
js尾调用优化的实现
May 23 Javascript
浅谈Vue的响应式原理
May 30 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
PHP写的加密函数,支持私人密钥(详细介绍)
2013/06/09 PHP
php数据类型判断函数有哪些
2013/09/23 PHP
php利用curl抓取新浪微博内容示例
2014/04/27 PHP
php中smarty区域循环的方法
2015/06/11 PHP
php通过排列组合实现1到9数字相加都等于20的方法
2015/08/03 PHP
php集成开发环境详解
2019/09/24 PHP
laravel框架如何设置公共头和公共尾
2019/10/22 PHP
网页常用特效代码整理
2006/06/23 Javascript
JQuery 学习笔记 选择器之六
2009/07/23 Javascript
JavaScript 加号(+)运算符号
2009/12/06 Javascript
JS调用页面表格导出excel示例代码
2014/03/18 Javascript
你可能不知道的JavaScript的new Function()方法
2014/04/17 Javascript
js实现从数组里随机获取元素
2015/01/12 Javascript
javascript实现输出指定行数正方形图案的方法
2015/08/03 Javascript
JavaScript探测CSS动画是否已经完成的方法
2016/08/30 Javascript
jQuery 如何实现一个滑动按钮开关
2016/12/01 Javascript
requirejs + vue 项目搭建详解
2017/06/16 Javascript
如何使用JS在HTML中自定义字符串格式化
2017/07/20 Javascript
vue2.0在table中实现全选和反选的示例代码
2017/11/04 Javascript
利用vue + koa2 + mockjs模拟数据的方法教程
2017/11/22 Javascript
Vue CLI 2.x搭建vue(目录最全分析)
2019/02/27 Javascript
24个解决实际问题的ES6代码片段(小结)
2020/02/02 Javascript
Python列表(list)、字典(dict)、字符串(string)基本操作小结
2014/11/28 Python
详解Python函数作用域的LEGB顺序
2016/05/14 Python
python迭代dict的key和value的方法
2018/07/06 Python
使用python来调用CAN通讯的DLL实现方法
2019/07/03 Python
浅析Python 条件控制语句
2020/07/15 Python
Python2.6版本pip安装步骤解析
2020/08/17 Python
阿提哈德航空官方网站:Etihad Airways
2017/01/06 全球购物
护理专业应届毕业生推荐信
2013/11/15 职场文书
幼儿园运动会口号
2014/06/07 职场文书
管理标语大全
2014/06/24 职场文书
习近平在党的群众路线教育实践活动总结大会上的讲话全文
2014/10/25 职场文书
认识实习感想
2015/08/10 职场文书
Python内置数据结构列表与元组示例详解
2021/08/04 Python
深入理解MySQL中MVCC与BufferPool缓存机制
2022/05/25 MySQL