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

2019-11-19 17:12:46

字體：大中小

來源：轉載

供稿：網友

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

1、實例代碼：

<!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 = ['花', '樹', '魚', '鳥', '鯨'],   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: '樹的種類',      categories: ['樟樹', '桉樹', '茶樹', '桃樹', '梨樹'],      data: [15.20, 3.83, 18.58, 13.12, 45.43],      color: colors[1]     }    }, {     y: 11.94,     color: colors[2],     drilldown: {      name: '魚的種類',      categories: ['鯽魚', '鰱魚', '草魚', '青魚', '鰷魚','鳙魚', '鰣魚'],      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: '鳥的種類',      categories: ['松雞', '卷尾', '鷦鷯', '巖鷚', '山鶉','畫眉', '金雞'],      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: ['須鯨', '藍鯨', '虎鯨'],      data: [ 24.12, 18.37, 32.65],      color: colors[4]     }    }];  // 構建物種數(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、運行效果圖：