jquery flot pie画饼图

具体效果如下：

  1 <!DOCTYPE html>
  2 <html>
  3 <head>
  4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  5 <title>Insert title here</title>
  6 <script language="javascript" type="text/javascript" src="jquery.js"></script>
  7 <script language="javascript" type="text/javascript" src="jquery.flot.js"></script>
  8 <script language="javascript" type="text/javascript" src="jquery.flot.pie.js"></script>
  9
 10 <script type="text/javascript">
 11
 12     $(function(){
 13
 14         var data = [
 15             { label: "苹果",  data: 10},
 16             { label: "香蕉",  data: 30},
 17             { label: "西瓜",  data: 90},
 18             { label: "葡萄",  data: 70},
 19             { label: "柑橘",  data: 80},
 20             { label: "菠萝",  data: 110}
 21         ];
 22
 23         $.plot($("#pie1"), data, {
 24             series: {
 25                          pie: {
 26                                     show: true //显示饼图
 27                          }
 28             },
 29             legend: {
 30                         show: false //不显示图例
 31             }
 32         });
 33
 34         $.plot($("#pie2"), data, {
 35             series: {
 36                 pie: {
 37                     show: true //显示饼图
 38                 }
 39             }
 40
 41         });
 42
 43         $.plot($("#pie3"), data, {
 44             series: {
 45                 pie: {
 46                     show: true,
 47                     radius: 1, //半径
 48                     label: {
 49                         show: true,
 50                         radius: 2/3,
 51                         formatter: function(label, series){
 52                             return '<div style="font-size:8pt;text-align:center;padding:2px;color:white;">'+label+'<br/>'+Math.round(series.percent)+'%</div>';
 53                     },
 54                     threshold: 0.03  //这个值小于0.03，也就是3%时，label就会隐藏
 55                 }
 56             }
 57         },
 58         legend: {
 59             show: false
 60         }
 61     });
 62
 63
 64      $.plot($("#pie4"), data,
 65     {
 66         series: {
 67             pie: {
 68                 show: true
 69             }
 70         },
 71         grid: {
 72             hoverable: true,
 73             clickable: true
 74         }
 75     });
 76
 77     $("#pie4").bind("plothover", pieHover);
 78     $("#pie4").bind("plotclick", pieClick);
 79
 80
 81
 82
 83     });
 84
 85     function pieHover(event, pos, obj)
 86 {
 87     if (!obj)
 88                 return;
 89     percent = parseFloat(obj.series.percent).toFixed(2);
 90     $("#hover").html('<span style="font-weight: bold; color: '+obj.series.color+'">'+obj.series.label+' ('+percent+'%)</span>');
 91 }
 92
 93 function pieClick(event, pos, obj)
 94 {
 95     if (!obj)
 96                 return;
 97     percent = parseFloat(obj.series.percent).toFixed(2);
 98     alert(''+obj.series.label+': '+percent+'%');
 99 }
100
101
102
103
104
105 </script>
106
107 <style>
108 div.graph
109         {
110             width: 400px;
111             height: 300px;
112             border: 1px dashed gainsboro;
113         }
114
115 </style>
116
117
118
119
120 </head>
121 <body>
122
123
124 <h3>饼图1</h3>
125 <div id="pie1" class="graph" ></div>
126 <hr>
127
128 <h3>饼图2</h3>
129 <div id="pie2" class="graph" ></div>
130 <hr>
131
132 <h3>饼图3</h3>
133 <div id="pie3" class="graph" ></div>
134 <hr>
135
136 <h3>饼图4</h3>
137 <div id="pie4" class="graph" ></div>
138 <div id="hover"></div>
139 <hr>
140
141 </body>
142 </html>

文章转自：http://blog.csdn.net/u022812849/article/details/42525055

转载于:https://www.cnblogs.com/walblog/articles/8278620.html

jquery flot pie画饼图相关推荐

python脚本画pie饼图_python 使用matplotlib.pyplot.pie绘制饼图
一.饼图(Pie)介绍饼图广泛得应用在各个领域,用于表示不同分类的占比情况,通过弧度大小来对比各种分类.饼图通过将一个圆饼按照分类的占比划分成多个区块,整个圆饼代表数据的总量,每个区块(圆弧)表示该 ...
python画饼图-python使用Matplotlib画饼图
本文实例为大家分享了Android九宫格图片展示的具体代码,供大家参考,具体内容如下函数参数 plt.pie(x, explode=None, labels=None, colors=None, a ...
Python高效画饼图
简述帮助朋友来做一个画饼图的任务,给了一系列数据,然后画出饼图. 理论上来讲应该是很快速的,而且这个任务也很简单. 但是存在一些小的坑,总是需要我查找以前的做的东西,慢慢填上,耗费了一点时间. 这点 ...
python画饼图_百度飞桨PaddlePaddle之[Python小白逆袭大神]7天训练营
第三次参加百度的7天训练营了这次参加的主题是[Python小白逆袭大神],不过你别看是小白逆势...除非你一开始参加就逆袭完,不然你真的是python小白,这个课程还是有难难度的. 说一下个训练营的 ...
Matplotlib - 饼图、环形图 pie() 多重饼图 subplots() 所有用法详解
目录基本用法饼图中突出显示某部分环形图(空心饼图) 多重饼图,并添加分割线相较散点图和折线图,柱状图.饼图.箱线图是另外 3 种数据分析常用的图形,主要用于分析数据内部的分布状态或分散状态.饼 ...
R语言作图——Pie chart(饼图)
原创:黄小仙今天要给大家介绍的Pie chart(饼图),本来是不打算写这个的,因为用Excel画饼图实在是太方便了.本着能少动一下是一下的懒人原则,是不打算用R画的,再说,本小仙不是掌握了R作图大 ...
matlab饼图正圆,怎样用matlab画饼图
符号绘图函数; | ^/ A* E9 x' ~% c$ i9 B 符号函数简易绘图函数ezplot(f) 0 P0 U# L% @# L7 I8 p" tf可以包含单个符号变量x的字符串或表 ...
cytoscape画饼图
cytoscape画饼图数据准备绘制饼图数据准备首先要画饼图,自然是要有节点.以路径图进行举例说明. 要建网络,需要节点和边,cytoscape建网络时,可以在该软件中新建网络,手动输入节点和 ...
用Echarts2画饼图配置 itemStyle
首先去百度下载Echarts2,然后引入. 默认的案例够画饼图了,但是我为了去除饼图的指示线和指示名称,所以用了itemStyle. <script type="text/javasc ...

jquery flot pie画饼图

jquery flot pie画饼图相关推荐

最新文章

热门文章