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 asp.net 获取当前超链接中的文本
Apr 14 Javascript
JavaScript 学习笔记(五)
Dec 31 Javascript
jQuery快速上手:写jQuery与直接写JS的区别详细解析
Aug 26 Javascript
Json序列化和反序列化方法解析
Dec 19 Javascript
JavaScript+CSS控制打印格式示例介绍
Jan 07 Javascript
Javascript获取当前时间函数和时间操作小结
Oct 01 Javascript
JavaScript判断浏览器类型的方法
Feb 10 Javascript
javascript中日期函数new Date()的浏览器兼容性问题
Sep 05 Javascript
es6系列教程_ Map详解以及常用api介绍
Sep 25 Javascript
JS实现的简单表单验证功能示例
Oct 13 Javascript
Vue 中批量下载文件并打包的示例代码
Nov 20 Javascript
如何构建一个Vue插件并生成npm包
Oct 26 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/01/23 PHP
PHP区块查询实现方法分析
2018/05/12 PHP
JavaScript 的方法重载效果
2009/08/07 Javascript
动感效果的TAB选项卡jquery 插件
2011/07/09 Javascript
Javascript简单实现可拖动的div
2013/10/22 Javascript
配置Grunt的Task时通配符支持和动态生成文件名问题
2015/09/06 Javascript
js调用webservice构造SOAP进行身份验证
2016/04/27 Javascript
JavaScript解八皇后问题的方法总结
2016/06/12 Javascript
动态加载css方法实现和深入解析
2017/01/18 Javascript
JavaScript数据类型和变量_动力节点Java学院整理
2017/06/26 Javascript
jQuery选择器之属性过滤选择器详解
2017/09/28 jQuery
移动web开发之touch事件实例详解
2018/01/17 Javascript
利用Console来Debug的10个高级技巧汇总
2018/03/26 Javascript
jQuery模拟12306城市选择框功能简单实现方法示例
2018/08/13 jQuery
vue实现权限控制路由(vue-router 动态添加路由)
2019/11/04 Javascript
js实现幻灯片轮播图
2020/08/14 Javascript
Chrome插件开发系列一:弹窗终结者开发实战
2020/10/02 Javascript
[19:59]2014DOTA2国际邀请赛 IG战队纪录片
2014/08/07 DOTA
在Python的Django框架中包装视图函数
2015/07/20 Python
使用简单工厂模式来进行Python的设计模式编程
2016/03/01 Python
python开发利器之ulipad的使用实践
2017/03/16 Python
详解tensorflow载入数据的三种方式
2018/04/24 Python
python实现将读入的多维list转为一维list的方法
2018/06/28 Python
python保存二维数组到txt文件中的方法
2018/11/15 Python
CSS3系列教程:背景图片(背景大小和多背景图) 应用说明
2012/12/19 HTML / CSS
漫威玩具服装及周边商品官方购物网站:Marvel Shop
2019/05/11 全球购物
节省高达65%的城市景点费用:Go City
2019/07/06 全球购物
照片礼物和装饰:MyPhoto
2019/11/02 全球购物
简述DNS进行域名解析的过程
2013/12/02 面试题
某科技软件测试面试题
2013/05/19 面试题
借款协议书
2014/04/12 职场文书
幼儿园端午节活动方案
2014/08/25 职场文书
政府个人对照检查材料思想汇报
2014/10/08 职场文书
商务司机岗位职责
2015/04/10 职场文书
68句权威创业名言
2019/08/26 职场文书
Python中如何处理常见报错
2022/01/18 Python