HighCharts之2D带有Legend的饼图

1、实例源码

PieLegend.html：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HighCharts 2D带有Legend的饼图</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: '#384778',
                 plotBorderWidth: '50px',
                 plotShadow: true
             },
             title: {
                 text: '2013年4月日收入明细'
             },
             tooltip: {
         	    pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
             },
             plotOptions: {
                 pie: {
                     allowPointSelect: true,
                     cursor: 'pointer',
                     dataLabels: {
                         enabled: true
                     },
                     showInLegend: true
                 }
             },
             series: [{
                 type: 'pie',
                 name: '日收入比率',
                 data: [
                     ['20130401', 45.0],
                     ['20130402', 26.8],
                     ['20130403', 56.3],
                     ['20130404', 74.1],
                     ['20130405', 45.0],
                     ['20130406', 26.8],
                     ['20130407', 56.4],
                     ['20130408', 84.1],
                     ['20130409', 55.0],
                     ['20130410', 56.8],
                     ['20130411', 64.8],
                     ['20130412', 63.2],
                     ['20130413', 64.8],
                     ['20130414', 63.2],
                     ['20130415', 64.8],
                     ['20130416', 45.2],
                     ['20130417', 68.8],
                     ['20130418', 63.2],
                     ['20130419', 24.8],
                     ['20130420', 53.2],
                     {
                         name: '20130421',
                         y: 27.8,
                         sliced: true,
                         selected: true
                     },
                     ['20130422', 63.2],
                     ['20130423', 64.8],
                     ['20130424', 63.2],
                     ['20130425', 64.8],
                     ['20130426', 45.2],
                     ['20130427', 68.8],
                     ['20130428', 63.2],
                     ['20130429', 24.8],
                     ['20130430', 98.8]
                 ]
             }]
         });
     });
</script>
</head>
<body>
   <div id="pieChart" style="width: 1250px; height: 500px; margin: 0 auto"></div>
</body>
</html>

2、实例结果

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

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

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

  2. HighCharts之2D饼图

    HighCharts之2D饼图 1. HighCharts之2D饼图源码 <!DOCTYPE html> <html> <head> <meta charse ...

  3. HighCharts之2D对数饼图

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

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

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

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

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

  6. HighCharts之2D堆条状图

    HighCharts之2D堆条状图 1.HighCharts之2D堆条状图源码 StackedBar.html: <!DOCTYPE html> <html> <head ...

  7. HighCharts之2D堆柱状图

    HighCharts之2D堆柱状图 1.HighCharts之2D堆柱状图源码 Stacked.html: <!DOCTYPE html> <html> <head> ...

  8. HighCharts之2D条状图

    HighCharts之2D条状图 1.HighCharts之2D条状图源码 bar.html: <!DOCTYPE html> <html> <head> < ...

  9. HighCharts之2D柱状图、折线图的组合多轴图

    HighCharts之2D柱状图.折线图的组合多轴图 1.实例源码 SomeAxis.html: <!DOCTYPE html> <html> <head> < ...

随机推荐

  1. mongodb进阶

    一.游标 先插入一张表的数据 for(i=0; i<100; i++) { db.c.insert({x : i}); } 定义一个游标 var cursor = db.c.find(); 以循 ...

  2. iOS-常用三方工具

    #菜单 pod 'LGSideMenuController' # 刷新 pod 'MJRefresh' # 网络请求 pod 'AFNetworking', '~> 3.0' # 图片缓存 po ...

  3. Spring-shiro源码陶冶-DefaultFilter

    阅读源码有助于陶冶情操,本文旨在简单的分析shiro在Spring中的使用 简单介绍 Shiro是一个强大易用的Java安全框架,提供了认证.授权.加密和会话管理等功能 Apache Shiro自带的 ...

  4. java线程池原理及实现方式

    线程池的定义 线程池是一种多线程处理形式,处理过程中将任务添加到队列,然后在创建线程后自动启动这些任务.线程池线程都是后台线程 为什么要使用线程池 1.减少在创建和销毁线程上所花的时间以及系统资源的开 ...

  5. StringBuffer和String需要注意的

    首先,StringBuffer的toString方法和String的subString方法都是在新生成了一个新的String. 最近做的一个功能,多线程的从SQLite数据库中读取数据.将数据拼成在M ...

  6. JVM学习(二)

    Java中的内存的划分可以用下图来表示: 程序计数器:每一个线程都有一个程序计数器,记录需要执行的下一条指令. HootSpot虚拟机中,不区分虚拟机栈和本地方法栈,统一称为栈.虚拟机栈和本地方法栈也 ...

  7. MySQL死锁[转]

    案例描述       在定时脚本运行过程中,发现当备份表格的sql语句与删除该表部分数据的sql语句同时运行时,mysql会检测出死锁,并打印出日志. 两个sql语句如下:       (1)inse ...

  8. 洛谷 [P3254] 圆桌问题

    简单最大流建图 #include <iostream> #include <cstdio> #include <cstring> #include <cmat ...

  9. BZOJ 4031: [HEOI2015]小Z的房间 [矩阵树定理 行列式取模]

    http://www.lydsy.com/JudgeOnline/problem.php?id=4031 裸题........ 问题在于模数是$10^9$ 我们发现消元的目的是让一个地方为0 辗转相除 ...

  10. 在ConcurrentModificationException异常上的联想

    1.什么是ConcurrentModificationException? 大家都听说过快速报错fast-fail吧,fast-fail的发生就是说明发生了ConcurrentModification ...