www.色日本睡觉,日韩专区,日韩日韩无砖专区

圖表控件AnyChart如何構建 JavaScript 圓環圖？

翻譯|使用教程|編輯：楊鵬連|2021-07-08 13:53:35.640|閱讀 320 次

概述：在本教程中，我們將可視化有關頂級在線音樂流媒體平臺的全球市場份額的數據。這是一個很好的信息示例，可以在圓環圖中很好地表示

AnyChart是基于JavaScript (HTML5) 的圖表控件。使用AnyChart控件，可創建跨瀏覽器和跨平臺的交互式圖表和儀表。AnyChart 圖表目前已被很多知名大公司所使用，可用于儀表盤、報表、數據分析、統計學、金融等領域。

AnyChar HTML5圖表高度可定制且高度兼容。擁有純JavaScript API，AnyChart圖表內置客戶端數據實時更新，多層次向下鉆區和具體參數更新。強大的主題引擎使你通過一系列圖表進行獨特的演示體驗，而PDF和圖像輸出能產出圖書質量打印文檔。

點擊下載AnyChart最新版

想知道數據設計人員和開發人員如何使用 JavaScript 創建引人注目的圓環圖嗎？那么你就在正確的時間來到了正確的地方。跟著，即使您是初學者，您也將學習如何輕松構建交互式 JS 圓環圖！

在本教程中，我們將可視化有關頂級在線音樂流媒體平臺的全球市場份額的數據。這是一個很好的信息示例，可以在圓環圖中很好地表示。

為了確保我們在同一頁面上，讓我們先看看什么是圓環圖，然后立即開始繪制圖表！

什么是圓環圖？

基本上，圓環圖（或圓環圖）是具有中心切出區域的餅圖，可以填充附加信息。它們經常被用作可視化分類數據比例的一種方式。

在圓環圖中，每個切片（或一塊）的大小描述了每個類別代表的總數。因此，這種類型的數據可視化可以幫助您快速了解變量的比例組成。

根據經驗，圓環圖圖形中可視化的類別數量應限制在少數，以保持表示形式整潔并避免易讀性問題。

JS 圓環圖預覽

看看在本教程結束時 JS 甜甜圈圖會怎樣。它將是互動的！

構建一個基本的 JavaScript 圓環圖

只需四個簡單的步驟即可構建漂亮的 JS 圓環圖。那不是我們耳邊的音樂嗎？

創建一個 HTML 頁面。
包括 JavaScript 文件。
添加數據。
編寫一些JS圖表代碼。

1. 創建一個 HTML 頁面

我們要做的第一件事是創建一個基本的 HTML 頁面，其中包含一個用于保存圓環圖的塊元素。
為了<div>稍后在代碼中識別這一點，我們給它一個 id 屬性。這次讓它只是“容器”。
我們還將塊內的width和height參數指定<style>為“100%”，以便圓環圖填滿整個頁面。

<html>
  <head>
    <title>JavaScript Donut Chart</title>
    <style type="text/css">      
      html, body, #container { 
        width: 100%; height: 100%; margin: 0; padding: 0; 
      } 
    </style>
  </head>
  <body>
    <div id="container"></div>
  </body>
</html>

2. 包含 JavaScript 文件

有許多 JavaScript 圖表庫提供了現成的功能，即使沒有很多技術技能和經驗，這些功能也非常有助于快速可視化圖表中的數據。其中一些支持開箱即用的圓環圖。
在本教程中，我們使用AnyChart JS 庫。它是用于交互式數據可視化的輕量級、強大且靈活的解決方案。AnyChart 也非常適合初學者，因為它提供了廣泛而詳細的文檔和大量帶有源代碼的圖表示例，可以在專用操場上玩。
因此，作為第二步，讓我們從庫的CDN 中包含必要的 JavaScript 文件（或者您可以根據需要下載它們）。
AnyChart 的 JavaScript 圖表庫采用模塊化系統以確保最佳性能。要使用它創建交互式 HTML5 甜甜圈圖，我們需要向HTML 頁面的部分添加兩個腳本——核心模塊和餅圖和甜甜圈模塊<;head>。

