JS highcharts动态柱状图原理及实现


Posted in Javascript onOctober 16, 2020

实现一个柱状图,这个柱状图的高度在不停的刷新,效果如下:

JS highcharts动态柱状图原理及实现

官网是没有动态刷新的示例的,由于需要我查看了其源码,并根据之前示例做出了动态柱状图的效果,希望对同学们有用!

看一下代码:

<%@ 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">
var chart;
$(document).ready(function() {
	chart = new Highcharts.Chart({
		chart: {
			renderTo: 'container',
			type: 'column',
			events: {
       load: function() {  
         // set up the updating of the chart each second
         var series = this.series[0];
         setInterval(function() {
          	 var data = [];
          	 data.push(['Apples', Math.random()]);
          	 data.push(['Oranges', Math.random()]);
          	 data.push(['Pears', Math.random()]);
          	 data.push(['Grapes', Math.random()]);
          	 data.push(['Bananas', Math.random()]);
           series.setData(data);
         }, 2000);
       }
     }
		},
		title: {
			text: '<b>Java小强制作</b>'
		},
		xAxis: {
			categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
		},
		yAxis: {
			min: 0,
			title: {
				text: '当前产值'
			},
			stackLabels: {
				enabled: true,
				style: {
					fontWeight: 'bold',
					color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
				}
			}
		},
		legend: {
			align: 'right',
			x: -100,
			verticalAlign: 'top',
			y: 20,
			floating: true,
			backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColorSolid) || 'white',
			borderColor: '#CCC',
			borderWidth: 1,
			shadow: false
		},
		tooltip: {
			formatter: function() {
				return '<b>'+ this.x +'</b><br/>'+
					this.series.name +': '+ this.y +'<br/>'+
					'Total: '+ this.point.stackTotal;
			}
		},
		plotOptions: {
			column: {
				stacking: 'normal',
				dataLabels: {
					enabled: true,
					color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
				}
			}
		},
		series: [{
			name: 'John',
			data: [5, 3, 4, 7, 2]
		}]
	});
});
</script>
	</head>
	<body>
<div id="container" style="width: 800px;height: 400px"></div>
	</body>
</html>

同样,绘制这个图需要的也是双维数组,我尝试了几个方法,使用 series.setData(data); 可是实现数据的重新指定!

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

Javascript 相关文章推荐
jQuery EasyUI API 中文文档 - Draggable 可拖拽
Sep 29 Javascript
css transform 3D幻灯片特效实现步骤解读
Mar 27 Javascript
JavaScript判断FileUpload控件上传文件类型
Sep 28 Javascript
AngularJS 表达式详解及实例代码
Sep 14 Javascript
js中获取 table节点各tr及td的内容简单实例
Oct 14 Javascript
bootstrap table表格使用方法详解
Apr 26 Javascript
jQuery实现图片简单轮播功能示例
Aug 13 jQuery
JavaScript变速动画函数封装添加任意多个属性
Apr 03 Javascript
js的继承方法小结(prototype、call、apply)(推荐)
Apr 17 Javascript
js实现小时钟效果
Mar 25 Javascript
详解Vue 的异常处理机制
Nov 30 Vue.js
Vue router安装及使用方法解析
Dec 02 Vue.js
如何手动实现一个 JavaScript 模块执行器
Oct 16 #Javascript
JS highcharts实现动态曲线代码示例
Oct 16 #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
You might like
php+oracle 分页类
2006/10/09 PHP
php中$_SERVER[PHP_SELF] 和 $_SERVER[SCRIPT_NAME]之间的区别
2009/09/05 PHP
PHP计划任务之关闭浏览器后仍然继续执行的函数
2010/07/22 PHP
PHP使用trim函数去除字符串左右空格及特殊字符实例
2016/01/07 PHP
php项目开发中用到的快速排序算法分析
2016/06/25 PHP
thinkPHP分组后模板无法加载问题解决方法
2016/07/12 PHP
php微信公众号开发模式详解
2016/11/28 PHP
PHP中TP5 上传文件的实例详解
2017/07/31 PHP
PHP实现登录注册之BootStrap表单功能
2017/09/03 PHP
javascript在一段文字中的光标处插入其他文字
2007/08/26 Javascript
javascript 自动填写表单的实现方法
2010/04/09 Javascript
jQuery ajax cache缓存问题
2010/07/01 Javascript
Jquery Validate 正则表达式实用验证代码大全
2013/08/23 Javascript
JavaScript测试工具之Karma-Jasmine的安装和使用详解
2015/12/03 Javascript
JS中this上下文对象使用方式
2016/10/09 Javascript
express文件上传中间件Multer详解
2016/10/24 Javascript
Bootstrap table表格简单操作
2017/02/07 Javascript
解决浏览器会自动填充密码的问题
2017/04/28 Javascript
js实现前面自动补全位数的方法
2018/10/10 Javascript
CKEditor 4.4.1 添加代码高亮显示插件功能教程【使用官方推荐Code Snippet插件】
2019/06/14 Javascript
python里对list中的整数求平均并排序
2014/09/12 Python
简单的Python抓taobao图片爬虫
2014/10/26 Python
python实现无证书加密解密实例
2014/10/27 Python
python单例模式的多种实现方法
2019/07/26 Python
Python字符串和正则表达式中的反斜杠('\')问题详解
2019/09/03 Python
Django实现CAS+OAuth2的方法示例
2019/10/30 Python
基于python的docx模块处理word和WPS的docx格式文件方式
2020/02/13 Python
python实现井字棋小游戏
2020/03/04 Python
pycharm如何使用anaconda中的各种包(操作步骤)
2020/07/31 Python
Fairyseason:为个人和批发商提供女装和配件
2017/03/01 全球购物
家得宝官网:The Home Depot(全球最大的家居装饰专业零售商)
2018/12/17 全球购物
后勤人员岗位职责
2013/12/17 职场文书
纪律教育学习心得体会
2014/09/02 职场文书
圣诞节开幕词
2015/01/29 职场文书
大学生自我鉴定怎么写
2019/05/07 职场文书
Python函数中apply、map、applymap的区别
2021/11/27 Python