JS，统计图表大全－－三、饼形图（饼图及环形图）

三、饼形图（饼图及环形图）

HTML参考

<!DOCTYPE HTML>
<html><head><meta charset="utf-8"><link rel="icon" href="https://jscdn.com.cn/highcharts/images/favicon.ico"><meta name="viewport" content="width=device-width, initial-scale=1"><style>/* css 代码  */</style><script src="https://code.highcharts.com.cn/highcharts/highcharts.js"></script><script src="https://code.highcharts.com.cn/highcharts/modules/exporting.js"></script><script src="https://img.hcharts.cn/highcharts-plugins/highcharts-zh_CN.js"></script></head><body><div id="container" style="min-width:400px;height:400px"></div><script>// JS 代码 </script></body>
</html>

1、基础饼图

Highcharts.chart('container', {chart: {plotBackgroundColor: null,plotBorderWidth: null,plotShadow: false,type: 'pie'},title: {text: '2018年1月浏览器市场份额'},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: [{name: 'Brands',colorByPoint: true,data: [{name: 'Chrome',y: 61.41,sliced: true,selected: true}, {name: 'Internet Explorer',y: 11.84}, {name: 'Firefox',y: 10.85}, {name: 'Edge',y: 4.67}, {name: 'Safari',y: 4.18}, {name: 'Sogou Explorer',y: 1.64}, {name: 'Opera',y: 1.6}, {name: 'QQ',y: 1.2}, {name: 'Other',y: 2.61}]}]
});

2、基础饼图

