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. AppScan扫描结果分析及工具栏使用

    Appscan的窗口大概分三个模块,Application Links(应用链接), Security Issues(安全问题), and Analysis(分析) Application Links ...

  2. [DeeplearningAI笔记]ML strategy_2_1误差分析

    机器学习策略-误差分析 觉得有用的话,欢迎一起讨论相互学习~Follow Me 2.1 误差分析 训练出来的模型往往没有达到人类水平的效果,为了得到人类水平的结果,我们对原因进行分析,这个过程称为误差 ...

  3. Spring Boot-JPA

    前文我们使用SPRING INITIALIZR快速构建了一个空的Spring Boot项目,并增加web模块实现了HTTP请求. 这一篇继续在该demo的基础上,增加JPA的功能. JPA全称Java ...

  4. JAVA 调用 R 语言之升华篇

    由于项目的需要,最近做了一个javaWeb调用R的组件,在这里,我把自己走的一些弯路给大家总结一下: 一.选取什么插件作为java和R之间的通信? 1. 在传统的方式中,大致可以分为两类:一类是JRI ...

  5. 填坑：在 SegmentFault 开发单页应用之图片引用的问题探索

    前言 前段时间,SegmentFault 低调上线了 技术号 模块,方便用户对数据进行集中管理.在开发过程中,第一次引入了 MV* 框架. SF 的基本架构还是后端路由,这也使得页面频繁地整体请求,体 ...

  6. SPOJ DIVCNT2 [我也不知道是什么分类了反正是数论]

    SPOJ DIVCNT2 - Counting Divisors (square) 题意:求 \[ \sum_{i=1}^n\sigma_0(i^2) \] 好棒啊! 带着平方没法做,考虑用其他函数表 ...

  7. BZOJ 4034: [HAOI2015]树上操作 [欧拉序列 线段树]

    题意: 操作 1 :把某个节点 x 的点权增加 a . 操作 2 :把某个节点 x 为根的子树中所有点的点权都增加 a . 操作 3 :询问某个节点 x 到根的路径中所有点的点权和. 显然树链剖分可做 ...

  8. python实现时间o(1)的最小栈

    这是毕业校招二面时遇到的手写编程题,当时刚刚开始学习python,整个栈写下来也是费了不少时间.毕竟语言只是工具,只要想清楚实现,使用任何语言都能快速的写出来. 何为最小栈?栈最基础的操作是压栈(pu ...

  9. centos 7 配置 到多站点设置

    背景 : 前面配置了 win2008 WAMP环境, 这次因为一些事情 新买了服务器  只有 win2003 和 win2012, 试着配置2012 WAMP环境 发现比 2008 缺的配置文件多很多 ...

  10. python爬虫（1）——urllib包

    人生苦短,我用python! 一.关于爬虫 鉴于我的windos环境使用命令行感觉非常不便,也懒得折腾虚拟机,于是我选择了一个折中的办法--Cmder.它的下载地址是:cmder.net Cmder是 ...