HighCharts之2D饼图

1、 HighCharts之2D饼图源码

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>HighCharts 2D饼图</title>
  6. <script type="text/javascript" src="../scripts/jquery-1.11.0.js"></script>
  7. <script type="text/javascript" src="../scripts/js/highcharts.js"></script>
  8. <script type="text/javascript">
  9. $(function(){
  10. 	 $('#pieChart').highcharts({
  11. 		 chart: {
  12. 	            plotBackgroundColor: null,
  13. 	            plotBorderWidth: null,
  14. 	            plotShadow: false
  15. 	        },
  16. 	        title: {
  17. 	            text: '2013年收入'
  18. 	        },
  19. 	        tooltip: {
  20. 	    	    pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
  21. 	        },
  22. 	        plotOptions: {
  23. 	            pie: {
  24. 	                allowPointSelect: true,
  25. 	                cursor: 'pointer',
  26. 	                dataLabels: {
  27. 	                    enabled: true,
  28. 	                    color: '#000000',
  29. 	                    connectorColor: '#000000',
  30. 	                    format: '<b>{point.name}</b>: {point.percentage:.1f} %'
  31. 	                }
  32. 	            }
  33. 	        },
  34. 	        series: [{
  35. 	            type: 'pie',
  36. 	            name: '月收入占比',
  37. 	            data: [
  38. 	                ['一月', 8956],
  39. 	                ['二月', 5612],
  40. 	                ['三月', 4515],
  41. 	                ['四月', 9565],
  42. 	                ['五月', 2356],
  43. 	                ['六月', 4512],
  44. 	                ['七月', 5623],
  45. 	                ['八月', 1245],
  46. 	                ['九月', 4578],
  47. 	                ['十月', 8754],
  48. 	                ['十一月',6231],
  49. 	                ['十二月',5124]
  50. 	            ]
  51. 	        }]
  52. 	    });
  53.   });
  54. </script>
  55. </head>
  56. <body>
  57.    <div id="pieChart" style="width: 1200px; height: 500px; margin: 0 auto"></div>
  58. </body>
  59. </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. AQS 框架之 Unsafe 源码详解

    ■ 前言 之前 LockSupport那篇已经叙述了是线程阻塞工具类,其底层由 Unsafe 实现,即 park(), unpark() 方法,获取指针偏移量,并操纵内存.本篇主要介绍 Unsafe ...

  2. c# 颜色RGB到HSB互相转换

    /// <summary> /// 色相,饱和度,亮度转换成rgb值 /// </summary> /// <returns></returns> pu ...

  3. javascript 中 dom.getAttribute("value") 与dom.value的差异

    dom 是一个 input type="text" 手动修改 input 的值, 使用 dom.getAttribute("value") 只能得到 html ...

  4. centos 编译安装net-snmp 5.6.2

    1.准备环境 yum -y install make gcc gcc-c++ gcc-g77 openssl openssl-devel 常用lib安装可参照本文 2.编译和安装 首先我们需要下载Ne ...

  5. CentOS下内存使用率查看

    freetotal        used        free      shared     buffers      cachedMem:        1815340     1628680 ...

  6. SpringMVC源码情操陶冶-HandlerAdapter适配器简析

    springmvc中对业务的具体处理是通过HandlerAdapter适配器操作的 HandlerAdapter接口方法 列表如下 /** * Given a handler instance, re ...

  7. 【OCR技术系列之四】基于深度学习的文字识别（3755个汉字）

    上一篇提到文字数据集的合成,现在我们手头上已经得到了3755个汉字(一级字库)的印刷体图像数据集,我们可以利用它们进行接下来的3755个汉字的识别系统的搭建.用深度学习做文字识别,用的网络当然是CNN ...

  8. hdu 5730 Shell Necklace [分治fft | 多项式求逆]

    hdu 5730 Shell Necklace 题意:求递推式\(f_n = \sum_{i=1}^n a_i f_{n-i}\),模313 多么优秀的模板题 可以用分治fft,也可以多项式求逆 分治 ...

  9. verilog实验3：AD转换后串口输出到PC端

    一.实验任务 通过tcl549AD转换芯片将模拟电压信号转换为数字信号,并通过串口显示到电脑上.此AD转换芯片为串行转换芯片,且转换速率要和串口选择的速率匹配.等待串口发送完后,再进行下一次AD转换. ...

  10. RabbitMQ 简单测试

    RabbitMQ 测试 RabbitMQ 基于Erlang 实现, 客户端可以用Python | Java | Ruby | PHP | C# | Javascript | Go等语言来实现.这里做个 ...