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

更新时间：2020年10月16日 10:06:03 作者：cuisuqiang

这篇文章主要介绍了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下拉菜单功能实例代码
这篇文章主要介绍了JavaScript下拉菜单实例代码,非常不错，具有参考借鉴价值，需要的朋友可以参考下
2017-03-03
js实现移动端吸顶效果
这篇文章主要为大家详细介绍了js实现移动端吸顶效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-01-01
显示今天的日期js代码(阳历和农历)
这篇文章主要介绍了Js中显示日期和农历的代码，很简单，但很实用，有图片，需要的朋友可以参考下
2014-09-09
JS控制CSS样式的方法
JS控制CSS样式的方法...
2007-10-10
js实现验证码干扰（静态）
这篇文章主要为大家详细介绍了js实现验证码干扰，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-02-02
JS 中的 Event Loop 是什么你真的懂
Event Loop，简单翻译就是事件循环，是 JS 语言下实现运行时的一个机制，这篇文章主要介绍了JS 中的 Event Loop 的基本知识,需要的朋友可以参考下
2022-06-06
在JavaScript中使用for循环的方法
这篇文章主要介绍了如何在JavaScript中使用for循环,通过使用JavaScript for...in循环，我们可以循环对象的键或属性，在迭代对象属性或进行调试时，它可能很有用，但在迭代数组或对对象进行修改时，应该避免使用for...in循环，需要的朋友可以参考下
2022-11-11
微信小程序input、textarea层级过高穿透的问题解决
微信小程序原生组件camera、canvas、input、live-player、live、pusher、map、textarea、video的层级是最高的，那么如何解决微信小程序input、textarea层级过高穿透，本文就详细的介绍一下
2021-11-11
js中forEach的用法之forEach与for之间的区别
这篇文章主要介绍了js中forEach的用法之forEach与for之间的区别，forEach() 调用数组的每个元素，并将元素传递给回调函数，下面更多详细介绍需要的小伙伴可以参考一下
2022-03-03
JavaScript与jQuery中文档就绪函数的区别
这篇文章主要介绍了JavaScript与jQuery中文档就绪函数的区别，文章内容介绍详细，具有一的的参考价值，需要的小伙伴可以参考一下
2022-03-03