HighCharts餅圖實例

jopen 10年前發布 | 49K 次閱讀 圖表/報表制作 Highcharts

HighCharts官網


餅圖
    <!DOCTYPE HTML>  
    <html>  
        <head>  
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
            <title>餅圖</title>  

                <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>  
                <script src="js/highcharts.src.js"></script>  
                <script src="js/exporting.src.js"></script>  
        <script type="text/javascript">  
    $(function () {  
        $('#container').highcharts({  
            chart: {  
                plotBackgroundColor: null,  
                plotBorderWidth: null,  
                plotShadow: false  
            },  
            title: {  
                text: '2014瀏覽器市場份額'  
            },  
            tooltip: {  
                pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'  
            },  
            plotOptions: {  
                pie: {  
                    allowPointSelect: true,  
                    cursor: 'pointer',  
                    dataLabels: {  
                        enabled: true,  
                        format: '<b>{point.name}</b>: {point.percentage:.1f} %',  
                        style: {  
                            color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'  
                        }  
                    }  
                }  
            },  
            series: [{  
                type: 'pie',  
                name: 'Browser share',  
                data: [  
                    ['Firefox',   45.0],  
                    ['IE',       26.8],  
                    {  
                        name: 'Chrome',  
                        y: 12.8,  
                        sliced: true,  
                        selected: true  
                    },  
                    ['Safari',    8.5],  
                    ['Opera',     6.2],  
                    ['Others',   0.7]  
                ]  
            }]  
        });  
    });  


            </script>  
        </head>  
        <body>  


    <div id="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>  

        </body>  
    </html>
20140504111951031.png

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