文档章节

JQuery Flot Pie 饼图实现

streamlong
 streamlong
发布于 2017/06/13 15:28
字数 142
阅读 54
收藏 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 图表库

对于JQuery图表来说,其重要的功能是以一个简洁和交互的方式展示繁杂的原始数据。这并不仅仅以各种颜色来渲染展示数据,而应该是更能够吸引读者和方便用户理解。 稍后介绍的某些javascript图...

oschina
2013/12/07
15.5K
24
10 新鲜的 jQuery 插件(2012年1月)

1. jQuery UI Bootstrap 一个基于 Twitter Bootstrap 的 jQuery UI 主题 2. jqGrid 这是非常棒的jQuery 表格插件,在线演示:here. 3. Cloud Zoom Cloud Zoom 是一个小型的图像放大镜插件,放...

红薯
2012/02/01
4.8K
6
7 个你可能不知晓的 jQuery 插件

最近你一定注意了,jQuery 插件怎么那么多呢?这也不能怪我,人家就是多,且看着吧。 本文再来 7 个比较小众的插件,或许你不知晓。 Spin.js Spin.js 使用 CSS3 来生成如上图的界面,IE下使用...

红薯
2011/08/25
2.9K
6
10+ 个免费的 jQuery 交互式图形图表库

Interactive CSS3 & jQuery Graph Highcharts jqPlot Flot jQuery Sparklines TufteGraph JS Charts gRaphaël Google Chart Tools GraphUp – jQuery Plugin isoChart Source: http://desi......

oschina
2012/09/01
6.6K
11
Struts2 jQuery Plugin 3.0 的新特性

Struts2 jQuery Plugin 是一个 Struts2 的插件,用来提供 Ajax 功能和基于 jQuery 的 UI部件。最新发布的 3.0 版本包含很多新特性和改进哦。 主要有: 全新的树状列表标签 基于 jQuery jsTre...

红薯
2011/05/09
5K
7

没有更多内容

加载失败,请刷新页面

加载更多

使用 HostAliases 向 Pod /etc/hosts 文件添加条目

默认 hosts 文件内容 通过 HostAliases 增加额外的条目 限制 为什么 Kubelet 管理 hosts文件? 当 DNS 配置以及其它选项不合理的时候,通过向 Pod 的 /etc/hosts 文件中添加条目,可以在 Po...

xiaomin0322
37分钟前
2
0
阿里高级技术专家:研发效能的追求永无止境

背景 大约在5年前,也就是2013年我刚加入阿里的时候,那个时候 DevOps 的风刚吹起来没多久,有家公司宣称能够一天发布几十上百次,这意味着相比传统软件公司几周一次的发布来说,他们响应商业...

阿里云官方博客
40分钟前
1
0
阻止冒泡事件

1、event.isImmediatePropagationStopped() $("#id").click( function(event) { event.isImmediatePropagationStopped()}); 2、event.stopPropagation $("#id").click( function(even......

yan_liu
46分钟前
2
0
shell实例100例《二》

11、题目要求 写一个脚本实现如下功能: 输入一个数字,然后运行对应的一个命令。 显示命令如下: *cmd meau** 1 - date 2 - ls 3 - who 4 - pwd 当输入1时,会运行date, 输入2时运行ls, 以此...

寰宇01
50分钟前
0
0
CentOS开机自启SVN

安装好 svn 服务后,默认是没有随系统启动自动启动的, CentOS 7 的 /etc/rc.d/rc.local 是没有执行权限的, 系统建议创建 systemd service 启动服务 于是查看 systemd 里 svn 的配置文件 /l...

临江仙卜算子
今天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部