<html>
  <head>
    <title>JavaScript Donut Chart</title>
    <script src="http://cdn.anychart.com/releases/8.10.0/js/anychart-core.min.js"></script>
    <script src="http://cdn.anychart.com/releases/8.10.0/js/anychart-pie.min.js"></script>
    <style type="text/css">      
      html, body, #container { 
        width: 100%; height: 100%; margin: 0; padding: 0; 
      } 
    </style>
  </head>
  <body>  
    <div id="container"></div>
    <script>
      // All the code for the JS donut chart will come here
    </script>
  </body>
</html>

3. 添加數據

圓環圖是一種簡單的圖表類型，需要一個簡單而有限的數據集。所以，雖然 AnyChart 支持多種加載數據的方式，但我們只會以一種輕松的方式直接傳遞數據。

在本教程中，我決定獲取有關領先音樂流媒體應用市場份額的數據，這些數據是我從應用業務網站收集的。所以，我只是添加它，如下所示：

var data = anychart.data.set([
  ['Spotify', 34],
  ['Apple Music', 21],
  ['Amazon Music', 15],
  ['Tencent apps', 11],
  ['YouTube Music', 6],
  ['Others', 13]
]);

現在我們已經準備好了一切，讓我們準備好通過添加一些 JavaScript 代碼來查看圓環圖的形狀！基本上，這是非常直觀的。

4. 為我們的圓環圖編寫 JS 圖表代碼

我們要做的第一件事是添加一個包含所有代碼的函數，以確保其中的代碼僅在頁面準備就緒后才會執行。

使用適當的 JS 庫創建甜甜圈圖非常簡單，在這種情況下，它實際上只是幾行代碼！

正如我們在上面了解到的，甜甜圈圖基本上是一個帶孔的餅圖，就像一個環。因此，我們只需創建一個餅圖實例并為其指定一個內半徑值即可使其成為圓環圖。

// create a pie chart with the data
var chart = anychart.pie(data)
// set the chart radius making a donut chart
chart.innerRadius('55%');

然后我們給我們的圓環圖一個標題并在最終繪制結果可視化之前設置容器 id。

chart.title('Music Streaming Apps Global Market Share')
chart.container('container');
chart.draw();

就是這樣 - 一個功能齊全的基于 JavaScript 的交互式圓環圖準備好了！這不是絕對容易嗎？

請注意，圖例是自動創建的。此外，繼續并單擊其項目或任何部分以查看很酷的交互式甜甜圈切片行為。

圓環圖清楚地表明 Spotify 是全球領導者，Spotify 和 Apple Music 共同占據了音樂流媒體應用程序市場的一半以上。

現在，讓我們自定義我們的甜甜圈圖，使其看起來更酷，并以更清晰的方式傳達見解。

自定義 JS 圓環圖

AnyChart 的 JavaScript 庫的一個很棒的特性是，最初的圓環圖構建得非常快，然后有大量的選項可以按照我們想要的方式微調圖表。
讓我們看看一些有趣的方法，使我們的交互式圓環圖更具美感和信息量：

更改調色板。
添加標簽。
改進工具提示。
在甜甜圈的中心添加細節。

1.更改調色板

顏色是使圖表看起來更加個性化的最簡單但最有效的方法。由于我們在這里代表品牌，我們可以將它們的顏色應用于相應數據點的可視化。

這很簡單，我們只需定義要使用的調色板，并在創建圓環圖時將其作為參數傳遞。

// create a color palette
var palette = anychart.palettes.distinctColors();
  
// set the colors according to the brands
palette.items([
  { color: '#1dd05d' },
  { color: '#000000' },
  { color: '#00a3da' },
  { color: '#156ef2' },
  { color: '#f60000' },
  { color: '#96a6a6' }
]);

// apply the donut chart color palette
chart.palette(palette);

看看我們的甜甜圈圖在品牌顏色下的樣子！

此圓環圖版本可通過AnyChart Playground和CodePen上的代碼獲得。

2. 添加標簽

由于我們的細分數量較少，而且每個細分都足夠大，因此我們可以在圓環圖的每個切片內添加品牌名稱和百分比數字。這將消除對圖例的需要。
同樣，這真的很簡單，只需添加兩行 JS 代碼即可完成。

// set the position of labels
chart.labels().format('{%x} — {%y}%').fontSize(16);
  
// disable the legend
chart.legend(false);

3.改進提示

使工具提示清晰且具有附加值始終是一個好主意。在我們的甜甜圈圖中，只有兩個信息點：品牌名稱和百分比份額。因此，我們可以擁有包含該信息的基本工具提示，而不會出現任何混亂。

