文档章节

JQuery Flot Pie 饼图实现

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

粉丝 22
博文 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
50个实用的JavaScript工具

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

晨曦之光
2012/03/09
0
0
50个实用的JavaScript工具

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

晨曦之光
2012/03/09
0
0
从零实现一个简易的jQuery框架之二—核心思路详解

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

余大彬
08/08
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

ES6 Promise

Promise promise是异步编程的一种解决方案 1 什么是异步? 异步模式,每一个任务有一个或多个回调函数(callback),前一个任务结束后,不是执行后一个任务,而是执行回调函数,后一个任务则...

NDweb
26分钟前
0
0
Python百分登顶年度编程语言排行榜

今天 IEEE Spectrum 发布了 2018 年度顶级编程语言排行榜。该榜单可根据流行趋势、职业方向、语言类型等多个标准各自细分生成榜单,也可以综合多个标准进行排列,使用者可以根据自己的需求过...

六库科技
30分钟前
0
0
consul笔记

安装和启动就不说了,很简单。 注册一个服务: http://localhost:8500/v1/agent/service/register put请求,json格式内容如下 { "ID": "userServiceId", //服务id "Name": "userService", //服...

朝如青丝暮成雪
30分钟前
0
0
iOS CollectionView 的那些事

UICollectionView是开发中用的比较多的一个控件,本文记录UICollectionView在开发中常用的方法总结,包括使用UICollectionViewFlowLayout实现Grid布局、添加Header/Footer、自定义layout布局...

aron1992
31分钟前
0
0
linux tar.gz zip 解压缩 压缩命令

http://apps.hi.baidu.com/share/detail/37384818 download ADT link http://dl.google.com/android/ADT-0.9.6.zip download SDK link http://dl.google.com/Android/android-sdk_r11-linux_......

owensliu
33分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部