HighCharts之2D饼图

1、 HighCharts之2D饼图源码

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HighCharts 2D饼图</title>
<script type="text/javascript" src="../scripts/jquery-1.11.0.js"></script>
<script type="text/javascript" src="../scripts/js/highcharts.js"></script>
<script type="text/javascript">
$(function(){
	 $('#pieChart').highcharts({
		 chart: {
	            plotBackgroundColor: null,
	            plotBorderWidth: null,
	            plotShadow: false
	        },
	        title: {
	            text: '2013年收入'
	        },
	        tooltip: {
	    	    pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
	        },
	        plotOptions: {
	            pie: {
	                allowPointSelect: true,
	                cursor: 'pointer',
	                dataLabels: {
	                    enabled: true,
	                    color: '#000000',
	                    connectorColor: '#000000',
	                    format: '<b>{point.name}</b>: {point.percentage:.1f} %'
	                }
	            }
	        },
	        series: [{
	            type: 'pie',
	            name: '月收入占比',
	            data: [
	                ['一月', 8956],
	                ['二月', 5612],
	                ['三月', 4515],
	                ['四月', 9565],
	                ['五月', 2356],
	                ['六月', 4512],
	                ['七月', 5623],
	                ['八月', 1245],
	                ['九月', 4578],
	                ['十月', 8754],
	                ['十一月',6231],
	                ['十二月',5124]
	            ]
	        }]
	    });
  });
</script>
</head>
<body>
   <div id="pieChart" style="width: 1200px; height: 500px; margin: 0 auto"></div>
</body>
</html>

2、运行结果

HighCharts之2D饼图的更多相关文章

  1. HighCharts之2D对数饼图

    HighCharts之2D对数饼图 1.实例源码 LogarithmicPie.html: <!DOCTYPE html> <html> <head> <me ...

  2. HighCharts之2D柱状图、折线图和饼图的组合图

    HighCharts之2D柱状图.折线图和饼图的组合图 1.实例源码 ColumnLinePie.html: <!DOCTYPE html> <html> <head&g ...

  3. HighCharts之2D带有Legend的饼图

    HighCharts之2D带有Legend的饼图 1.实例源码 PieLegend.html: <!DOCTYPE html> <html> <head> < ...

  4. HighCharts之2D颜色阶梯饼图

    HighCharts之2D颜色阶梯饼图 1.实例源码 PieGradient.html: <!DOCTYPE html> <html> <head> <met ...

  5. HighCharts之2D柱状图

    1.HighCharts之2D柱状图源码 column.html: <!DOCTYPE html> <html> <head> <meta charset=& ...

  6. HighCharts之2D数值带有百分数的面积图

    HighCharts之2D数值带有百分数的面积图 1.HighCharts之2D数值带有百分数的面积图源码 AreaPercentage.html: <!DOCTYPE html> < ...

  7. HighCharts之2D堆面积图

    HighCharts之2D堆面积图 1.HighCharts之2D堆面积图源码 StackedArea.html: <!DOCTYPE html> <html> <hea ...

  8. HighCharts之2D含有负值的面积图

    HighCharts之2D含有负值的面积图 1.HighCharts之2D含有负值的面积图源码 AreaNegative.html: <!DOCTYPE html> <html> ...

  9. HighCharts之2D带Label的折线图

    HighCharts之2D带Label的折线图 1.HighCharts之2D带Label的折线图源码 LineLabel.html: <!DOCTYPE html> <html&g ...

随机推荐

  1. Android Training Note

    版本适配 Tip:为了能在几个Android版本中都能提供最好的特性和功能,你应该在你的app中使用Android Support Library,它能使你的app能在旧平台上使用最近的几个平台的AP ...

  2. 【COOKIE 与 SESSION】

    一.相关概念 cookie的出现,解决http协议无状态特性 由于http协议无法保持状态,但实际情况,我们却又需要"保持状态",因此cookie就是在这样一个场景下诞生. 举例: ...

  3. 为PHP设置服务器(Apache/Nginx)环境变量

    为PHP设置服务器(Apache/Nginx)环境变量 设置环境变量常见的地方为区分开发环境/生产环境,或者定义一些数据库的帐号密码 设置Apache环境变量 指令 设置当前环境变量为DEV SetE ...

  4. MongoDB入门系列（三）：查询（SELECT）

    一.概述 mongodb是最接近关系型数据库的NOSQL数据库,它的存储方式非常的灵活:以至于你会将它看成是一个经过冗余过的关系型数据库的表,这也是Mongodb原子性的一个特征.由于没有关系型数据库 ...

  5. ASP.NET MVC 5 ABP DataTables （二）

    1)ABP DataTables 应用(一) 2)  ABP DataTables 应用(二) JS DataTables 这个组件绑定数据必须要有自己的返回数据格式.但是ABP返回的格式直接绑定是错 ...

  6. HBase Filter及对应Shell--转

    http://www.cnblogs.com/skyl/p/4807793.html 比较运算符 CompareFilter.CompareOp比较运算符用于定义比较关系,可以有以下几类值供选择: E ...

  7. Java8之Lambda表达式基础

    Java 8中,将会提供对lambda的支持,函数式编程FP(Functional Programming)将会得到很好地支持,而函数式编程的一个重要特点就是适合并行运算. λ:希腊字母表中排序第十一 ...

  8. bzoj 4830: [Hnoi2017]抛硬币 [范德蒙德卷积 扩展lucas]

    4830: [Hnoi2017]抛硬币 题意:A投a次硬币,B投b次硬币,a比b正面朝上次数多的方案数,模\(10^k\). \(b \le a \le b+10000 \le 10^{15}, k ...

  9. 01 Mybatis 的配置和使用

    一.Mybatis 是什么 MyBatis 是一个支持普通SQL查询.存储过程和高级映射的优秀持久层框架.MyBatis 消除了几乎所有的 JDBC 代码和参数的手工设置以及对结果集的检索封装.MyB ...

  10. 第三方页面嵌入到web项目的方案 之 使用iframe嵌入

    有些项目中可能会遇到这样的需求, 需要在一个项目中嵌入其他的项目的页面或者功能.并且需要这两个页面之间能够进行交互. 本文主要介绍如何实现这种第三方应用的嵌入, 主要有以下几个方向: 1.iframe ...