`
cuisuqiang
  • 浏览: 3934832 次
  • 性别: Icon_minigender_1
  • 来自: 北京
博客专栏
3feb66c0-2fb6-35ff-968a-5f5ec10ada43
Java研发技术指南
浏览量：3649616
社区版块
存档分类
最新评论

highcharts 高级应用—动态柱状图的实现

    博客分类：
  • JS
highchartsjs绘图动态绘图javascriptjquery 
阅读更多

废话不再多说！

 

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

 

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

 

看一下代码：

<%@ 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); 可是实现数据的重新指定！

在highcharts.js文件中你可以查看他的一些方法！

 

请您到ITEYE看我的原创：http://cuisuqiang.iteye.com

或支持我的个人博客，地址：http://www.javacui.com

 

分享到：
| highcharts 高级应用—动态曲线的实现
评论
2 楼 WenChao_Liu 2012-07-23  
如何在highcharts嵌入到dwz框架中呢？我在嵌入的时候出现一些问题
1 楼 jsyzthz08 2012-06-10  
您好，我想要绘制多条折线图不知道怎么做，我的数据都是从其他网站获取的json数据，就是不知道怎么动态加载这些数据。x轴的也是动态获取的。麻烦指点下，我不经常上iteye，麻烦发到我邮箱jsyzthz@gmail.com,谢谢！
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics