HighCharts繪製2D圓環圖效果實例分享-js教程-PHP中文網

首頁

web前端

js教程

HighCharts繪製2D圓環圖效果實例分享

小云云

Jan 23, 2018 am 09:02 AM

highcharts 實例

本文主要介紹了jQuery插件HighCharts繪製2D圓環圖效果,結合實例形式分析了jQuery使用HighCharts插件繪製圓環圖的實現步驟與相關操作技巧,並附帶demo源碼供讀者下載參考,需要的朋友可以參考下，希望能幫助大家。

本文實例講述了jQuery外掛HighCharts繪製2D圓環圖效果。分享給大家供大家參考，具體如下：

1、實例程式碼：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HighCharts 2D圆环图</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 = [&#39;花&#39;, &#39;树&#39;, &#39;鱼&#39;, &#39;鸟&#39;, &#39;鲸&#39;],
   name = &#39;Browser brands&#39;,
   data = [{
     y: 55.11,
     color: colors[0],
     drilldown: {
      name: &#39;花的种类&#39;,
      categories: [&#39;梅花&#39;, &#39;桃花&#39;, &#39;梨花&#39;, &#39;樱花&#39;],
      data: [13.6, 7.35, 33.06, 2.81],
      color: colors[0]
     }
    }, {
     y: 21.63,
     color: colors[1],
     drilldown: {
      name: &#39;树的种类&#39;,
      categories: [&#39;樟树&#39;, &#39;桉树&#39;, &#39;茶树&#39;, &#39;桃树&#39;, &#39;梨树&#39;],
      data: [15.20, 3.83, 18.58, 13.12, 45.43],
      color: colors[1]
     }
    }, {
     y: 11.94,
     color: colors[2],
     drilldown: {
      name: &#39;鱼的种类&#39;,
      categories: [&#39;鲫鱼&#39;, &#39;鲢鱼&#39;, &#39;草鱼&#39;, &#39;青鱼&#39;, &#39;鲦鱼&#39;,&#39;鳙鱼&#39;, &#39;鲥鱼&#39;],
      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: &#39;鸟的种类&#39;,
      categories: [&#39;松鸡&#39;, &#39;卷尾&#39;, &#39;鹪鹩&#39;, &#39;岩鹨&#39;, &#39;山鹑&#39;,&#39;画眉&#39;, &#39;金鸡&#39;],
      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: &#39;鲸的种类&#39;,
      categories: [&#39;须鲸&#39;, &#39;蓝鲸&#39;, &#39;虎鲸&#39;],
      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()
    });
   }
  }
  // 创建圆环图
  $(&#39;#donutChart&#39;).highcharts({
   chart: {
    type: &#39;pie&#39;
   },
   title: {
    text: &#39;物种数量及其比例&#39;
   },
   yAxis: {
    title: {
     text: &#39;比例&#39;
    }
   },
   plotOptions: {
    pie: {
     shadow: true,
     center: [&#39;50%&#39;, &#39;50%&#39;]
    }
   },
   tooltip: {
   valueSuffix: &#39;%&#39;
   },
   series: [{
    name: &#39;物种&#39;,
    data: speciesData,
    size: &#39;70%&#39;,
    dataLabels: {
     formatter: function() {
      return this.y > 5 ? this.point.name : null;
     },
     color: &#39;white&#39;,
     distance: -30
    }
   }, {
    name: &#39;数量&#39;,
    data: speData,
    size: &#39;80%&#39;,
    innerSize: &#39;80%&#39;,
    dataLabels: {
     formatter: function() {
      return this.y > 1 ? &#39;<b>&#39;+ this.point.name +&#39;:</b> &#39;+ this.y +&#39;%&#39; : null;
     }
    }
   }]
  });
  });
</script>
</head>
<body>
 <p id="donutChart" style="width: 1250px; height: 550px; margin: 0 auto"></p>
</body>
</html>

登入後複製

2、運行效果圖：

熱AI工具

Undresser.AI Undress

人工智慧驅動的應用程序，用於創建逼真的裸體照片

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

免費脫衣圖片

Clothoff.io

AI脫衣器

Video Face Swap

使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！

熱工具

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

中文版，非常好用

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

gmail信箱登陸入口在哪裡

7821

Java教學

1647

CakePHP 教程

1402

Laravel 教程

1300

PHP教程

1238

Related knowledge

Python中的SVM實例 Jun 11, 2023 pm 08:42 PM

Python中的支援向量機（SupportVectorMachine，SVM）是一個強大的監督學習演算法，可以用來解決分類和回歸問題。 SVM在處理高維度資料和非線性問題的時候表現出色，被廣泛地應用於資料探勘、影像分類、文字分類、生物資訊學等領域。在本文中，我們將介紹在Python中使用SVM進行分類的實例。我們將使用scikit-learn函式庫中的SVM模

如何在Highcharts中使用桑基圖來展示數據 Dec 17, 2023 pm 04:41 PM

如何在Highcharts中使用桑基圖來展示資料桑基圖(SankeyDiagram)是一種用於視覺化流量、能源、資金等複雜流程的圖表類型。它能清楚地展示各個節點之間的關係和流動情況，可以幫助我們更好地理解和分析數據。在本文中，我們將介紹如何使用Highcharts來建立和自訂桑基圖，並附上特定的程式碼範例。首先，我們需要載入Highcharts庫和Sank

如何在Highcharts中使用動態數據來展示即時數據 Dec 17, 2023 pm 06:57 PM

如何在Highcharts中使用動態數據來展示即時數據隨著大數據時代的到來，對於即時數據的展示變得越來越重要。 Highcharts作為一種流行的圖表庫，提供了豐富的功能和可自訂性，使得我們可以靈活地展示即時數據。本文將介紹如何在Highcharts中使用動態數據來展示即時數據，並給出特定的程式碼範例。首先，我們需要準備一個能夠提供即時數據的資料來源。在本文中，我

如何使用Highcharts建立甘特圖表 Dec 17, 2023 pm 07:23 PM

如何使用Highcharts建立甘特圖表，需要具體程式碼範例引言：甘特圖是一種常用於展示專案進度和時間管理的圖表形式，能夠直觀地展示任務的開始時間、結束時間和進度。 Highcharts是一款功能強大的JavaScript圖表庫，提供了豐富的圖表類型和靈活的配置選項。本文將介紹如何使用Highcharts建立甘特圖表，並給出具體的程式碼範例。一、Highchart

如何在Highcharts中使用堆疊圖表來展示數據 Dec 18, 2023 pm 05:56 PM

如何在Highcharts中使用堆疊圖表來展示資料堆疊圖表是一種常見的資料視覺化方式，它可以同時展示多個資料系列的總和，並以長條圖的形式顯示每個資料系列的貢獻。 Highcharts是一款功能強大的JavaScript庫，提供了豐富的圖表種類和靈活的配置選項，可以滿足各種資料視覺化的需求。在本文中，我們將介紹如何使用Highcharts來建立一個堆疊圖表，並提

VUE3入門實例：製作一個簡單的影片播放器 Jun 15, 2023 pm 09:42 PM

隨著新一代前端框架的不斷湧現，VUE3作為一個快速、靈活、易上手的前端框架備受熱愛。接下來，我們就來一起學習VUE3的基礎知識，製作一個簡單的影片播放器。一、安裝VUE3首先，我們需要在本地安裝VUE3。開啟命令列工具，執行以下命令:npminstallvue@next接著，新建一個HTML文件，引入VUE3：<!doctypehtml>

如何使用Highcharts創建地圖熱力圖 Dec 17, 2023 pm 04:06 PM

如何使用Highcharts建立地圖熱力圖，需要具體程式碼範例熱力圖是一種可視化的資料展示方式，能夠透過不同顏色深淺來表示各個區域的資料分佈情況。在資料視覺化領域，Highcharts是一個非常受歡迎的JavaScript函式庫，它提供了豐富的圖表類型和互動功能。本文將介紹如何使用Highcharts建立地圖熱力圖，並提供特定的程式碼範例。首先，我們需要準備一些數據

學習Golang指標轉換的最佳實務範例 Feb 24, 2024 pm 03:51 PM

Golang是一門功能強大且高效的程式語言，可用於開發各種應用程式和服務。在Golang中，指標是一種非常重要的概念，它可以幫助我們更靈活和有效率地操作資料。指標轉換是指在不同類型之間進行指標操作的過程，本文將透過具體的實例來學習Golang中指標轉換的最佳實踐。 1.基本概念在Golang中，每個變數都有一個位址，位址就是變數在記憶體中的位置。

See all articles

HighCharts繪製2D圓環圖效果實例分享

熱AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

熱門文章

熱工具

記事本++7.3.1

SublimeText3漢化版

禪工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

熱門話題