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

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/453682.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

研发管理：产品研发团队的早会

研发管理：产品研发团队的早会

百度百科定义:研发管理就是在研发体系结构设计和各种管理理论基础之上&#xff0c;借助信息平台对研发过程中进行的团队建设、流程设计、绩效管理、风险管理、成本管理、项目管理和知识管理等的一系列协调活动。[详细] 产品研发团队在履行各种产品研发过程中&#xff0c;从大的…
阅读更多...
mysql fetch rows_差异mysql_fetch_array()和mysql_fetch_rows()函数_mysql

mysql fetch rows_差异mysql_fetch_array()和mysql_fetch_rows()函数_mysql

区别mysql_fetch_array()和mysql_fetch_rows()函数form:http://www.uphtm.com/php/254.html如果我们不仔细看会发现象mysql_fetch_array()和mysql_fetch_rows()函数没有什么区别&#xff0c;但是细细的看你会发现它们区别还是蛮大了&#xff0c;如果各位对于此函数的区别不了解…
阅读更多...
Linux 状态命令之网络状态 iftop - 查看实时带宽流量

Linux 状态命令之网络状态 iftop - 查看实时带宽流量

简介 Linux 中查看网卡流量工具有 iptraf、iftop 以及 nethogs 等&#xff0c;iftop 可以用来监控网卡的实时流量(可以指定网段)、反向解析IP、显示端口信息等。 安装 CentOS yum 方式 # 安装依赖 yum install flex byacc libpcap ncurses ncurses-devel libpcap-develyum …
阅读更多...
Spring Boot 使用常见问题

Spring Boot 使用常见问题

Json格式化时间&#xff0c;时区设置 spring.jackson.time-zoneGMT8 spring.jackson.date-formatyyyy-MM-dd HH:mm:ss json数据无法序列化到RequestBody对象中 SpringMVC restful 注解之RequestBody进行json与object转换 转载于:https://www.cnblogs.com/tonyq/p/7890497.html
阅读更多...
Angular15 利用ng2-file-upload实现文件上传

Angular15 利用ng2-file-upload实现文件上传

待更新 转载于:https://www.cnblogs.com/NeverCtrl-C/p/8279246.html
阅读更多...
解读设计模式----简单工厂模式(SimpleFactory Pattern),你要什么我就给你什么

解读设计模式----简单工厂模式(SimpleFactory Pattern),你要什么我就给你什么

本文首发于博客园,地址:http://www.cnblogs.com/beniao/archive/2008/08/09/1263318.html 一、模式概述 从设计模式的类型上来说&#xff0c;简单工厂模式是属于创建型模式&#xff0c;又叫做静态工厂方法&#xff08;Static Factory Method&#xff09;模式&#xff0c;但不属…
阅读更多...
Memcached常用操作

Memcached常用操作

memcached是一个高性能的、分布式内存对象缓存系统&#xff0c;应用广泛。 通过缓存数据库查询结果&#xff0c;减少数据库访问次数&#xff0c;以提高动态Web应用的速度、 提高可扩展性。 它可以应对任意多个连接&#xff0c;使用非阻塞的网络IO。由于它的工作机制是在内存中开…
阅读更多...
android自定义金额输入键盘_Android 自定义控件 - 仿支付宝数字键盘

android自定义金额输入键盘_Android 自定义控件 - 仿支付宝数字键盘

原标题&#xff1a;Android 自定义控件 - 仿支付宝数字键盘简介在一些带有支付功能的 App 中&#xff0c;输入的密码一般只能是纯数字&#xff0c;虽然我们可以指定 EditText 输入框只能输入数字&#xff0c;但是为了提供用户的使用体验&#xff0c;我们往往更倾向于使用自定义…
阅读更多...
博客目录（python相关）

博客目录（python相关）

python 相关 文件格式相关系列 Python 第三方模块之 beautifulsoup&#xff08;bs4&#xff09;- 解析 HTML Python 第三方模块之 ElementTree&#xff08;ET&#xff09;- 解析XML文件 Python 第三方模块之 lxml - 解析 HTML 和 XML 文件 python 第三方模块 yaml - 处理 …
阅读更多...
项目主体思索

项目主体思索

1&#xff1a;分布式定义; 2&#xff1a;SSO集成方式 3&#xff1a;menu动态菜单的添加 4&#xff1a;tag页面展示; 5&#xff1a;tiles的jsp复用&#xff1b; 暂时就想到这些了&#xff0c;以后继续补充。转载于:https://www.cnblogs.com/siyan/p/8286738.html
阅读更多...
centos mysql pid_centos7 mysql The server quit without updating PID file（错误解决）

