jQuery插件HighCharts繪制2D圓環(huán)圖效果示例【附demo源碼下載】

更新時(shí)間：2017年03月09日 11:46:28 作者：翱翔天地

這篇文章主要介紹了jQuery插件HighCharts繪制2D圓環(huán)圖效果,結(jié)合實(shí)例形式分析了jQuery使用HighCharts插件繪制圓環(huán)圖的實(shí)現(xiàn)步驟與相關(guān)操作技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下

本文實(shí)例講述了jQuery插件HighCharts繪制2D圓環(huán)圖效果。分享給大家供大家參考，具體如下：

1、實(shí)例代碼：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HighCharts 2D圓環(huán)圖</title>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/highcharts.js"></script>
<script type="text/javascript">
  $(function(){
   var colors = Highcharts.getOptions().colors,
   categories = ['花', '樹(shù)', '魚(yú)', '鳥(niǎo)', '鯨'],
   name = 'Browser brands',
   data = [{
     y: 55.11,
     color: colors[0],
     drilldown: {
      name: '花的種類(lèi)',
      categories: ['梅花', '桃花', '梨花', '櫻花'],
      data: [13.6, 7.35, 33.06, 2.81],
      color: colors[0]
     }
    }, {
     y: 21.63,
     color: colors[1],
     drilldown: {
      name: '樹(shù)的種類(lèi)',
      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ú)的種類(lèi)',
      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)的種類(lèi)',
      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: '鯨的種類(lèi)',
      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 ? '<b>'+ this.point.name +':</b> '+ this.y +'%' : null;
     }
    }
   }]
  });
  });
</script>
</head>
<body>
 <div id="donutChart" style="width: 1250px; height: 550px; margin: 0 auto"></div>
</body>
</html>

2、運(yùn)行效果圖：