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 jqgrid 对含特殊字符json 数据的 Java 处理方法
Jan 01 Javascript
Jquery中getJSON在asp.net中的使用说明
Mar 10 Javascript
node.js中的fs.fchown方法使用说明
Dec 16 Javascript
2种jQuery 实现刮刮卡效果
Feb 01 Javascript
谈谈Jquery ajax中success和complete有哪些不同点
Nov 20 Javascript
浅析jQuery移动开发中内联按钮和分组按钮的编写
Dec 04 Javascript
解决JS无法调用Controller问题的方法
Dec 31 Javascript
理解Javascript图片预加载
Feb 23 Javascript
jQuery Pagination分页插件使用方法详解
Feb 28 Javascript
微信小程序多列选择器range-key使用详解
Mar 30 Javascript
VUE 使用中踩过的坑
Feb 08 Javascript
小程序开发基础之view视图容器
Aug 21 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 crypt()函数的用法讲解
2019/02/15 PHP
JavaScript获取GridView中用户点击控件的行号,列号
2009/04/14 Javascript
Jquery在IE7下无法使用 $.ajax解决方法
2009/11/11 Javascript
js中判断控件是否存在
2010/08/25 Javascript
js获取本机的外网/广域网ip地址完整源码
2013/08/12 Javascript
使用javascript实现页面定时跳转总结篇
2013/09/21 Javascript
javascript教程:关于if简写语句优化的方法
2014/05/17 Javascript
浅谈JavaScript function函数种类
2014/12/29 Javascript
JavaScript中的Math.LOG2E属性使用详解
2015/06/14 Javascript
Javascript简单改变表单元素背景的方法
2015/07/15 Javascript
JS中创建函数的三种方式及区别
2016/03/13 Javascript
AngularJS基础 ng-keypress 指令简单示例
2016/08/02 Javascript
JS关闭窗口时产生的事件及用法示例
2016/08/20 Javascript
jquery+Jscex打造游戏力度条
2020/09/12 Javascript
js实现控制textarea输入字符串的个数,鼠标按下抬起判断输入字符数
2016/10/25 Javascript
微信小程序 闭包写法详细介绍
2016/12/14 Javascript
JS实现的简易拖放效果示例
2016/12/29 Javascript
深入解析Vue 组件命名那些事
2017/07/18 Javascript
使用Bootrap和Vue实现仿百度搜索功能
2017/10/26 Javascript
[原创]jQuery实现合并/追加数组并去除重复项的方法
2018/04/11 jQuery
jQuery事件绑定和解绑、事件冒泡与阻止事件冒泡及弹出应用示例
2019/05/13 jQuery
JS前端知识点 运算符优先级,URL编码与解码,String,Math,arguments操作整理总结
2019/06/27 Javascript
Python中文件遍历的两种方法
2014/06/16 Python
Python的Django框架中消息通知的计数器实现教程
2016/06/13 Python
python批量实现Word文件转换为PDF文件
2018/03/15 Python
在django中图片上传的格式校验及大小方法
2019/07/28 Python
详解tf.device()指定tensorflow运行的GPU或CPU设备实现
2021/02/20 Python
美国真皮手袋品牌:GiGi New York
2017/03/10 全球购物
JD Sports比利时官网:英国领先的运动鞋和运动服饰零售商
2018/10/10 全球购物
英国礼品和生活方式品牌:Treat Republic
2020/11/21 全球购物
模具数控专业自荐信
2014/01/27 职场文书
党员个人对照检查材料
2014/10/01 职场文书
2014年幼儿园学期工作总结
2014/12/05 职场文书
交通事故和解协议书
2015/01/27 职场文书
幼儿园保育员随笔
2015/08/14 职场文书
如何用 Python 子进程关闭 Excel 自动化中的弹窗
2021/05/07 Python