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. JAVA List根据字段排序以及取前几条数据

    1.经常会遇到对组装的list排序或提取list中前几条数据,例如: 根据时间排序: list.sort((o1, o2) -> o2.getCreateTime().compareTo(o1. ...

  2. python函数式编程之装饰器(一)

    1.开放封闭原则 简单来说,就是对扩展开放,对修改封闭 在面向对象的编程方式中,经常会定义各种函数. 一个函数的使用分为定义阶段和使用阶段,一个函数定义完成以后,可能会在很多位置被调用 这意味着如果函 ...

  3. appium+python环境搭建

    一.环境 1.安装python. 2.安装appium. 3.安装pip 4.安装selenium 5.安装Appium-Python-Client       #cmd->cd setupto ...

  4. HTTP/1.1与HTTP/1.0的区别[转]

    原文链接:http://blog.csdn.net/forgotaboutgirl/article/details/6936982 下面主要从几个不同的方面介绍HTTP/1.0与HTTP/1.1之间的 ...

  5. Java版网络爬虫基础

    网络爬虫不仅仅可以爬取网站的网页,图片,甚至可以实现抢票功能,网上抢购,机票查询等.这几天看了点基础,记录下来. 网页的关系可以看做是一张很大的图,图的遍历可以分为深度优先和广度优先.网络爬虫采取的广 ...

  6. NOIP2016提高组初赛（C++语言）试题 个人的胡乱分析

    最近在做历年的初赛题,那我捡几道比较有代表性的题说一下好了 原题可以在这里看:https://wenku.baidu.com/view/10c0eb7ce53a580217fcfede.html?fr ...

  7. 夏令营提高班上午上机测试 Day 3 解题报告

    今天的题的确水.T3还是一道NOIP原题. 嘛,多刷点水题也不是什么坏事嘛. 说来也快,夏令营结束了整一星期了呢.大家也都回到了日常的暑假生活呢. 今天学业水平测试出成绩了...嗯结果还算满意呢,至少 ...

  8. BZOJ 2653: middle [主席树 中位数]

    传送门 题意: 一个长度为n的序列a,设其排过序之后为b,其中位数定义为b[n/2],其中a,b从0开始标号,除法取下整.给你一个 长度为n的序列s.回答Q个这样的询问:s的左端点在[a,b]之间,右 ...

  9. SqlServer循环 和 批量倒数据

    SqlServer循环语句 declare @i int set @i =1 while(@i<5) begin  set @i = @i+1  insert into text(id,name ...

  10. C++数据结构学习之顺序表

    顺序表是数据结构中最基本也是应用相当广泛的一种数据结构类型.它通常包含三个私有成分,即指向数据数组的头指针.当前表长以及表的实际容量.表的头指针通常指向数据数组的基地址,通过数组的形式进行访问数据数组 ...