首頁 > 開發者 > 網站開發

HighCharts之2D環圈圖

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

HighCharts之2D環圈圖


1、執行個體源碼

Donut.html：

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>HighCharts 2D環圈圖</title><script type="text/javascript" src="../scripts/jquery-1.11.0.js"></script><script type="text/javascript" src="../scripts/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]                 }             }];       // 構建物種資料     var speciesData = [];     var speData = [];     for (var i = 0; i < data.length; i++) {          // 添加物種資料         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()             });         }     }      // 建立環圈圖     $('#donutChart').highcharts({         chart: {             type: 'pie'         },         title: {             text: '物種數量及其比例'         },         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: '數量',             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、執行個體結果


本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More