option = {tooltip: {trigger: 'item',formatter: '{a} <br/>{b}: {c} ({d}%)'},legend: {orient: 'vertical',left: 10,data: ['直达', '营销广告', '搜索引擎', '邮件营销', '联盟广告', '视频广告', '百度', '谷歌', '必应', '其他']},series: [{name: '访问来源',type: 'pie',selectedMode: 'single',radius: [0, '30%'],label: {position: 'inner'},labelLine: {show: false},data: [{value: 335, name: '直达', selected: true},{value: 679, name: '营销广告'},{value: 1548, name: '搜索引擎'}]},{name: '访问来源',type: 'pie',radius: ['40%', '55%'],label: {formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ',backgroundColor: '#eee',borderColor: '#aaa',borderWidth: 1,borderRadius: 4,// shadowBlur:3,// shadowOffsetX: 2,// shadowOffsetY: 2,// shadowColor: '#999',// padding: [0, 7],rich: {a: {color: '#999',lineHeight: 22,align: 'center'},// abg: {//     backgroundColor: '#333',//     width: '100%',//     align: 'right',//     height: 22,//     borderRadius: [4, 4, 0, 0]// },hr: {borderColor: '#aaa',width: '100%',borderWidth: 0.5,height: 0},b: {fontSize: 16,lineHeight: 33},per: {color: '#eee',backgroundColor: '#334455',padding: [2, 4],borderRadius: 2}}},data: [{value: 335, name: '直达'},{value: 310, name: '邮件营销'},{value: 234, name: '联盟广告'},{value: 135, name: '视频广告'},{value: 1048, name: '百度'},{value: 251, name: '谷歌'},{value: 147, name: '必应'},{value: 102, name: '其他'}]}]
};

3、包含图例的饼图

// Build the chart
Highcharts.chart('container', {chart: {plotBackgroundColor: null,plotBorderWidth: null,plotShadow: false,type: 'pie'},title: {text: '2018 年浏览器市场份额'},tooltip: {pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'},plotOptions: {pie: {allowPointSelect: true,cursor: 'pointer',dataLabels: {enabled: false},showInLegend: true}},series: [{name: 'Brands',colorByPoint: true,data: [{name: 'Chrome',y: 61.41,sliced: true,selected: true}, {name: 'Internet Explorer',y: 11.84}, {name: 'Firefox',y: 10.85}, {name: 'Edge',y: 4.67}, {name: 'Safari',y: 4.18}, {name: 'Other',y: 7.05}]}]
});

4、旭日图

Highcharts.setOptions({lang: {thousandsSep: ','}
});
var data = [{'id': '0.0','parent': '','name': 'The World'
}, {'id': '1.3','parent': '0.0','name': '亚洲'
}, {'id': '1.1','parent': '0.0','name': '非洲'
}, {'id': '1.2','parent': '0.0','name': '美洲'
}, {'id': '1.4','parent': '0.0','name': '欧洲'
}, {'id': '1.5','parent': '0.0','name': '大洋洲'
},/* Africa */
{'id': '2.1','parent': '1.1','name': '东非'
},{'id': '3.1','parent': '2.1','name': '埃塞俄比亚','value': 104957438
}, {'id': '3.2','parent': '2.1','name': '坦桑尼亚','value': 57310019
}, {'id': '3.3','parent': '2.1','name': '肯尼亚','value': 49699862
}, {'id': '3.4','parent': '2.1','name': '乌干达','value': 42862958
}, {'id': '3.5','parent': '2.1','name': '莫桑比克','value': 29668834
}, {'id': '3.6','parent': '2.1','name': '马达加斯加岛','value': 25570895
}, {'id': '3.7','parent': '2.1','name': '马拉维','value': 18622104
}, {'id': '3.8','parent': '2.1','name': '赞比亚','value': 17094130
}, {'id': '3.9','parent': '2.1','name': '津巴布韦','value': 16529904
}, {'id': '3.10','parent': '2.1','name': '索马里','value': 14742523
}, {'id': '3.11','parent': '2.1','name': '南苏丹','value': 12575714
}, {'id': '3.12','parent': '2.1','name': '卢旺达','value': 12208407
}, {'id': '3.13','parent': '2.1','name': '布隆迪','value': 10864245
}, {'id': '3.14','parent': '2.1','name': '厄立特里亚国','value': 5068831
}, {'id': '3.15','parent': '2.1','name': '毛里求斯','value': 1265138
}, {'id': '3.16','parent': '2.1','name': '吉布提','value': 956985
}, {'id': '3.17','parent': '2.1','name': '留尼汪岛','value': 876562
}, {'id': '3.18','parent': '2.1','name': '科摩罗','value': 813912
}, {'id': '3.19','parent': '2.1','name': '马约特岛','value': 253045
}, {'id': '3.20','parent': '2.1','name': '塞舌尔群岛','value': 94737
},{'id': '2.5','parent': '1.1','name': '西非'
},{'id': '3.42','parent': '2.5','name': '尼日利亚','value': 190886311
}, {'id': '3.43','parent': '2.5','name': '加纳','value': 28833629
}, {'id': '3.44','parent': '2.5','name': '科特迪瓦共和国','value': 24294750
}, {'id': '3.45','parent': '2.5','name': '尼日尔','value': 21477348
}, {'id': '3.46','parent': '2.5','name': '布基纳法索','value': 19193382
}, {'id': '3.47','parent': '2.5','name': '马里','value': 18541980
}, {'id': '3.48','parent': '2.5','name': '塞内加尔','value': 15850567
}, {'id': '3.49','parent': '2.5','name': '几内亚共和国','value': 12717176
}, {'id': '3.50','parent': '2.5','name': '贝宁','value': 11175692
}, {'id': '3.51','parent': '2.5','name': '多哥','value': 7797694
}, {'id': '3.52','parent': '2.5','name': '塞拉利昂','value': 7557212
}, {'id': '3.53','parent': '2.5','name': '利比里亚','value': 4731906
}, {'id': '3.54','parent': '2.5','name': '毛里塔尼亚','value': 4420184
}, {'id': '3.55','parent': '2.5','name': 'The Gambia','value': 2100568
}, {'id': '3.56','parent': '2.5','name': 'Guinea-Bissau','value': 1861283
}, {'id': '3.57','parent': '2.5','name': 'Cabo Verde','value': 546388
}, {'id': '3.58','parent': '2.5','name': 'Saint Helena, Ascension and Tristan da Cunha','value': 4049
},{'id': '2.3','parent': '1.1','name': '北非'
},{'id': '3.30','parent': '2.3','name': 'Egypt','value': 97553151
}, {'id': '3.31','parent': '2.3','name': 'Algeria','value': 41318142
}, {'id': '3.32','parent': '2.3','name': 'Sudan','value': 40533330
}, {'id': '3.33','parent': '2.3','name': 'Morocco','value': 35739580
}, {'id': '3.34','parent': '2.3','name': 'Tunisia','value': 11532127
}, {'id': '3.35','parent': '2.3','name': 'Libya','value': 6374616
}, {'id': '3.36','parent': '2.3','name': 'Western Sahara','value': 552628
},{'id': '2.2','parent': '1.1','name': 'Central Africa'
},{'id': '3.21','parent': '2.2','name': 'Democratic Republic of the Congo','value': 81339988
}, {'id': '3.22','parent': '2.2','name': 'Angola','value': 29784193
}, {'id': '3.23','parent': '2.2','name': 'Cameroon','value': 24053727
}, {'id': '3.24','parent': '2.2','name': 'Chad','value': 14899994
}, {'id': '3.25','parent': '2.2','name': 'Congo','value': 5260750
}, {'id': '3.26','parent': '2.2','name': 'Central African Republic','value': 4659080
}, {'id': '3.27','parent': '2.2','name': 'Gabon','value': 2025137
}, {'id': '3.28','parent': '2.2','name': 'Equatorial Guinea','value': 1267689
}, {'id': '3.29','parent': '2.2','name': 'Sao Tome and Principe','value': 204327
},{'id': '2.4','parent': '1.1','name': '南美洲'
},{'id': '3.37','parent': '2.4','name': '南非','value': 56717156
}, {'id': '3.38','parent': '2.4','name': 'Namibia','value': 2533794
}, {'id': '3.39','parent': '2.4','name': 'Botswana','value': 2291661
}, {'id': '3.40','parent': '2.4','name': 'Lesotho','value': 2233339
}, {'id': '3.41','parent': '2.4','name': 'Swaziland','value': 1367254
},/***********//* America */
{'id': '2.9','parent': '1.2','name': '南美洲'
},{'id': '3.98','parent': '2.9','name': 'Brazil','value': 209288278
}, {'id': '3.99','parent': '2.9','name': 'Colombia','value': 49065615
}, {'id': '3.100','parent': '2.9','name': 'Argentina','value': 44271041
}, {'id': '3.101','parent': '2.9','name': 'Peru','value': 32165485
}, {'id': '3.102','parent': '2.9','name': 'Venezuela','value': 31977065
}, {'id': '3.103','parent': '2.9','name': 'Chile','value': 18054726
}, {'id': '3.104','parent': '2.9','name': 'Ecuador','value': 16624858
}, {'id': '3.105','parent': '2.9','name': 'Bolivia','value': 11051600
}, {'id': '3.106','parent': '2.9','name': 'Paraguay','value': 6811297
}, {'id': '3.107','parent': '2.9','name': 'Uruguay','value': 3456750
}, {'id': '3.108','parent': '2.9','name': 'Guyana','value': 777859
}, {'id': '3.109','parent': '2.9','name': 'Suriname','value': 563402
}, {'id': '3.110','parent': '2.9','name': 'French Guiana','value': 282731
}, {'id': '3.111','parent': '2.9','name': 'Falkland Islands','value': 2910
},{'id': '2.8','parent': '1.2','name': '北美洲'
},{'id': '3.93','parent': '2.8','name': '美国','value': 324459463
}, {'id': '3.94','parent': '2.8','name': '加拿大','value': 36624199
}, {'id': '3.95','parent': '2.8','name': '百慕大群岛','value': 61349
}, {'id': '3.96','parent': '2.8','name': '格陵兰','value': 56480
}, {'id': '3.97','parent': '2.8','name': 'Saint Pierre and Miquelon','value': 6320
},{'id': '2.7','parent': '1.2','name': '中美洲'
},{'id': '3.85','parent': '2.7','name': '墨西哥','value': 129163276
}, {'id': '3.86','parent': '2.7','name': '危地马拉','value': 16913503
}, {'id': '3.87','parent': '2.7','name': 'Honduras','value': 9265067
}, {'id': '3.88','parent': '2.7','name': 'El Salvador','value': 6377853
}, {'id': '3.89','parent': '2.7','name': 'Nicaragua','value': 6217581
}, {'id': '3.90','parent': '2.7','name': 'Costa Rica','value': 4905769
}, {'id': '3.91','parent': '2.7','name': 'Panama','value': 4098587
}, {'id': '3.92','parent': '2.7','name': 'Belize','value': 374681
},{'id': '2.6','parent': '1.2','name': 'Caribbean'
},{'id': '3.59','parent': '2.6','name': 'Cuba','value': 11484636
}, {'id': '3.60','parent': '2.6','name': 'Haiti','value': 10981229
}, {'id': '3.61','parent': '2.6','name': 'Dominican Republic','value': 10766998
}, {'id': '3.62','parent': '2.6','name': 'Puerto Rico','value': 3663131
}, {'id': '3.63','parent': '2.6','name': 'Jamaica','value': 2890299
}, {'id': '3.64','parent': '2.6','name': 'Trinidad and Tobago','value': 1369125
}, {'id': '3.65','parent': '2.6','name': 'Guadeloupe','value': 449568
}, {'id': '3.66','parent': '2.6','name': 'Bahamas','value': 395361
}, {'id': '3.67','parent': '2.6','name': 'Martinique','value': 384896
}, {'id': '3.68','parent': '2.6','name': 'Barbados','value': 285719
}, {'id': '3.69','parent': '2.6','name': 'Saint Lucia','value': 178844
}, {'id': '3.70','parent': '2.6','name': 'Curaçao','value': 160539
}, {'id': '3.71','parent': '2.6','name': 'Saint Vincent and the Grenadines','value': 109897
}, {'id': '3.72','parent': '2.6','name': 'Grenada','value': 107825
}, {'id': '3.73','parent': '2.6','name': 'Aruba','value': 105264
}, {'id': '3.74','parent': '2.6','name': 'United States Virgin Islands','value': 104901
}, {'id': '3.75','parent': '2.6','name': 'Antigua and Barbuda','value': 102012
}, {'id': '3.76','parent': '2.6','name': 'Dominica','value': 73925
}, {'id': '3.77','parent': '2.6','name': 'Cayman Islands','value': 61559
}, {'id': '3.78','parent': '2.6','name': 'Saint Kitts and Nevis','value': 55345
}, {'id': '3.79','parent': '2.6','name': 'Sint Maarten','value': 40120
}, {'id': '3.80','parent': '2.6','name': 'Turks and Caicos Islands','value': 35446
}, {'id': '3.81','parent': '2.6','name': 'British Virgin Islands','value': 31196
}, {'id': '3.82','parent': '2.6','name': 'Caribbean Netherlands','value': 25398
}, {'id': '3.83','parent': '2.6','name': 'Anguilla','value': 14909
}, {'id': '3.84','parent': '2.6','name': 'Montserrat','value': 5177
},
/***********//* Asia */
{'id': '2.13','parent': '1.3','name': '南亚'
},{'id': '3.136','parent': '2.13','name': '印度','value': 1339180127
}, {'id': '3.137','parent': '2.13','name': '巴基斯坦','value': 197015955
}, {'id': '3.138','parent': '2.13','name': '孟加拉国','value': 164669751
}, {'id': '3.139','parent': '2.13','name': '伊朗','value': 81162788
}, {'id': '3.140','parent': '2.13','name': '阿富汗','value': 35530081
}, {'id': '3.141','parent': '2.13','name': '尼泊尔','value': 29304998
}, {'id': '3.142','parent': '2.13','name': '斯里兰卡','value': 20876917
}, {'id': '3.143','parent': '2.13','name': '不丹','value': 807610
}, {'id': '3.144','parent': '2.13','name': '马尔代夫','value': 436330
},{'id': '2.11','parent': '1.3','name': '东亚'
},{'id': '3.117','parent': '2.11','name': '中国','value': 1409517397 + 622567 + 7364883 +23626456
}, {'id': '3.118','parent': '2.11','name': '日本','value': 127484450
}, {'id': '3.119','parent': '2.11','name': '南韩','value': 50982212
}, {'id': '3.120','parent': '2.11','name': '朝鲜','value': 25490965
}, /*{'id': '3.121','parent': '2.11','name': '台湾省（中国）','value': 23626456
}, {'id': '3.122','parent': '2.11','name': '香港特别行政区（中国）','value': 7364883
}, */{'id': '3.123','parent': '2.11','name': '蒙古','value': 3075647
}, /*{'id': '3.124','parent': '2.11','name': '澳门特别行政区（中国）','value': 622567
},*/{'id': '2.12','parent': '1.3','name': '东南亚'
},{'id': '3.125','parent': '2.12','name': '印尼','value': 263991379
}, {'id': '3.126','parent': '2.12','name': '菲律宾','value': 104918090
}, {'id': '3.127','parent': '2.12','name': '越南','value': 95540800
}, {'id': '3.128','parent': '2.12','name': '泰国','value': 69037513
}, {'id': '3.129','parent': '2.12','name': '缅甸','value': 53370609
}, {'id': '3.130','parent': '2.12','name': '马来西亚','value': 31624264
}, {'id': '3.131','parent': '2.12','name': '柬埔寨','value': 16005373
}, {'id': '3.132','parent': '2.12','name': '老挝','value': 6858160
}, {'id': '3.133','parent': '2.12','name': '新加坡','value': 5708844
}, {'id': '3.134','parent': '2.12','name': '东帝汶民主共和国','value': 1296311
}, {'id': '3.135','parent': '2.12','name': '文莱','value': 428697// 'color': ''
},{'id': '2.14','parent': '1.3','name': '西亚'
},{'id': '3.145','parent': '2.14','name': '土耳其','value': 80745020
}, {'id': '3.146','parent': '2.14','name': '伊拉克','value': 38274618
}, {'id': '3.147','parent': '2.14','name': '沙特阿拉伯','value': 32938213
}, {'id': '3.148','parent': '2.14','name': '也门','value': 28250420
}, {'id': '3.149','parent': '2.14','name': '叙利亚','value': 18269868
}, {'id': '3.150','parent': '2.14','name': '阿塞拜疆','value': 9827589
}, {'id': '3.151','parent': '2.14','name': '约旦','value': 9702353
}, {'id': '3.152','parent': '2.14','name': '阿拉伯联合酋长国','value': 9400145
}, {'id': '3.153','parent': '2.14','name': '以色列','value': 8321570
}, {'id': '3.154','parent': '2.14','name': '黎巴嫩','value': 6082357
}, {'id': '3.155','parent': '2.14','name': '勒斯坦','value': 4920724
}, {'id': '3.156','parent': '2.14','name': '阿曼','value': 4636262
}, {'id': '3.157','parent': '2.14','name': '科威特','value': 4136528
}, {'id': '3.158','parent': '2.14','name': '乔治亚州','value': 3912061
}, {'id': '3.159','parent': '2.14','name': '美尼亚','value': 2930450
}, {'id': '3.160','parent': '2.14','name': '卡塔尔','value': 2639211
}, {'id': '3.161','parent': '2.14','name': '巴林王国','value': 1492584
},{'id': '2.10','parent': '1.3','name': '中亚'
},{'id': '3.112','parent': '2.10','name': '乌兹别克斯坦','value': 31910641
}, {'id': '3.113','parent': '2.10','name': '哈萨克斯坦','value': 18204499
}, {'id': '3.114','parent': '2.10','name': '塔吉克斯坦','value': 8921343
}, {'id': '3.115','parent': '2.10','name': '吉尔吉斯斯坦','value': 6045117
}, {'id': '3.116','parent': '2.10','name': '土库曼斯坦','value': 5758075
},
/***********//* Europe */
{'id': '2.15','parent': '1.4','name': '东欧'
},{'id': '3.162','parent': '2.15','name': '俄罗斯','value': 143989754
}, {'id': '3.163','parent': '2.15','name': '乌克兰','value': 44222947
}, {'id': '3.164','parent': '2.15','name': '波兰','value': 38170712
}, {'id': '3.165','parent': '2.15','name': '罗马尼亚','value': 19679306
}, {'id': '3.166','parent': '2.15','name': '捷克','value': 10618303
}, {'id': '3.167','parent': '2.15','name': '匈牙利','value': 9721559
}, {'id': '3.168','parent': '2.15','name': '白俄罗斯','value': 9468338
}, {'id': '3.169','parent': '2.15','name': '保加利亚','value': 7084571
}, {'id': '3.170','parent': '2.15','name': '斯洛伐克','value': 5447662
}, {'id': '3.171','parent': '2.15','name': '摩尔多瓦','value': 4051212
}, {'id': '3.172','parent': '2.15','name': '塞浦路斯','value': 1179551
},{'id': '2.16','parent': '1.4','name': '北欧'
},{'id': '3.173','parent': '2.16','name': '英国','value': 66181585
}, {'id': '3.174','parent': '2.16','name': '瑞典','value': 9910701
}, {'id': '3.175','parent': '2.16','name': '丹麦','value': 5733551
}, {'id': '3.176','parent': '2.16','name': '芬兰','value': 5523231
}, {'id': '3.177','parent': '2.16','name': '挪威','value': 5305383
}, {'id': '3.178','parent': '2.16','name': '爱尔兰','value': 4761657
}, {'id': '3.179','parent': '2.16','name': '立陶宛','value': 2890297
}, {'id': '3.180','parent': '2.16','name': '拉脱维亚','value': 1949670
}, {'id': '3.181','parent': '2.16','name': '爱沙尼亚','value': 1309632
}, {'id': '3.182','parent': '2.16','name': '冰岛','value': 335025
}, {'id': '3.183','parent': '2.16','name': 'Guernsey and  Jersey','value': 165314
}, {'id': '3.184','parent': '2.16','name': 'Isle of Man','value': 84287
}, {'id': '3.185','parent': '2.16','name': 'Faroe Islands','value': 49290
},{'id': '2.17','parent': '1.4','name': 'Southern Europe'
},{'id': '3.186','parent': '2.17','name': 'Italy','value': 59359900
}, {'id': '3.187','parent': '2.17','name': 'Spain','value': 46354321
}, {'id': '3.188','parent': '2.17','name': 'Greece','value': 11159773
}, {'id': '3.189','parent': '2.17','name': 'Portugal','value': 10329506
}, {'id': '3.190','parent': '2.17','name': 'Serbia','value': 8790574
}, {'id': '3.191','parent': '2.17','name': 'Croatia','value': 4189353
}, {'id': '3.192','parent': '2.17','name': 'Bosnia and Herzegovina','value': 3507017
}, {'id': '3.193','parent': '2.17','name': 'Albania','value': 2930187
}, {'id': '3.194','parent': '2.17','name': 'Republic of Macedonia','value': 2083160
}, {'id': '3.195','parent': '2.17','name': 'Slovenia','value': 2079976
}, {'id': '3.196','parent': '2.17','name': 'Montenegro','value': 628960
}, {'id': '3.197','parent': '2.17','name': 'Malta','value': 430835
}, {'id': '3.198','parent': '2.17','name': 'Andorra','value': 76965
}, {'id': '3.199','parent': '2.17','name': 'Gibraltar','value': 34571
}, {'id': '3.200','parent': '2.17','name': 'San Marino','value': 33400
}, {'id': '3.201','parent': '2.17','name': 'Vatican City','value': 792
},{'id': '2.18','parent': '1.4','name': 'Western Europe'
},{'id': '3.202','parent': '2.18','name': 'Germany','value': 82114224
}, {'id': '3.203','parent': '2.18','name': 'France','value': 64979548
}, {'id': '3.204','parent': '2.18','name': 'Netherlands','value': 17035938
}, {'id': '3.205','parent': '2.18','name': 'Belgium','value': 11429336
}, {'id': '3.206','parent': '2.18','name': 'Austria','value': 8735453
}, {'id': '3.207','parent': '2.18','name': 'Switzerland','value': 8476005
}, {'id': '3.208','parent': '2.18','name': 'Luxembourg','value': 583455
}, {'id': '3.209','parent': '2.18','name': 'Monaco','value': 38695
}, {'id': '3.210','parent': '2.18','name': 'Liechtenstein','value': 37922
},
/***********//* Oceania */
{'id': '2.19','parent': '1.5','name': 'Australia and New Zealand'
},{'id': '3.211','parent': '2.19','name': 'Australia','value': 24450561
}, {'id': '3.212','parent': '2.19','name': 'New Zealand','value': 4705818
},{'id': '2.20','parent': '1.5','name': 'Melanesia'
},{'id': '3.213','parent': '2.20','name': 'Papua New Guinea'
}, {'id': '3.214','parent': '2.20','name': 'Fiji','value': 905502
}, {'id': '3.215','parent': '2.20','name': 'Solomon Islands','value': 611343
}, {'id': '3.216','parent': '2.20','name': 'New Caledonia','value': 276255
}, {'id': '3.217','parent': '2.20','name': 'Vanuatu','value': 276244
},{'id': '2.21','parent': '1.5','name': 'Micronesia'
},{'id': '3.218','parent': '2.21','name': 'Guam','value': 164229
}, {'id': '3.219','parent': '2.21','name': 'Kiribati','value': 116398
}, {'id': '3.220','parent': '2.21','name': 'Federated States of Micronesia','value': 105544
}, {'id': '3.221','parent': '2.21','name': 'Northern Mariana Islands','value': 55144
}, {'id': '3.222','parent': '2.21','name': 'Marshall Islands','value': 53127
}, {'id': '3.223','parent': '2.21','name': 'Palau','value': 21729
}, {'id': '3.224','parent': '2.21','name': 'Nauru','value': 11359
},{'id': '2.22','parent': '1.5','name': 'Polynesia'
},{'id': '3.225','parent': '2.22','name': 'French Polynesia','value': 283007
}, {'id': '3.226','parent': '2.22','name': 'Samoa','value': 196440
}, {'id': '3.227','parent': '2.22','name': 'Tonga','value': 108020
}, {'id': '3.228','parent': '2.22','name': 'American Samoa','value': 55641
}, {'id': '3.229','parent': '2.22','name': 'Cook Islands','value': 17380
}, {'id': '3.230','parent': '2.22','name': 'Wallis and Futuna','value': 11773
}, {'id': '3.231','parent': '2.22','name': 'Tuvalu','value': 11192
}, {'id': '3.232','parent': '2.22','name': 'Niue','value': 1618
}, {'id': '3.233','parent': '2.22','name': 'Tokelau','value': 1300
}];// Splice in transparent for the center circle
Highcharts.getOptions().colors.splice(0, 0, 'transparent');Highcharts.chart('container', {chart: {height: '100%'},title: {text: '2017 世界人口分布'},subtitle: {text: '数据来源： <href="https://en.wikipedia.org/wiki/List_of_countries_by_population_(United_Nations)">Wikipedia</a>'},series: [{type: "sunburst",data: data,allowDrillToNode: true,cursor: 'pointer',dataLabels: {/*** A custom formatter that returns the name only if the inner arc* is longer than a certain pixel size, so the shape has place for* the label.*/formatter: function () {var shape = this.point.node.shapeArgs;var innerArcFraction = (shape.end - shape.start) / (2 * Math.PI);var perimeter = 2 * Math.PI * shape.innerR;var innerArcPixels = innerArcFraction * perimeter;if (innerArcPixels > 16) {return this.point.name;}}},levels: [{level: 2,colorByPoint: true,dataLabels: {rotationMode: 'parallel'}},{level: 3,colorVariation: {key: 'brightness',to: -0.5}}, {level: 4,colorVariation: {key: 'brightness',to: 0.5}}]}],tooltip: {headerFormat: "",pointFormat: '<b>{point.name}</b>的人口数量是：<b>{point.value}</b>'}
});

5、韦恩图

Highcharts.chart('container', {series: [{type: 'venn',name: 'The Unattainable Triangle',data: [{sets: ['Good'],value: 2}, {sets: ['Fast'],value: 2}, {sets: ['Cheap'],value: 2}, {sets: ['Good', 'Fast'],value: 1,name: 'More expensive'}, {sets: ['Good', 'Cheap'],value: 1,name: 'Will take time to deliver'}, {sets: ['Fast', 'Cheap'],value: 1,name: 'Not the best quality'}, {sets: ['Fast', 'Cheap', 'Good'],value: 1,name: 'They\'re dreaming'}]}],title: {text: 'The Unattainable Triangle'}
});

6、可变宽度的环形图

Highcharts.chart('container', {chart: {type: 'variablepie'},title: {text: '不同国家人口密度及面积对比'},subtitle: {text: '扇区长度（圆周方法）表示面积，宽度（纵向）表示人口密度'  },tooltip: {headerFormat: '',pointFormat: '<span style="color:{point.color}">\u25CF</span> <b> {point.name}</b><br/>' +'面积 (平方千米): <b>{point.y}</b><br/>' +'人口密度 (每平方千米人数): <b>{point.z}</b><br/>'},series: [{minPointSize: 10,innerSize: '20%',zMin: 0,name: 'countries',data: [{name: '西班牙',y: 505370,z: 92.9}, {name: '法国',y: 551500,z: 118.7}, {name: '波兰',y: 312685,z: 124.6}, {name: '捷克共和国',y: 78867,z: 137.5}, {name: '意大利',y: 301340,z: 201.8}, {name: '瑞士',y: 41277,z: 214.5}, {name: '德国',y: 357022,z: 235.6}]}]
});

HTML

<div id="container"></div>

7、扇形图

var chart = Highcharts.chart('container', {title: {text: '浏览器<br>占比',align: 'center',verticalAlign: 'middle',y: 50},tooltip: {headerFormat: '{series.name}<br>',pointFormat: '{point.name}: <b>{point.percentage:.1f}%</b>'},plotOptions: {pie: {dataLabels: {enabled: true,distance: -50,style: {fontWeight: 'bold',color: 'white',textShadow: '0px 1px 2px black'}},startAngle: -90, // 圆环的开始角度endAngle: 90,    // 圆环的结束角度center: ['50%', '75%']}},series: [{type: 'pie',name: '浏览器占比',innerSize: '50%',data: [['Firefox',   45.0],['IE',       26.8],['Chrome', 12.8],['Safari',    8.5],['Opera',     6.2],{name: '其他',y: 0.7,dataLabels: {// 数据比较少，没有空间显示数据标签，所以将其关闭enabled: false}}]}]
});

HTML

<div id="container" style="min-width:400px;height:400px"></div>

8、可下钻的饼图

Highcharts.data({csv: document.getElementById('tsv').innerHTML,itemDelimiter: '\t',parsed: function (columns) {var brands = {},brandsData = [],versions = {},drilldownSeries = [];// 解析百分比字符串columns[1] = Highcharts.map(columns[1], function (value) {if (value.indexOf('%') === value.length - 1) {value = parseFloat(value);}return value;});$.each(columns[0], function (i, name) {var brand,version;if (i > 0) {// Remove special edition notesname = name.split(' -')[0];// 拆分version = name.match(/([0-9]+[\.0-9x]*)/);if (version) {version = version[0];}brand = name.replace(version, '');//创建主数据if (!brands[brand]) {brands[brand] = columns[1][i];} else {brands[brand] += columns[1][i];}// 创建版本数据if (version !== null) {if (!versions[brand]) {versions[brand] = [];}versions[brand].push(['v' + version, columns[1][i]]);}}});$.each(brands, function (name, y) {brandsData.push({name: name,y: y,drilldown: versions[name] ? name : null});});$.each(versions, function (key, value) {drilldownSeries.push({name: key,id: key,data: value});});// 创建图例var chart = Highcharts.chart('container',{chart: {type: 'pie'},title: {text: '2013年11月浏览器市场份额'},subtitle: {text: '单击每个浏览器品牌不同版本的具体信息，数据来源: netmarketshare.com.'},plotOptions: {series: {dataLabels: {enabled: true,format: '{point.name}: {point.y:.1f}%'}}},tooltip: {headerFormat: '<span style="font-size:11px">{series.name}</span><br>',pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}%</b> of total<br/>'},series: [{name: '品牌',colorByPoint: true,data: brandsData}],drilldown: {series: drilldownSeries}});}
});

HTML

<div id="container" style="min-width: 310px; max-width: 600px; height: 400px; margin: 0 auto"></div>
<!-- Data from www.netmarketshare.com. Select Browsers => Desktop share by version. Download as tsv. -->
<pre id="tsv" style="display:none">Browser Version  Total Market Share
Microsoft Internet Explorer 8.0 26.61%
Microsoft Internet Explorer 9.0 16.96%
Chrome 18.0 8.01%
Chrome 19.0 7.73%
Firefox 12  6.72%
Microsoft Internet Explorer 6.0 6.40%
Firefox 11  4.72%
Microsoft Internet Explorer 7.0 3.55%
Safari 5.1  3.53%
Firefox 13  2.16%
Firefox 3.6 1.87%
Opera 11.x  1.30%
Chrome 17.0 1.13%
Firefox 10  0.90%
Safari 5.0  0.85%
Firefox 9.0 0.65%
Firefox 8.0 0.55%
Firefox 4.0 0.50%
Chrome 16.0 0.45%
Firefox 3.0 0.36%
Firefox 3.5 0.36%
Firefox 6.0 0.32%
Firefox 5.0 0.31%
Firefox 7.0 0.29%
Proprietary or Undetectable 0.29%
Chrome 18.0 - Maxthon Edition   0.26%
Chrome 14.0 0.25%
Chrome 20.0 0.24%
Chrome 15.0 0.18%
Chrome 12.0 0.16%
Opera 12.x  0.15%
Safari 4.0  0.14%
Chrome 13.0 0.13%
Safari 4.1  0.12%
Chrome 11.0 0.10%
Firefox 14  0.10%
Firefox 2.0 0.09%
Chrome 10.0 0.09%
Opera 10.x  0.09%
Microsoft Internet Explorer 8.0 - Tencent Traveler Edition  0.09%</pre>

9、3D饼图

var chart = Highcharts.chart('container', {chart: {type: 'pie',options3d: {enabled: true,alpha: 45,beta: 0}},title: {text: '2014年某网站不同浏览器访问量占比'},tooltip: {pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'},plotOptions: {pie: {allowPointSelect: true,cursor: 'pointer',depth: 35,dataLabels: {enabled: true,format: '{point.name}'}}},series: [{type: 'pie',name: '浏览器占比',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]]}]
});

HTML

<!DOCTYPE HTML>
<html><head><meta charset="utf-8"><link rel="icon" href="https://jscdn.com.cn/highcharts/images/favicon.ico"><meta name="viewport" content="width=device-width, initial-scale=1"><style>/* css 代码  */</style><script src="https://code.highcharts.com.cn/highcharts/highcharts.js"></script><script src="https://code.highcharts.com.cn/highcharts/highcharts-3d.js"></script><script src="https://code.highcharts.com.cn/highcharts/modules/exporting.js"></script><script src="https://img.hcharts.cn/highcharts-plugins/highcharts-zh_CN.js"></script><script src="https://code.highcharts.com.cn/highcharts/themes/grid-light.js"></script></head><body><div id="container" style="height: 400px"></div><script>// JS 代码 </script></body>
</html>

JS，统计图表大全－－三、饼形图（饼图及环形图）相关推荐

vue项目中使用echarts完成图表类的开发之饼图，环形图
最近在vue项目中使用echarts.js完成诸如饼图,环形图,折线图,折线图加柱状图,和柱状图(水平柱状图和垂直柱状图),以及柱状图堆叠,下面请看图片展示: 如上图所示基本上echarts的简单图表 ...
python怎么画多重饼状图_Python通过matplotlib画双层饼图及环形图简单示例
(1) 饼图(pie),即在一个圆圈内分成几块,显示不同数据系列的占比大小,这也是我们在日常数据的图形展示中最常用的图形之一. 在python中常用matplotlib的pie来绘制,基本命令如下所示 ...
Tableau画条形图、直方图、折线图、饼图、环形图、箱线图
Tableau画条形图.直方图.折线图.饼图.环形图.箱线图.雷达图一.条形图第一步,打开"豆瓣电影数据.xlsx": 第二步,画各国家电影评分直方图.选择"产地&q ...
vue 使用echarts实现3D饼图和环形图
记录一下echarts实现3d饼图和环形图功能## 标题实现效果首先第一步安装echarts和echarts-gl npm install echarts echarts-gl安装最新版本可能会有 ...
python画环形图_Python通过matplotlib画双层饼图及环形图简单示例
摘要:这篇Python开发技术栏目下的"Python通过matplotlib画双层饼图及环形图简单示例",介绍的技术点是"matplotlib.Python.简单示例.饼 ...
python绘制饼图双层_Python通过matplotlib画双层饼图及环形图简单示例
(1) 饼图(pie),即在一个圆圈内分成几块,显示不同数据系列的占比大小,这也是我们在日常数据的图形展示中最常用的图形之一. 在python中常用matplotlib的pie来绘制,基本命令如下所示 ...
echarts3d饼图，环形图（包含透明效果）
效果图: 饼图: 环形图: 带透明度的环形图: 安装echarts "echarts":"^5.1.2" "echarts-gl":&quo ...
Tableau绘制饼图和环形图
文章目录 Tableau绘制饼图和环形图 1.数据源 2.酒店价格等级饼图 3.酒店价格等级环形图 Tableau绘制饼图和环形图 1.数据源使用的数据来自B站未明学院Tableau教程课程: ht ...
举个栗子！Tableau 技巧（4）：如何做空心饼图（环形图）
本期<举个栗子>,我们要给大家分享的 Tableau 技巧是:如何制作空心饼图(环形图). 为方便学习,栗子使用 Tableau 自带的"示例-超市"数据源.掌握栗子方 ...

JS，统计图表大全－－三、饼形图（饼图及环形图）

三、饼形图（饼图及环形图）

JS，统计图表大全－－三、饼形图（饼图及环形图）相关推荐

最新文章

热门文章