当前位置: 代码迷 >> Web前端 >> highcharts 高级施用―动态饼图的实现
  详细解决方案

highcharts 高级施用―动态饼图的实现

热度:334   发布时间:2012-07-01 13:15:00.0
highcharts 高级应用―动态饼图的实现

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

?

动态柱状图实现

?

动态曲线实现

?

效果如下:

?

?

直接运行该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/?!

?

1 楼 023photon 2012-06-09  
截图功能后台Java代码能不能写个啊?
2 楼 cuisuqiang 2012-06-09  
023photon 写道
截图功能后台Java代码能不能写个啊?

这与当前内容无关吧!
3 楼 qqxiaodi 2012-06-20  
这个商用是收费的
4 楼 qqxiaodi 2012-06-20  
后台有生成图片的源码 上官网上下就可以了
5 楼 cuisuqiang 2012-06-20  
qqxiaodi 写道
后台有生成图片的源码 上官网上下就可以了

在JS里面改动一下可以把打印和生成图片按钮去掉,我已经去掉了
6 楼 cuisuqiang 2012-06-20  
qqxiaodi 写道
这个商用是收费的

没办法!