English | 正體中文 | 简体中文

圆饼图

绘制圆饼图需要用到一个Flot的插件程式 'jquery.flot.pie.js', 可以在Flot压缩档里找得到.
//记住 'jquery.flot.pien.js'必须在include 在'jquery.flot.js'之后才能正常运作
<script type="text/javascript" src="jquery.flot.js"></script>
<script type="text/javascript" src="jquery.flot.pien.js"></script>

基本的圆饼图

范例程式码Expand
<!-- HTML -->
<div id="example-section16">
    <div id="legendPlaceholder"></div>
    <div id="flotcontainer" style="width: 600px;height:200px; text-align: left;"></div>    
</div>


<!-- Javascript -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://www.pureexample.com/js/flot/excanvas.min.js"></script>
<script src="http://www.pureexample.com/js/flot/jquery.flot.min.js"></script>
<script src="http://www.pureexample.com/js/flot/jquery.flot.pie.min.js"></script>
<script type="text/javascript">
$(function () { 
    var data = [
        {label: "data1", data:10},
        {label: "data2", data: 20},
        {label: "data3", data: 30},
        {label: "data4", data: 40},
        {label: "data5", data: 50},
        {label: "data6", data: 60},
        {label: "data7", data: 70}
    ];

    var options = {
            series: {
                pie: {show: true}
		    }
         };

    $.plot($("#example-section16 #flotcontainer"), data, options);  
});
</script>
在线测试程序


不含图例的圆饼图

范例程式码Expand
<!-- HTML -->
<div id="example-section17">
    <div id="legendPlaceholder"></div>
    <div id="flotcontainer" style="width: 600px;height:400px; text-align: left;"></div>    
</div>


<!-- Javascript -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://www.pureexample.com/js/flot/excanvas.min.js"></script>
<script src="http://www.pureexample.com/js/flot/jquery.flot.min.js"></script>
<script src="http://www.pureexample.com/js/flot/jquery.flot.pie.min.js"></script>
<script type="text/javascript">
$(function () { 
    var data = [
        {label: "data1", data:10},
        {label: "data2", data: 20},
        {label: "data3", data: 30},
        {label: "data4", data: 40},
        {label: "data5", data: 50},
        {label: "data6", data: 60},
        {label: "data7", data: 70}
    ];

    var options = {
            series: {
                pie: {show: true}
		    },
            legend: {
                show: false
            }
         };

    $.plot($("#example-section17 #flotcontainer"), data, options);  
});
</script>
在线测试程序

含有透明图例的圆饼图

范例程式码Expand
<!-- HTML -->
<div id="example-section18">
    <div id="legendPlaceholder"></div>
    <div id="flotcontainer" style="width: 600px;height:400px; text-align: left;"></div>    
</div>


<!-- Javascript -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://www.pureexample.com/js/flot/excanvas.min.js"></script>
<script src="http://www.pureexample.com/js/flot/jquery.flot.min.js"></script>
<script src="http://www.pureexample.com/js/flot/jquery.flot.pie.min.js"></script>
<script type="text/javascript">
$(function () { 
    var data = [
        {label: "data1", data:10},
        {label: "data2", data: 20},
        {label: "data3", data: 30},
        {label: "data4", data: 40},
        {label: "data5", data: 50},
        {label: "data6", data: 60},
        {label: "data7", data: 70}
    ];

    var options = {
            series: {
                pie: {
                    show: true,
                    radius: 1,
                    tilt: 0.5,
                    label:{                        
                        radius: 3/4,
                        formatter: function (label, series) {
                            return '<div style="border:1px solid gray;font-size:8pt;text-align:center;padding:5px;color:white;">' + label + '<br/>' +   
                            Math.round(series.percent) + '%</div>';
                        },
                        background: {
                            opacity: 0.5,
                            color: '#000'
                        }
                    }
                }
		    },
            legend: {
                show: false
            }
         };

    $.plot($("#example-section18 #flotcontainer"), data, options);  
});
</script>
在线测试程序

互动式圆饼图(在圆饼图上移动你的滑鼠)
Hover percent :

范例程式码Expand
<!-- HTML -->
<div id="example-section19">
    <div>Hover percent : <span id="showInteractive"></span></div>
    <div id="flotcontainer" style="width: 600px;height:400px; text-align: left;"></div>    
</div>


<!-- Javascript -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://www.pureexample.com/js/flot/excanvas.min.js"></script>
<script src="http://www.pureexample.com/js/flot/jquery.flot.min.js"></script>
<script src="http://www.pureexample.com/js/flot/jquery.flot.pie.min.js"></script>
<script type="text/javascript">
$(function () { 
    var data = [
        {label: "data1", data:10},
        {label: "data2", data: 20},
        {label: "data3", data: 30},
        {label: "data4", data: 40},
        {label: "data5", data: 50},
        {label: "data6", data: 60},
        {label: "data7", data: 70}
    ];

    var options = {
            series: {
                pie: {
                    show: true,
                    radius: 1,
                    tilt: 0.5,
                    label:{                        
                        radius: 3/4,
                        formatter: function (label, series) {
                            return '<div style="border:1px solid gray;font-size:8pt;text-align:center;padding:5px;color:white;">' + label + '<br/>' +   
                            Math.round(series.percent) + '%</div>';
                        },
                        background: {
                            opacity: 0.5,
                            color: '#000'
                        }
                    }
                }
		    },
            legend: {
                show: false
            },
            grid: {
                hoverable: true,
                clickable: true
            }
         };

    $.plot($("#example-section19 #flotcontainer"), data, options);  

    $("#example-section19 #flotcontainer").bind("plothover", function(event, pos, obj){
        if (!obj){return;}
	    percent = parseFloat(obj.series.percent).toFixed(2);

        var html = [];
        html.push("<div style=\"flot:left;width:105px;height:20px;text-align:center;border:1px solid black;background-color:", obj.series.color, "\">",
                  "<span style=\"font-weight:bold;color:white\">", obj.series.label, " (", percent, "%)</span>",
                  "</div>");

	    $("#showInteractive").html(html.join(''));        
    });
});
</script>
在线测试程序



 
© 2012 PureExample.com contact