Highcharts之饼图 

 1 <!DOCTYPE html>
 2 <html>
 3 
 4     <head>
 5         <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 6         <title>Highcharts饼图举例</title>
 7         <style type="text/css"></style>
 8         <script src="js/jquery-3.2.1.min.js"></script>
 9         <script src="js/highcharts.js"></script>
10 
11     </head>
12 
13     <body>
14         <div id="container" style="width: 700px; height: 450px; margin: 0 auto"></div>
15         <script language="JavaScript">
16             Highcharts.chart('container', {
17                 chart: {
18                     plotBackgroundColor: null,
19                     plotBorderWidth: null,
20                     plotShadow: false,
21                     type: 'pie'
22                 },
23                 title: {
24                     text: '<b>浏览器市场占有率 January, 2015 to May, 2015</b>'
25                 },
26                 tooltip: {
27                     pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
28                 },
29                 plotOptions: {
30                     pie: {
31                         allowPointSelect: true,
32                         cursor: 'pointer',
33                         dataLabels: {
34                             enabled: true,
35                             format: '<b>{point.name}</b>: {point.percentage:.1f} %',
36                             style: {
37                                 color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
38                             }
39                         }
40                     }
41                 },
42                 series: [{
43                     name: '市场占有率',
44                     colorByPoint: true, //每种数据使用不同颜色展示
45                     data: [{
46                         name: '微软IE',
47                         y: 56.33
48                     }, {
49                         name: '谷歌Chrome',
50                         y: 24.03,
51                         sliced: true, //弹开
52                         selected: true //默认选中
53                     }, {
54                         name: '火狐Firefox',
55                         y: 10.38
56                     }, {
57                         name: '苹果Safari',
58                         y: 4.77
59                     }, {
60                         name: 'Opera',
61                         y: 0.91
62                     },{
63                         name: '其它浏览器',
64                         y: 0.2
65                     }]
66                 }]
67             });
68         </script>
69 
70     </body>
71 
72 </html>

 

运行截图：

 

posted @ 2017-07-24 00:26  星瑞  阅读(427)  评论(0)  编辑  收藏  举报