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

cuisuqiang

浏览: 3962940 次
性别:
来自: 北京

最近访客更多访客>>

muerzi

lastsoul

njdccy

flymeqaqflyme

博主相关

博客

微博

相册

留言

关于我

博客专栏

: Java研发技术指南
浏览量：3672293

文章分类

社区版块

存档分类

博客分类：

highcharts js绘图动态绘图 javascript jquery

如果你已经看了前面的关于曲线和柱状图的实现，饼图你看看效果和代码就行了！

动态柱状图实现

动态曲线实现

效果如下：

直接运行该JSP，你会看到效果，代码如下：

<%@ 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',
			plotBackgroundColor: null,
			plotBorderWidth: null,
			plotShadow: false,
			events: {
              load: function() {
                  // set up the updating of the chart each second
                  var series = this.series[0];
                  setInterval(function() {
                   	  var data = [];
                   	  data.push(['Firefox', Math.random()]);
                   	  data.push(['IE', Math.random()]);
                   	  data.push(['Safari', Math.random()]);
                   	  data.push(['Opera', Math.random()]);
                   	  data.push(['Others', Math.random()]);
                      series.setData(data);
                  }, 2000);
              }
           }
		},
		title: {
			text: '<b>Java小强制作</b>'
		},
		tooltip: {
			formatter: function() {
				return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %';
			}
		},
		plotOptions: {
			pie: {
				allowPointSelect: true,
				cursor: 'pointer',
				dataLabels: {
					enabled: true,
					color: '#000000',
					connectorColor: '#000000',
					formatter: function() {
						return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %';
					}
				}
			}
		},
		series: [{
			type: 'pie',
			name: 'Browser share',
			data: [
				['Firefox',   45.8],
				['IE',       26.8],
				['Safari',    8.5],
				['Opera',     6.2],
				['Others',   12.7]
			]
		}]
	});
});
</script>
	</head>
	<body>
<div id="container" style="width: 800px;height: 400px"></div>
	</body>
</html>

废话不再多说！

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

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

分享到：

JS 自定义对象实现Java中的Map对象功能 | highcharts 高级应用—动态柱状图的实现

2012-06-08 15:16
浏览 15709
评论(8)
论坛回复 / 浏览 (0 / 5994)
分类:Web前端
查看更多

8 楼 cuisuqiang 2012-07-04

zhl0475 写道

很好的东西，可以不通过报表工具了，呵呵。谢谢分享！

很复杂的报表还是离不开报表工具的

7 楼 zhl0475 2012-07-04

很好的东西，可以不通过报表工具了，呵呵。谢谢分享！

6 楼 cuisuqiang 2012-06-20

qqxiaodi 写道

这个商用是收费的

没办法！

5 楼 cuisuqiang 2012-06-20

qqxiaodi 写道

后台有生成图片的源码上官网上下就可以了

在JS里面改动一下可以把打印和生成图片按钮去掉，我已经去掉了

4 楼 qqxiaodi 2012-06-20

后台有生成图片的源码上官网上下就可以了

3 楼 qqxiaodi 2012-06-20

这个商用是收费的

2 楼 cuisuqiang 2012-06-09

023photon 写道

截图功能后台Java代码能不能写个啊？

这与当前内容无关吧！

1 楼 023photon 2012-06-09