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 相关文章推荐
页面实时更新时间的JS实例代码
Dec 18 Javascript
JS生成随机字符串的多种方法
Jun 10 Javascript
node.js中的fs.truncate方法使用说明
Dec 15 Javascript
使用命令对象代替switch语句的写法示例
Feb 28 Javascript
JavaScript实现仿新浪微博大厅和腾讯微博首页滚动特效源码
Sep 15 Javascript
js实现简单的选项卡效果
Feb 23 Javascript
vue2.0实现分页组件的实例代码
Jun 22 Javascript
使用bootstraptable插件实现表格记录的查询、分页、排序操作
Aug 06 Javascript
Vue.js框架路由使用方法实例详解
Aug 25 Javascript
vue实现百度语音合成的实例讲解
Oct 14 Javascript
解决在Vue中使用axios用form表单出现的问题
Oct 30 Javascript
VUE 动态组件的应用案例分析
Dec 02 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
收集的二十一个实用便利的PHP函数代码
2010/04/22 PHP
那些年一起学习的PHP(二)
2012/03/21 PHP
php中替换字符串中的空格为逗号','的方法
2014/06/09 PHP
PHP中require和include路径问题详解
2014/12/25 PHP
PHP中file_get_contents函数抓取https地址出错的解决方法(两种方法)
2015/09/22 PHP
PHP链表操作简单示例
2016/10/15 PHP
thinkPHP中钩子的使用方法实例分析
2017/11/16 PHP
PHP使用OB缓存实现静态化功能示例
2019/03/23 PHP
在JavaScript中使用inline函数的问题
2007/03/08 Javascript
基础的prototype.js常用函数及其用法
2007/03/10 Javascript
JavaScript写的一个DIV 弹出网页对话框
2009/08/14 Javascript
Javascript在IE或Firefox下获取鼠标位置的代码
2009/12/18 Javascript
基于jquery的跟随屏幕滚动代码
2012/07/24 Javascript
JavaScript mapreduce工作原理简析
2012/11/25 Javascript
禁止空格提交表单的js代码
2013/11/17 Javascript
jquery1.10给新增元素绑定事件的方法
2014/03/06 Javascript
JavaScript中合并数组的N种方法
2014/09/16 Javascript
上传图片预览JS脚本 Input file图片预览的实现示例
2014/10/23 Javascript
Javascript中的call()方法介绍
2015/03/15 Javascript
javascript与Python快速排序实例对比
2015/08/10 Javascript
基于iscroll.js实现下拉刷新和上拉加载效果
2016/11/28 Javascript
xmlplus组件设计系列之树(Tree)(9)
2017/05/02 Javascript
bootstrap动态添加面包屑(breadcrumb)及其响应事件的方法
2017/05/25 Javascript
JavaScript之promise_动力节点Java学院整理
2017/07/03 Javascript
js实现无缝滚动双图切换效果
2019/07/09 Javascript
解决vue项目打包上服务器显示404错误,本地没出错的问题
2020/11/03 Javascript
Python中的并发处理之asyncio包使用的详解
2018/04/03 Python
python安装numpy和pandas的方法步骤
2019/05/27 Python
Python学习笔记之自定义函数用法详解
2019/06/08 Python
python实现自动化上线脚本的示例
2019/07/01 Python
Python函数必须先定义,后调用说明(函数调用函数例外)
2020/06/02 Python
美国孩之宝玩具官网:Hasbro Pulse
2019/06/24 全球购物
毕业生见习报告总结
2014/11/08 职场文书
中秋节寄语2015
2015/03/24 职场文书
对学校的意见和建议
2015/06/04 职场文书
2015年全民创业工作总结
2015/07/23 职场文书