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. Asp.net mvc 下载文件

    前言 最近有需求需要下载文件,可能是image的图片,也可能是pdf报告,也可能是微软的word或者excel文件. 这里就整理了asp.net mvc 和asp.net webapi 下载的方法 A ...

  2. JasperReport报表开发(一)--原理介绍

    1. JasperReport介绍 JasperReport 是一个开源的Java报表引擎,它不像其他的报表工具,例如Crystal报表是基于Java的,没有自己的表达式语法.Jasper Repor ...

  3. JdbcTemplate的使用

    NamedParameterJdbcTemplate中包含了一个JdbcTemplate,NamedParameterJdbcTemplate中的很多方法实际上还是交由JdbcTemplate去完成. ...

  4. CF698C. LRU [容斥原理 概率]

    CF698C. LRU 题意:n种物品,大小为k的队列,\(p_i\)的概率选择第i种物品放入队尾,如果已经有i了就不放了.队列大小>k时弹出队首.求\(10^{100}\)次操作后每种物品在队 ...

  5. Azure Automation (5) 调整Azure SQL Database DTU

    <Windows Azure Platform 系列文章目录> 之前有客户提了需求,在9点以后,把Azure SQL Database DTU提高 在凌晨,把Azure SQL Datab ...

  6. 分布式服务dubbo使用

    SOA 服务框架dubbo 节点角色说明: Provider: 暴露服务的服务提供方. Consumer: 调用远程服务的服务消费方. Registry: 服务注册与发现的注册中心. Monitor: ...

  7. 解决PhpStorm卡顿的问题

    以前的开发一直使用phpstorm.可谓是情有独钟,但是发现随着开发phpStorm逐渐变得卡顿,也试过其他的编译器,但是都感觉没有PhpSrom好用,网上百度了一下,看到不一样的回答.只要修改两个J ...

  8. hdfs文件按修改时间下载

    应用于:对于不同用户创建的表目录,进行文件的下载,程序中执行hadoop cat命令 下载文件到本地,随后通过ftp传至目标服务器,并将hdfs文件目录的修改时间存入mysql中.每次修改前将mysq ...

  9. UITableView 的使用小点

    1.系统默认的颜色设置//无色 cell.selectionStyle = UITableViewCellSelectionStyleNone; //蓝色 cell.selectionStyle = ...

  10. 解决windows10和ubuntu16.04双系统下时间不对的问题

    电脑安装完windows10与ubuntu16.04双系统后,Ubuntu的时间总会和Windows的时间相差8小时,原因在于windows认为BIOS时间是本地时间,Ubuntu认为BIOS时间是U ...