使用HighCharts怎么繪制一個(gè)2D圓環(huán)圖？很多新手對(duì)此不是很清楚，為了幫助大家解決這個(gè)難題，下面小編將為大家詳細(xì)講解，有這方面需求的人可以來(lái)學(xué)習(xí)下，希望你能有所收獲。

創(chuàng)新互聯(lián)建站堅(jiān)持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：網(wǎng)站設(shè)計(jì)制作、成都網(wǎng)站建設(shè)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿足客戶于互聯(lián)網(wǎng)時(shí)代的贛縣網(wǎng)站設(shè)計(jì)、移動(dòng)媒體設(shè)計(jì)的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！

1、實(shí)例代碼：

  $(function(){
   var colors = Highcharts.getOptions().colors,
   categories = ['花', '樹(shù)', '魚(yú)', '鳥(niǎo)', '鯨'],
   name = 'Browser brands',
   data = [{
     y: 55.11,
     color: colors[0],
     drilldown: {
      name: '花的種類',
      categories: ['梅花', '桃花', '梨花', '櫻花'],
      data: [13.6, 7.35, 33.06, 2.81],
      color: colors[0]
     }
    }, {
     y: 21.63,
     color: colors[1],
     drilldown: {
      name: '樹(shù)的種類',
      categories: ['樟樹(shù)', '桉樹(shù)', '茶樹(shù)', '桃樹(shù)', '梨樹(shù)'],
      data: [15.20, 3.83, 18.58, 13.12, 45.43],
      color: colors[1]
     }
    }, {
     y: 11.94,
     color: colors[2],
     drilldown: {
      name: '魚(yú)的種類',
      categories: ['鯽魚(yú)', '鰱魚(yú)', '草魚(yú)', '青魚(yú)', '鰷魚(yú)','鳙魚(yú)', '鰣魚(yú)'],
      data: [41.12, 10.19, 11.12, 14.36, 21.32, 9.91, 17.50],
      color: colors[2]
     }
    }, {
     y: 7.15,
     color: colors[3],
     drilldown: {
      name: '鳥(niǎo)的種類',
      categories: ['松雞', '卷尾', '鷦鷯', '巖鷚', '山鶉','畫(huà)眉', '金雞'],
      data: [14.55, 19.42, 16.23, 16.21, 18.20, 23.19, 10.14],
      color: colors[3]
     }
    }, {
     y: 2.14,
     color: colors[4],
     drilldown: {
      name: '鯨的種類',
      categories: ['須鯨', '藍(lán)鯨', '虎鯨'],
      data: [ 24.12, 18.37, 32.65],
      color: colors[4]
     }
    }];
  // 構(gòu)建物種數(shù)據(jù)
  var speciesData = [];
  var speData = [];
  for (var i = 0; i < data.length; i++) {
   // 添加物種數(shù)據(jù)
   speciesData.push({
    name: categories[i],
    y: data[i].y,
    color: data[i].color
   });
   for (var j = 0; j < data[i].drilldown.data.length; j++) {
    var brightness = 0.4 - (j / data[i].drilldown.data.length) / 5 ;
    speData.push({
     name: data[i].drilldown.categories[j],
     y: data[i].drilldown.data[j],
     color: Highcharts.Color(data[i].color).brighten(brightness).get()
    });
   }
  }
  // 創(chuàng)建圓環(huán)圖
  $('#donutChart').highcharts({
   chart: {
    type: 'pie'
   },
   title: {
    text: '物種數(shù)量及其比例'
   },
   yAxis: {
    title: {
     text: '比例'
    }
   },
   plotOptions: {
    pie: {
     shadow: true,
     center: ['50%', '50%']
    }
   },
   tooltip: {
   valueSuffix: '%'
   },
   series: [{
    name: '物種',
    data: speciesData,
    size: '70%',
    dataLabels: {
     formatter: function() {
      return this.y > 5 ? this.point.name : null;
     },
     color: 'white',
     distance: -30
    }
   }, {
    name: '數(shù)量',
    data: speData,
    size: '80%',
    innerSize: '80%',
    dataLabels: {
     formatter: function() {
      return this.y > 1 ? ''+ this.point.name +': '+ this.y +'%' : null;
     }
    }
   }]
  });
  });