| 注册
请输入搜索内容

热门搜索

Java Linux MySQL PHP JavaScript Hibernate jQuery Nginx
jopen
11年前发布

HighCharts饼图实例

HighCharts官网

http://www.highcharts.com/

饼图
    <!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 自行上传分享,仅供网友学习交流。所有权归原作者,若您的权利被侵害,请联系管理员。
 转载本站原创文章,请注明出处,并保留原始链接、图片水印。
 本站是一个以用户分享为主的开源技术平台,欢迎各类分享!
 本文地址:https://www.open-open.com/lib/view/open1411049291312.html
图表/报表制作 Highcharts