centos mysql pid_centos7 mysql The server quit without updating PID file（错误解决）

1 问题[rootlocalhost mysql]# /etc/rc.d/init.d/mysql statusMySQL is not running, but lock file (/var/lock/subsys/mysql[FAILED][rootlocalhost mysql]# /etc/rc.d/init.d/mysql startStarting MySQL...The server quit without updating PID file (/usr/local/mysql/dat…
阅读更多...
tfs文件系统之NS配置管理

tfs文件系统之NS配置管理

NameServer简称NS 充当着客户与DS的交互桥梁 1.NS配置文件修改&#xff1a; [public] #log file size default 1GB log_size1073741824 #log file num default 64 log_num 64 #log file level default debug log_leveldebug #main queue size default 10240 task_max_queue_…
阅读更多...
插件式架构设计实践：插件式系统架构设计简介

插件式架构设计实践：插件式系统架构设计简介

本系列博文将使用微软RIA技术解决方案Silverlight以及扩展性管理框架Managed Extensibility Framework&#xff08;MEF&#xff09;&#xff0c;以插件式架构设计为导线&#xff0c;分享本人在从事基于微软Silverlight技术构建的RIA系统中实施插件式系统架构设计的相关技术和经…
阅读更多...
第十章 动态选路协议

第十章 动态选路协议

RIP 缺陷&#xff1a; Routing Information Protocol RIP没有子网的概念在路由器或链路发生故障后&#xff0c;需要很长的一段时间才能稳定下来采用跳数作为路由度量忽略了其他一些应该考虑的因素度量最大值为15则限制了可以使用RIP的网络的大小OSPF Open Shortest Path First …
阅读更多...
五种方式让你在java中读取properties文件内容不再是难题

五种方式让你在java中读取properties文件内容不再是难题

2019独角兽企业重金招聘Python工程师标准>>> 方式1.通过context:property-placeholder加载配置文件jdbc.properties中的内容 <context:property-placeholder location"classpath:jdbc.properties" ignore-unresolvable"true"/> 上面的配置…
阅读更多...
hive metastore mysql_Hive MetaStore的结构

hive metastore mysql_Hive MetaStore的结构

本篇主要是介绍Hive在MySQL中存储的源数据的表结构。Hive MetaStore 数据库表结构图test.pngTBLS记录数据表的信息字段解释TBL_ID在hive中创建表的时候自动生成的一个id&#xff0c;用来表示&#xff0c;主键CREATE_TIME创建的数据表的时间&#xff0c;使用的是时间戳DBS_ID这个…
阅读更多...
修炼一名程序员的职业水准

修炼一名程序员的职业水准

程序就是一系列按步骤进行的操作序列&#xff0c;它有好多种级别&#xff0c;比如最低级的微程序、次低级的汇编程序、高级的各种编程语言程序、最高级的脚本语言程序&#xff0c;也许我列的不对&#xff0c;但没关系&#xff0c;我要说的是不管是那个级别的程序&#xff0c;其…
阅读更多...
Rails开发细节《一》

Rails开发细节《一》

常用命令 rails new new_app cd new_app rake db:create rails server rails generate controller Blog action1 action2 rails generate scaffold Product title:string description:textrails generate model Comment commenter:string body:text post:references rake db…
阅读更多...
latex中怎样使公式居中_LaTeX_多行公式对齐居中的同时选择性的加编号

latex中怎样使公式居中_LaTeX_多行公式对齐居中的同时选择性的加编号

标签： 【转载请注明出处】http://www.cnblogs.com/mashiqi 2016/10/20 一年多没写博文了。今天写一个短的，记录一下使用LaTeX的一些经验。 如何居中多行的公式呢？我试过很多种方法后，觉得下面这个最好用： 1 \begin{flalign*}2 % In this way (this arrange of &), the…
阅读更多...
[SDOI2008]Cave 洞穴勘测

[SDOI2008]Cave 洞穴勘测

题目描述 辉辉热衷于洞穴勘测。 某天&#xff0c;他按照地图来到了一片被标记为JSZX的洞穴群地区。经过初步勘测&#xff0c;辉辉发现这片区域由n个洞穴&#xff08;分别编号为1到n&#xff09;以及若干通道组成&#xff0c;并且每条通道连接了恰好两个洞穴。假如两个洞穴可以通…
阅读更多...
最新文章

Copyright @ 2022~2023