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

cuisuqiang · 发表于 2013-1-29 08:46:03

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

动态柱状图实现

动态曲线实现

效果如下：

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

		自动登录	找回密码
密码			立即注册