flotcharts 饼状图插件

来源：互联网发布：服装夹克衫用料的算法编辑：程序博客网时间：2024/06/06 03:32
<!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>
0 0