利用 jquery flot pie 生成餅圖

jopen 9年前發布 | 8K 次閱讀 JavaScript jQuery 圖表

具體效果如下： 

    <!DOCTYPE html>

    <html>

    <head>

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <title>Insert title here</title>

    <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 = [  
            { label: "蘋果",  data: 10},  
            { label: "香蕉",  data: 30},  
            { label: "西瓜",  data: 90},  
            { label: "葡萄",  data: 70},  
            { label: "柑橘",  data: 80},  
            { label: "菠蘿",  data: 110}  
        ];  

        $.plot($("#pie1"), data, {  
            series: {  
                         pie: {   
                                    show: true //顯示餅圖  
                         }  
            },  
            legend: {  
                        show: false //不顯示圖例  
            }  
        });  

        $.plot($("#pie2"), data, {  
            series: {  
                pie: {   
                    show: true //顯示餅圖  
                }  
            }  

        });  

        $.plot($("#pie3"), data, {  
            series: {  
                pie: {   
                    show: true,  
                    radius: 1, //半徑  
                    label: {  
                        show: true,  
                        radius: 2/3,  
                        formatter: function(label, series){  
                            return '<div style="font-size:8pt;text-align:center;padding:2px;color:white;">'+label+'<br/>'+Math.round(series.percent)+'%</div>';  
                    },  
                    threshold: 0.03  //這個值小于0.03，也就是3%時，label就會隱藏  
                }  
            }  
        },  
        legend: {  
            show: false  
        }  
    });  


     $.plot($("#pie4"), data,   
    {  
        series: {  
            pie: {   
                show: true  
            }  
        },  
        grid: {  
            hoverable: true,  
            clickable: true  
        }  
    });  

    $("#pie4").bind("plothover", pieHover);  
    $("#pie4").bind("plotclick", pieClick);  




    });  

    function pieHover(event, pos, obj)   
{  
    if (!obj)  
                return;  
    percent = parseFloat(obj.series.percent).toFixed(2);  
    $("#hover").html('<span style="font-weight: bold; color: '+obj.series.color+'">'+obj.series.label+' ('+percent+'%)</span>');  
}  

function pieClick(event, pos, obj)   
{  
    if (!obj)  
                return;  
    percent = parseFloat(obj.series.percent).toFixed(2);  
    alert(''+obj.series.label+': '+percent+'%');  
}  





</script>  

<style>  
div.graph  
        {  
            width: 400px;  
            height: 300px;  
            border: 1px dashed gainsboro;  
        }  

</style>  




</head>  
<body>  


<h3>餅圖1</h3>  
<div id="pie1" class="graph" ></div>  
<hr>  

<h3>餅圖2</h3>  
<div id="pie2" class="graph" ></div>  
<hr>  

<h3>餅圖3</h3>  
<div id="pie3" class="graph" ></div>  
<hr>  

<h3>餅圖4</h3>  
<div id="pie4" class="graph" ></div>  
<div id="hover"></div>  
<hr>  

</body>  
</html>  </pre>
 本文由用戶 jopen 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
 轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！