利用 jquery flot pie 生成饼图

最新推荐文章于 2021-06-03 03:48:18 发布
最新推荐文章于 2021-06-03 03:48:18 发布
阅读量772 收藏
点赞数
分类专栏： jquery 文章标签： jquery
[javascript] view plain copy
  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>    
[javascript] view plain copy
  1. <p style="margin-top:0px; margin-bottom:10px; max-width:700px; color:rgb(51,51,51); font-family:'Helvetica Neue',Helvetica,Arial,sans-serif; font-size:13px; line-height:26px">具体效果如下：</p><img src="http://www.open-open.com/code/attached/image/20150114/20150114110729_41.png" alt="" style="border:0px; vertical-align:middle; max-width:640px; color:rgb(51,51,51); font-family:'Helvetica Neue',Helvetica,Arial,sans-serif; font-size:13px; line-height:26px">  
a伊雪
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
使用jQuery插件Flot,绘制饼图
正在加载
12-23 2187
1、使用前，引用需引用： 2、代码如下： $(window).load(function(){ drawPie(); }); var drawPie = function(){ $(function() { var testData = [88, 125, 200]; var data = [{ label
jquery 动态生成饼状比例图形
03-19
一款可以动态添加数据的（后台读取数据）自动生成饼状3D百分比图的详细实例，经过测试，直接可以拿来运用的，无需更改。
Flot画饼图
weixin_34319111的博客
04-03 78
源代码： 备注：前面的没有用的代码省～ &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt; &lt;title&gt;深海的小鱼编制-PLOT&lt;/title&gt; &lt;script language="javascript&quot
jquery 饼图_使用jQuery创建快速饼图
02-18 231
jquery 饼图 快速的jQuery代码片段使用迷你图js插件创建饼图。 快捷方便。 $.getScript('js/jquery.sparkline.min.js', function() { $('#sparklinesExample').html('1,2,3'); $('#sparklinesExample').sparkline('html', { type: 'pi...
jquery flot pie画饼图
morris
01-08 7502
具体效果如下： Insert title here $(function(){ var data = [ { label: "苹果", data: 10}, { label: "香蕉", data: 30}, { label: "西瓜", data: 90}, { label: "葡萄", data: 70}, { la
jquery flot 使用笔记
03-19
**jQuery Flot 使用笔记** jQuery Flot 是一个用于在网页上绘制高质量图形的开源库，它基于 jQuery，因此易于集成到任何使用 jQuery 的项目中。这个库提供了丰富的选项和插件，可以创建出各种各样的图表，包括折线...
flot_基于jQuery的插件
06-19
Flot提供了多种图表类型，包括折线图、柱状图、饼图以及面积图等，这些图表类型能够满足大部分数据可视化的基础需求。通过简单的配置选项，你可以定制图表的颜色、线条样式、标记点、轴的范围和刻度等，以达到理想的...
jquery绘图插件-flot
12-12
Flot支持多种图表类型，包括线条图（lines）、折线图（points）、柱状图（bars）以及饼图（pie）。每种图表都有不同的配置选项，可以通过设置`series`参数来调整。 **3. 数据格式** Flot接受两种基本的数据格式：...
JQuery Flot 统计图
01-13
它充分利用了 jQuery 框架的易用性和灵活性，使得开发者无需深入学习复杂的图形库就能创建出丰富的交互式图表。Flot 的核心特性包括支持多种图表类型（如折线图、柱状图、饼图等）、数据动态更新、自定义选项以及对...
jquery html5 图表用canvas绘制一个动画圆形饼图
09-08
jquery html5 图表用canvas绘制一个动画圆形饼图
Jquery根据table数据画折线图\柱状图\圆饼图
01-09
Jquery根据table数据画折线图\柱状图\圆饼图
jquery实现饼状图效果.rar
07-05
jquery实现饼状图效果
jquery饼状图效果
04-25
jquery饼状图效果
jQueryflot图表插件
04-18
1. **基本概念**：jQuery Flot是用纯JavaScript编写的，它可以生成线图、饼图、面积图、柱状图等多种图形。它支持实时数据更新，适合于动态展示数据变化的情况，如股票价格或者传感器读数。 2. **安装与引入**：...
jquery图表插件jqPlot实现饼状图
zhangqingi的专栏
11-04 8588
案例：         饼状图                      "http://www.w3.org/TR/html4/loose.dtd">    html lang="en">    head>    meta http-equiv="Content-Type" content="text/html; charset=utf-8">    title>饼状图demot
jq 饼状分析图
qq_34963461的博客
01-13 590
饼状分析图    网址    http://sc.chinaz.com/jiaoben/131119105360.htm
jquery饼图
qq_35578555的博客
03-14 798
具体效果如下： Insert title here $(function(){ var data = [ { label: "苹果", dat
html 圆圈图表插件,利用jquery html5实现图表动画圆形饼图
weixin_33557333的博客
06-03 218
特效描述：利用jquery html5实现 图表动画 圆形饼图。利用jquery html5实现图表动画圆形饼图代码结构1. 引入CSS2. 引入JS3. HTML代码*{margin:0;padding:0;list-style-type:none;}body{background:#fff;color:#333;font-family:"Trebuchet MS", Verdana, Aria...
jQuery 图表插件(jquery.flot.min.js)使用
最新发布
06-07
使用jQuery Flot，你可以轻松地绘制多种类型的图表，如线图、柱状图、饼图等。 下面是使用jQuery Flot插件创建简单线图的基本步骤： 1. 引入jQuery和jquery.flot.min.js文件 在HTML文件的标签中引入jQuery和...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值