介绍 & lt; ! DOCTYPE html>
& lt; html>
& lt; head>
& lt; meta charset=癠TF-8"祝辞
& lt; title> HighCharts 二维圆环图& lt;/title>
& lt; script 类型=拔谋?javascript", src=癹s/jquery-1.7.2.min.js"祝辞& lt;/script>
& lt; script 类型=拔谋?javascript", src=癹s/highcharts.js"祝辞& lt;/script>
& lt; script 类型=拔谋?javascript"比;
美元才能(函数(){
,,var colors =, Highcharts.getOptions () .colors,
,才能categories =,(& # 39;花& # 39;,,& # 39;树& # 39;,,& # 39;鱼& # 39;,,& # 39;鸟& # 39;,,& # 39;鲸& # 39;],
,,name =, & # 39; Browser 品牌# 39;
,,data =, [{
,,,,y,, 55.11,
,,,,颜色:,颜色[0],
,,,,钻取:,{
,,,,,名字:,& # 39;花的种类& # 39;,
,,,,,类别:,(& # 39;梅花& # 39;,,& # 39;桃花& # 39;,,& # 39;梨花& # 39;,,& # 39;樱花& # 39;],
,,,,,数据:,(13.6,7.35,33.06,2.81),
,,,,,颜色:颜色,[0]
,,,,}
,,,},{
,,,,y,, 21.63,
,,,,颜色:,颜色[1],
,,,,钻取:,{
,,,,,名字:,& # 39;树的种类& # 39;,
,,,,,类别:,(& # 39;樟树& # 39;,,& # 39;桉树& # 39;,,& # 39;茶树& # 39;,,& # 39;桃树& # 39;,,& # 39;梨树& # 39;],
,,,,,数据:,(15.20,3.83,18.58,13.12,45.43),
,,,,,颜色:颜色,[1]
,,,,}
,,,},{
,,,,y,, 11.94,
,,,,颜色:,颜色[2],
,,,,钻取:,{
,,,,,名字:,& # 39;鱼的种类& # 39;,
,,,,,类别:,(& # 39;鲫鱼& # 39;,,& # 39;鲢鱼& # 39;,,& # 39;草鱼& # 39;,,& # 39;青鱼& # 39;,,& # 39;鲦鱼& # 39;,& # 39;鳙鱼& # 39;,,& # 39;鲥鱼& # 39;],
,,,,,数据:,(41.12,10.19,11.12,14.36,21.32,9.91,17.50),
,,,,,颜色:颜色,[2]
,,,,}
,,,},{
,,,,y,, 7.15,
,,,,颜色:,颜色[3],
,,,,钻取:,{
,,,,,名字:,& # 39;鸟的种类& # 39;,
,,,,,类别:,(& # 39;松鸡& # 39;,,& # 39;卷尾& # 39;,,& # 39;鹪鹩& # 39;,,& # 39;岩鹨& # 39;,,& # 39;山鹑& # 39;,& # 39;画眉& # 39;,,& # 39;金鸡& # 39;],
,,,,,数据:,(14.55,19.42,16.23,16.21,18.20,23.19,10.14),
,,,,,颜色:颜色,[3]
,,,,}
,,,},{
,,,,y,, 2.14,
,,,,颜色:,颜色[4],
,,,,钻取:,{
,,,,,名字:,& # 39;鲸的种类& # 39;,
,,,,,类别:,(& # 39;须鲸& # 39;,,& # 39;蓝鲸& # 39;,,& # 39;虎鲸& # 39;],
,,,,,数据:,(18.37,24.12,32.65),
,,,,,颜色:颜色,[4]
,,,,}
,,,}];//,才能构建物种数据
var 才能;speciesData =, [];
var 才能;speData =, [];
for 才能;(var 小姐:=,0;,小姐:& lt;, data.length;,我+ +),{
,,//,添加物种数据
,,speciesData.push ({
,,,的名字:,类别(我),
,,,y,,[我].y数据,
,,,颜色:[我].color数据
,,});
,,for (var j =, 0;, j & lt;,数据[我].drilldown.data.length;, j + +), {
,,,var brightness =, 0.4,安康;(时间/j 数据[我].drilldown.data.length),/, 5,;
,,,speData.push ({
,,,,名字:,数据[我].drilldown.categories [j],
,,,,y,,数据[我].drilldown.data [j],
,,,,颜色:,Highcharts.Color(数据[我].color) .brighten(亮度). get ()
,,,});
,,}
,,}//,才能创建圆环图
美元才能(& # 39;# donutChart& # 39;) .highcharts ({
,,,图:{
,,,类型:,& # 39;派# 39;
,,},
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
使用HighCharts怎么绘制一个2 d圆环图?很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。
1,实例代码:
