flotcharts 饼状图插件

最新推荐文章于 2024-05-17 02:07:51 发布

wang1369125334

最新推荐文章于 2024-05-17 02:07:51 发布

阅读量830

点赞数

分类专栏： js插件文章标签： foltcharts

本文链接：https://blog.csdn.net/wang1369125334/article/details/56672367

版权

js插件专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <style type="text/css">
    .demo-placeholder{
        width:500px;
        height:500px;
        magrin:auto;

    }
  </style>

  <title>Document</title>
 </head>
 <body>
<div id="placeholder" class="demo-placeholder"></div>



    <script language="javascript" type="text/javascript" src="./jquery.js"></script>
    <script language="javascript" type="text/javascript" src="./jquery.flot.js"></script>
    <script language="javascript" type="text/javascript" src="./jquery.flot.pie.js"></script>
    <script type="text/javascript">
    $(function(){


            var data = [],
            series = Math.floor(Math.random() * 6) + 3;

                    for (var i = 0; i < series; i++) {
                        data[i] = {
                            label: "Series" + (i + 1),
                            data: Math.floor(Math.random() * 100) + 1
                        }
                    }
        var data = [
            { label: "Series1",  data: 10},
            { label: "Series2",  data: 30},
            { label: "Series3",  data: 90},
            { label: "Series4",  data: 70},
            { label: "Series5",  data: 80},
            { label: "Series6",  data: 20}
        ];
        var data = [
            { label: "苹果",  data: [[1,10]]},
            { label: "香蕉",  data: [[1,30]]},
            { label: "橘子",  data: [[1,90]]},
            { label: "梨",  data: [[1,70]]},
            { label: "核桃",  data: [[1,80]]},
            { label: "其他",  data: [[1,20]]}
        ];

            $.plot($("#placeholder"), data, {
                series: {
                            pie: { 
                                show: true,
                                radius:0.8, //设置原形的半径，0-1是按比例，大于这是像素
                                innerRadius:0.2, //设置空心圆的半径
                                startAngle:0, //设置起始的角度
                                tilt:0.8, //圆的倾斜角度，会变成椭圆形
                                shadow:{   //设置阴影，只有在tilt不为1是有效果
                                    top:-5,
                                    left:-5,
                                    alpha:0.2
                                },
                                offset:{  //设置圆形图的偏移量，上下左右
                                    top:0,
                                    left:0
                                },
                                stroke:{   //设置边界和片之间的颜色和宽度
                                    color:"#00FF00",
                                    width:5
                                },
                                label:{   //设置提示标签
                                    show:true,
                                    radius:0.8,   //标签距离圆心的距离百分比
                                    threshold:0.01, //设置现在标签的最小百分比，小于他则不显示
                                    formatter:function labelFormatter(label, series) { //设置标签的内容
                                                            return "<div style='font-size:8pt; text-align:center; padding:2px; color:white;'>" + label + "<br/>" + Math.round(series.percent) + "%</div>";
                                                },
                                    background: { //设置标签的背景颜色
                                            //color:"#aa0000",
                                            opacity: 0.8  //透明度
                                        }

                                },
                                combine:{  //把小于指定比例的合并为一片，
                                    color:"#999",
                                    threshold:0.09,
                                    label:"其他所有"
                                },
                                highlight:{
                                    opacity:0.5
                                }


                            }
                    },
                grid: { //设置事件
                    hoverable: true,
                    clickable: true
                },
                legend: {
                        show: false
                    }
            });
                //设置事件
            $("#placeholder").bind("plothover", function(event, pos, obj) {

                if (!obj) {return;}

                var percent = parseFloat(obj.series.percent).toFixed(2);
                console.log($("#hover"));
                $("#hover").html("<span style='font-weight:bold; color:" + obj.series.color + "'>" + obj.series.label+"你还送发送是父" + " (" + percent + "%)</span>");
            });

            $("#placeholder").bind("plotclick", function(event, pos, obj) {

                if (!obj) {
                    return;
                }

                percent = parseFloat(obj.series.percent).toFixed(2);
                alert(""  + obj.series.label + ": " + percent + "%");
            });


        })

    </script>

 </body>
</html>

wang1369125334

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
flotcharts 饼状图插件

<!doctype html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Descr
复制链接

扫一扫

专栏目录