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

wang4674890

浏览: 89018 次
性别:
来自: 厦门

最近访客更多访客>>

yghxsdcxy

longxy520

tly_123

u010602808

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

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

博客分类：

java

javascript html jquery

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

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

<%@ 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文件中你可以查看他的一些方法！

分享到：

在Eclipse中启动JBoss 5.1时遇到这样的一 ... | highcharts 高级应用—动态曲线的实现

2012-06-29 02:21
浏览 2044
评论(0)
分类:Web前端
查看更多

发表评论

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

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

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

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

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

评论

发表评论

相关推荐

最小生成树之Kruskal算法

排序算法--插入排序

poi创建下拉框

Spring中Transactional配置

Hibernate将Enum枚举类型映射为Int类型 .

Hibernate 更灵活的用法 HibernateCallback

spring源代码分析（2）--BeanFactory

spring源代码分析(1)--Resource的分析

DefaultListableBeanFactory研究

jvm的内存调优

struts2中Action的name 和package的name和namespace是什么作用

深入探索 高效的Java异常处理框架

JAVA对ArrayList排序

ThreadPoolExecutor使用和思考(中)-keepAliveTime及拒绝策略

ThreadPoolExecutor使用和思考(上)-线程池大小设置与BlockingQueue的三种实现区别

Spring IOC之BeanFactory

Java5 并发学习

Spring对事务管理的支持的发展历程（基础篇

CXF ,在Client端用于把 Date 类型转换成 XMLGregorianCalendar .

《Spring技术内幕》学习笔记10——Web环境中Spring的启动过程

最近访客更多访客>>

深入探索高效的Java异常处理框架