软件开发|编程技术|编程代码|编程入门先学什么—程序设计语言

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

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