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. slick对超过22个属性的表进行映射的两种办法

    版权声明:本文为博主原创文章,未经博主允许不得转载 slick是scala的一个FRM(Functional Relational Mapper)框架,即函数式的关系数据库编程工具库.使用slick不 ...

  2. My Calendar III

    class MyCalendarThree(object): """ Implement a MyCalendarThree class to store your ev ...

  3. Linux命令pmap

    jmap可以查看Java程序的堆内存使用情况,pmap可以查看Linux上运行的进程的内存使用情况. 查看Linux上运行的进程的内存使用情况,可以使用jmap,top,ps命令. top命令本身也比 ...

  4. 剑指offer得意之作——顺时针打印矩阵

    题目: 输入一个矩阵,按照从外向里以顺时针的顺序依次打印出每一个数字,例如,如果输入如下矩阵: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 则依次打印出数字1,2,3 ...

  5. 让我们一起摇摆 Turnipbit体感遥控车

    相信大家对Microbit是非常熟悉的,而今天我们做的这个小玩具所用的核心板是Turnipbit,是基于 Microbit开发的一块适合儿童适用的板卡.基本使用原理是一样的,这里就不多介绍了,代码这方 ...

  6. mysqldump 备份导出数据排除某张表

    就用 --ignore-table=dbname.tablename参数就行,可以忽略多个. /usr/bin/mysqldump -- -uroot -p123456 dbname --ignore ...

  7. 关于ruby -gem无法切换淘宝源

    ruby官网提供的 淘宝的gem源 不起作用 https://ruby.taobao.org/ taobao Gems 源已停止维护,现由 ruby-china 提供镜像服务 http://gems. ...

  8. Visual Studio 2017 Enterprise 发布 15.3.3 版，附离线安装包百度网盘下载。

    Visual Studio 2017 Enterprise 发布 15.3.3 版,附离线安装包百度网盘下载. Visual Studio 2017 Enterprise 更新至 15.3.3 ,本安 ...

  9. 使用nio对磁盘下的文件进行过滤

    上篇博文讲到为了解决tomcat日志自动清理的问题,翻看了tomcat-juli这个jar包.在FileHandler类下有一个利用nio完成对磁盘下过期文件进行过滤的功能实现,正好这段时间正在学习n ...

  10. Springmvc 中org.springframework.http.converter.json.MappingJackson2HttpMessageConverter依赖jackson包

    1,问题详情:Spring使用4.3.5.Release版本后 在SpringMvc配置文件中配置json 解析器后出现报错信息 [org.springframework.web.context.Co ...