HighCharts饼图实例

jopen 10年前

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