文档章节

JQuery Flot Pie 饼图实现

streamlong
 streamlong
发布于 2017/06/13 15:28
字数 142
阅读 48
收藏 0

JS导入

<script type="text/javascript" src="js/jQuery-2.1.4.min.js" ></script>
<script type="text/javascript" src="js/jquery.flot.min.js" ></script>
<script type="text/javascript" src="js/jquery.flot.pie.min.js" ></script>

JS代码

$(function() {
	var donutData = [
	     {label: "戒指", data: 10, color: "#EE82EE"},
		 {label: "项链", data: 20, color: "#FFF000"},
		 {label: "耳环", data: 30, color: "#00C0EF"}
	 ];    
		 	    
	 $.plot("#donut-chart", donutData, {
		series: {
			  pie: {
			 	   show: true,
			 }
		 },
		grid: {  
		          hoverable: true,  
		          clickable: true  
		 }
	 });
	 	    
	$("#donut-chart").bind("plothover", pieHover);  
	$("#donut-chart").bind("plotclick", pieClick);  
});
function pieHover(event, pos, obj)   
{  
	 if (!obj)  return;  
	 percent = parseFloat(obj.series.percent).toFixed(2);  
	 $("#hover").html('<span style="font-weight: bold; color: '+obj.series.color+'">'+obj.series.label+' ('+percent+'%)</span>');  
}  
function pieClick(event, pos, obj)   
{  
	if (!obj)  return;  
	percent = parseFloat(obj.series.percent).toFixed(2);  
        alert(''+obj.series.label+': '+percent+'%');  
}  

HTML代码

<body>
	<div id="donut-chart" style="height: 300px;"></div>
	<div id="hover"></div>  
</body>

效果图

输入图片说明

© 著作权归作者所有

共有 人打赏支持
streamlong

streamlong

粉丝 21
博文 45
码字总数 16725
作品 0
杭州
私信 提问
jquery常用的插件1000收集

花N长时间积累的Jquery插件,希望大家喜欢。大家还有什么新的插件,请留言,我们一并收录。 感谢大家的支持。 1.accordion类 基于jQuery开发,非常简单的水平方向折叠控件。 Horizontal acc...

Alic
2011/03/07
0
6
推荐一个很棒的JS绘图库Flot

Flot是Ole Laursen开发的基于JQuery的纯JavaScript实现的绘图库,Flot使用起来非常简单,绘图效果相当绚丽,而且还支持一些图片的操作功能,例如图片的缩放。可以看一下Flot的demo: 绘制上面...

五味格子
2011/05/11
0
0
从零实现一个简易的jQuery框架之二—核心思路详解

如何读源码 整体框架甚是复杂,也不易读懂。但是若想要在前端的路上走得更远、更好,研究分析前端的框架无疑是进阶路上必经之路。但是庞大的源码往往让我们不知道从何处开始下手。在很长的时...

余大彬
08/08
0
0
2011年12月最新JQuery插件汇总

jQuery的工具提示插件 Tipped jQuery表格插件 colResizable jQuery虚拟键盘插件 jQuery keyboard Minimit Gallery 用于显示相册、幻灯片、卷帘等效果 jQuery 幻灯效果显示插件 Diapo jQuery...

晨曦之光
2012/02/24
0
0
50个实用的JavaScript工具

JavaScript是一个功能强大的客户端脚本语言,许多现代化的网站和Web应用程序都会使用到它。JavaScript可以增强用户的体验,并提供丰富的互动式组件和功能。虽然它的语法相当简单,但是对开发...

晨曦之光
2012/03/09
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Nginx/Apache/PHP Hidden Version Number

nginx隐藏版本号的方法 在nginx配置文件nginx.conf中,加入以下代码: server_tokens off; apache隐藏版本号的方法 在apache配置文件httpd.conf中,加入以下代码: ServerTokens ProdServer...

Linux就该这么学
23分钟前
3
0
iOS 滚动视图 UIScrollView 代理方法 相关属性 状态栏 滚动条 回弹 弹簧效果

iOS 滚动视图 UIScrollView 代理方法 相关属性 状态栏 滚动条 回弹 弹簧效果 #import "ViewController.h"@interface ViewController () <span style="color:#ff0000;"><UIScrollViewDel......

壹峰
28分钟前
1
0
【转】Hive 工作原理详解

什么是Hive? Hive是建立在 Hadoop 上的数据仓库基础构架。它提供了一系列的工具,可以用来进行数据提取转化加载(ETL),这是一种可以存储、查询和分析存储在 Hadoop 中的大规模数据的机制。...

hnairdb
29分钟前
3
0
开源 java CMS - FreeCMS2.8 微信管理 公众号设置

项目地址:http://www.freeteam.cn/ 公众号设置 管理员可以在这里设置微信公众号的相关配置,每个站点都可设置自己的微信公众号。 其中接口URL需要配置在微信公众号中,如下图所示 App Key ...

freeteam
31分钟前
2
0
MySQL中 replace 函数应用

将以下字段中的【忻州】替换为【洛阳】 Sql语句如下 UPDATE sys_organization SET org_name = REPLACE(org_name,'忻州','洛阳'); 执行结果如下...

karma123
33分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部