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验证电话号码与手机支持+86的正则表达式
Jan 23 Javascript
javascript判断并获取注册表中可信任站点的方法
Jun 01 Javascript
简介JavaScript中Math.cos()余弦方法的使用
Jun 15 Javascript
javascript框架设计之浏览器的嗅探和特征侦测
Jun 23 Javascript
jQuery插件FusionCharts绘制的3D双柱状图效果示例【附demo源码】
Apr 20 jQuery
javascript兼容性(实例讲解)
Aug 15 Javascript
Angular使用动态加载组件方法实现Dialog的示例
May 11 Javascript
layui数据表格重载实现往后台传参
Nov 15 Javascript
JS实现简易计算器
Feb 14 Javascript
js Math数学简单使用操作示例
Mar 13 Javascript
原生javascript如何实现共享onload事件
Jul 03 Javascript
js获取url页面id,也就是最后的数字文件名
Sep 25 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
Oracle Faq(Oracle的版本)
2006/10/09 PHP
深入apache配置文件httpd.conf的部分参数说明
2013/06/28 PHP
PHP中数据库单例模式的实现代码分享
2014/08/21 PHP
php中使用PHPExcel读写excel(xls)文件的方法
2014/09/15 PHP
PHP中一些可以替代正则表达式函数的字符串操作函数
2014/11/17 PHP
php操作xml入门之cdata区段
2015/01/23 PHP
PHP CURL采集百度搜寻结果图片不显示问题的解决方法
2017/02/03 PHP
PHP实现RSA签名生成订单功能【支付宝示例】
2017/06/06 PHP
yii2中LinkPager增加总页数和总记录数的实例
2017/08/28 PHP
公共js在页面底部加载的注意事项介绍
2013/07/18 Javascript
本人自用的global.js库源码分享
2015/02/28 Javascript
深入理解JavaScript系列(26):设计模式之构造函数模式详解
2015/03/03 Javascript
js实现select下拉框菜单
2015/12/08 Javascript
thinkphp实现无限分类(使用递归)
2015/12/19 Javascript
jsp 网站引入外部css或者js失效问题解决
2016/10/31 Javascript
Vue.js学习示例分享
2017/02/05 Javascript
jQuery实现碰到边缘反弹的动画效果
2018/02/24 jQuery
详解Vue.js自定义tipOnce指令用法实例
2018/12/19 Javascript
Vue模板语法中数据绑定的实例代码
2019/05/17 Javascript
[25:59]Newbee vs TNC 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
使用python爬虫实现网络股票信息爬取的demo
2018/01/05 Python
python os.listdir按文件存取时间顺序列出目录的实例
2018/10/21 Python
Python WEB应用部署的实现方法
2019/01/02 Python
Python实现点阵字体读取与转换的方法
2019/01/29 Python
详解python配置虚拟环境
2019/04/08 Python
python读取.mat文件的数据及实例代码
2019/07/12 Python
python实现递归查找某个路径下所有文件中的中文字符
2019/08/31 Python
HTML5触摸事件演化tap事件介绍
2016/03/25 HTML / CSS
Html5页面二次分享的实现
2018/07/30 HTML / CSS
美国家用电器和电子产品商店:Abt
2016/09/06 全球购物
同步和异步有何异同,在什么情况下分别使用他们?举例说明
2014/02/27 面试题
应用心理学个人的求职信
2013/12/08 职场文书
创业计划书之烤红薯
2019/09/26 职场文书
html+css实现赛博朋克风格按钮
2021/05/26 HTML / CSS
MySQL连接查询你真的学会了吗?
2021/06/02 MySQL
JavaScript实现音乐播放器
2022/08/14 Javascript