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 相关文章推荐
论坛里点击别人帖子下面的回复,回复标题变成“回复 24# 的帖子”
Jun 14 Javascript
js传参数受特殊字符影响错误的解决方法
Oct 21 Javascript
js中split函数的使用方法说明
Dec 26 Javascript
jquery实现html页面 div 假分页有原理有代码
Sep 06 Javascript
JS中用三种方式实现导航菜单中的二级下拉菜单
Oct 31 Javascript
详解Bootstrap各式各样的按钮(推荐)
Dec 13 Javascript
URL中“#” “?” &amp;“”号的作用浅析
Feb 04 Javascript
解决html input验证只能输入数字,不能输入其他的问题
Jul 21 Javascript
Postman如何实现参数化执行及断言处理
Jul 28 Javascript
vue中watch和computed的区别与使用方法
Aug 23 Javascript
ant-design表单处理和常用方法及自定义验证操作
Oct 27 Javascript
【js设计模式】SOLID五大设计原则
Mar 24 Javascript
如何手动实现一个 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
destoon实现公司新闻详细页添加评论功能的方法
2014/07/15 PHP
PHP图片处理之使用imagecopyresampled函数实现图片缩放例子
2014/11/19 PHP
jQuery powerFloat万能浮动层下拉层插件使用介绍
2010/12/27 Javascript
jquery 圆形旋转图片滚动切换效果
2011/01/19 Javascript
jQuery+.net实现浏览更多内容(改编php版本)
2013/03/28 Javascript
如何判断鼠标是否在DIV的区域内
2013/11/13 Javascript
JS去除字符串两端空格的简单实例
2013/12/27 Javascript
jQuery中Dom的基本操作小结
2014/01/23 Javascript
动态读取JSON解析键值对的方法
2014/06/03 Javascript
JavaScript与HTML的结合方法详解
2015/11/23 Javascript
浅谈Nodejs应用主文件index.js
2016/08/28 NodeJs
jQuery实现元素的插入
2017/02/27 Javascript
Node学习记录之cluster模块
2017/05/31 Javascript
VueJs里利用CryptoJs实现加密及解密的方法示例
2019/04/29 Javascript
Vue侦测相关api的实现方法
2019/05/22 Javascript
部署vue+Springboot前后端分离项目的步骤实现
2020/05/31 Javascript
微信小程序实现拨打电话功能的示例代码
2020/06/28 Javascript
Webpack5正式发布,有哪些新特性
2020/10/12 Javascript
vue动态合并单元格并添加小计合计功能示例
2020/11/26 Vue.js
[02:43]2014DOTA2国际邀请赛 官方Alliance战队纪录片
2014/07/14 DOTA
Django1.7+python 2.78+pycharm配置mysql数据库
2016/10/09 Python
对Django中的权限和分组管理实例讲解
2019/08/16 Python
详解在Python中以绝对路径或者相对路径导入文件的方法
2019/08/30 Python
TensorFlow实现模型断点训练,checkpoint模型载入方式
2020/05/26 Python
任意一块网页内容实现“活”的背景(目前火狐浏览器专有)
2014/05/07 HTML / CSS
耐克奥地利官网:Nike奥地利
2019/08/16 全球购物
《我的信念》教学反思
2014/02/15 职场文书
法律进机关实施方案
2014/03/12 职场文书
金融事务专业求职信
2014/04/25 职场文书
护校行动方案
2014/05/31 职场文书
党员专题组织生活会发言材料
2014/10/17 职场文书
2014年食堂工作总结
2014/11/20 职场文书
2015年项目经理工作总结
2015/04/30 职场文书
爱国主义主题班会
2015/08/14 职场文书
linux中nohup和后台运行进程查看及终止
2021/06/24 Python
MySQL运行报错:“Expression #1 of SELECT list is not in GROUP BY clause and contains nonaggre”解决方法
2022/06/14 MySQL