chart.tooltip().format('Market share: {%PercentValue}%');

4.在甜甜圈的中心添加細節

數據可視化的一個重要方面在于空間利用。由于圓環圖中間有一個空白，我們可以用它來顯示標題和其他一些信息。
讓我們定義一個獨立元素并將其放置在中心。除了標題之外，我們還添加了一個副標題來代表我們的觀察：

// create a standalone label
var label = anychart.standalones.label();

// configure the label settings
label
  .useHtml(true)
  .text(
    '<span style = "color: #313136; font-size:20px;">Global Market Share of <br/> Music Streaming Apps</span>' +
    '<br/><br/></br><span style="color:#444857; font-size: 14px;"><i>Spotify and Apple Music have more <br/>than 50% of the total market share</i></span>'
  )
  .position('center')
  .anchor('center')
  .hAlign('center')
  .vAlign('middle');

// set the label as the center content
chart.center().content(label);

結果如下！

它就是這樣——一個用 JavaScript 構建的酷炫時髦的甜甜圈圖！
您可以在下方或AnyChart Playground或CodePen上找到此圓環圖的最終代碼。

<html>
  <head>
    <title>JavaScript Donut Chart</title>
    <script src="http://cdn.anychart.com/releases/8.10.0/js/anychart-core.min.js"></script>
    <script src="http://cdn.anychart.com/releases/8.10.0/js/anychart-pie.min.js"></script>
    <style type="text/css">      
      html, body, #container { 
        width: 100%; height: 100%; margin: 0; padding: 0; 
      } 
    </style>
  </head>
  <body>  
    <div id="container"></div>
    <script>

anychart.onDocumentReady(function () {
  
  // add data
  var data = anychart.data.set([
    ['Spotify', 34],
    ['Apple Music', 21],
    ['Amazon Music', 15],
    ['Tencent apps', 11],
    ['YouTube Music', 6],
    ['Others', 13]
  ]);
  
  // create a pie chart with the data
  var chart = anychart.pie(data);
  
  // set the chart radius making a donut chart
  chart.innerRadius('55%')

  // create a color palette
  var palette = anychart.palettes.distinctColors();
 
  // set the colors according to the brands
  palette.items([
    { color: '#1dd05d' },
    { color: '#000000' },
    { color: '#00a3da' },
    { color: '#156ef2' },
    { color: '#f60000' },
    { color: '#96a6a6' }
  ]);

  // apply the donut chart color palette
  chart.palette(palette);
  
  // set the position of labels
  chart.labels().format('{%x} — {%y}%').fontSize(16);
  
  // disable the legend
  chart.legend(false);
  
  // format the donut chart tooltip
  chart.tooltip().format('Market share: {%PercentValue}%');

  // create a standalone label
  var label = anychart.standalones.label();

  // configure the label settings
  label
    .useHtml(true)
    .text(
      '<span style = "color: #313136; font-size:20px;">Global Market Share of <br/> Music Streaming Apps</span>' +
      '<br/><br/></br><span style="color:#444857; font-size: 14px;"><i>Spotify and Apple Music have more <br/>than 50% of the total market share</i></span>'
    )
    .position('center')
    .anchor('center')
    .hAlign('center')
    .vAlign('middle');
  
  // set the label as the center content
  chart.center().content(label);
  
  // set container id for the chart
  chart.container('container');
  
  // initiate chart drawing
  chart.draw();

});

    </script>
  </body>
</html>

結論

在本教程中，我們看到了創建和自定義交互式 JS 圓環圖是多么快速和容易。它是最容易構建的圖表之一，因此當人們開始學習網絡數據可視化時，它是一個很好的選擇。
如果您想進一步改進我們剛剛制作的圓環圖或根據您自己的需要創建一個完全不同的圓環圖，請查看圓環圖文檔，不要錯過圓環圖示例以獲取靈感。也歡迎您查看 AnyChart JavaScript 數據可視化庫中支持的其他圖表類型。
如果您對構建或使用圓環圖或任何與數據可視化相關的問題有任何疑問，請告訴我，我會盡力回復并提供幫助。

相關產品推薦：

AnyGantt——構建復雜且內容豐富的甘特圖的理想工具

AnyStock——基于XML/JSON的Flash金融圖表解決方案

AnyMap——可交互式地圖

想要購買AnyChart正版授權，或了解更多產品信息請點擊