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

最新推荐文章于 2024-06-23 13:00:46 发布

java小强

最新推荐文章于 2024-06-23 13:00:46 发布

阅读量681

点赞数

分类专栏： JS 文章标签： highcharts js绘图动态绘图 javascript jquery ViewUI

JS 专栏收录该内容

32 篇文章 0 订阅

订阅专栏

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

动态柱状图实现

动态曲线实现

效果如下：

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

java小强

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
highcharts 高级应用—动态饼图的实现

如果你已经看了前面的关于曲线和柱状图的实现，饼图你看看效果和代码就行了！动态柱状图实现动态曲线实现效果如下：直接运行该JSP，你会看到效果，代码如下：&lt;%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%&gt;&lt;html&gt; &lt;head...
复制链接

扫一扫

专栏目录