国外恋足,波多野洁衣吧,欧美另类

跨平臺圖表控件Anychart教程：如何使用JavaScript創建餅圖

翻譯|使用教程|編輯：吳園園|2019-12-06 10:31:57.510|閱讀 544 次

概述：本文介紹了如何創建，更改餅圖并將其集成到您的網頁中。

相關鏈接：

跨平臺圖表控件Anychart教程：如何使用JavaScript創建餅圖

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

AnyChart現已更新至最新版本8.7.0，九大數據可視化新功能上線，改進了功能并修復了一些bug。新版本，新功能，趕快下載體驗吧~（點擊查看更新詳情）

點擊下載Anychart 8.7.0最新版

您是否曾經想過，Web開發人員如何創建交互式JavaScript餅圖并將其集成到HTML5應用程序和網頁中？如果答案是肯定的，請繼續閱讀！本文介紹了如何創建，更改餅圖并將其集成到您的網頁中。注意！本文提出了一個緊迫的政治問題。但是我們不會冒犯任何人！

餅圖是最流行的圖表類型之一。從數學上講，它看起來像一個劃分為多個扇區的圓圈，這些圓圈代表整體的一部分。對于我們大多數人而言，餅圖看起來像切成幾片的真實餡餅或比薩餅。在本文中，您將找到有關如何使用JS圖表代碼示例進行構建的詳細教程。

創建一個JavaScript餅圖

要使用JavaScript圖表庫制作任何類型的圖表，您需要執行四個基本步驟。花費5分鐘，您將學到向網頁添加一個交互式JS（HTML5）餅形圖，如下所示：

隨本JS圖表教程一起創建的JavaScript餅圖

步驟1.創建一個HTML頁面

您需要做的第一件事是創建一個文件，稍后您將在其中放置圖表。創建一個簡單的HTML頁面，設置其標題并為將來的圖表創建一個容器：

<!DOCTYPE html><html>
  <head>
    <title>JavaScript Pie Chart</title>
  </head>
  <body>
    <div id="container" style="width: 100%; height: 100%"></div>
  </body></html>

容器的width和height參數可以百分比或像素設置。他們負責圖表的寬度和高度。將它們設置為“ 100％”將使圖表占據整個頁面。

步驟2.引用所有必需的文件

第二步是將鏈接添加到該<head>部分。有必要加載JavaScript圖表庫并創建一個標簽，將未來的餅圖示例的整個代碼放入其中：

<!DOCTYPE html><html>
  <head>
      <title>JavaScript Pie Chart</title>
      <script src="//cdn.anychart.com/js/8.0.1/anychart-core.min.js"></script>
      <script src="//cdn.anychart.com/js/8.0.1/anychart-pie.min.js"></script>
  </head>
  <body>
    <div id="container" style="width: 100%; height: 100%"></div>
    <script>
        <!-- chart code will be here -->
    </script>
  </body></html>

步驟3.將數據放在一起

創建圖表的主要目的是可視化數據。因此，很明顯，您的數據是圖表中最重要的部分，而制圖僅僅是以圖形，可視方式顯示數據的一種方式。

如果選擇錯誤的圖表類型以可視化數據，則可能會誤導自己或圖表查看器。因此，明智地選擇圖表類型！如果您不知道圖表類型之間有什么區別，請查看我們推出的的“ 選擇圖表類型”系列文章。也歡迎您使用這個漂亮的工具 Chartopedia；您將在其中找到餅圖，并看到此圖表類型非常適合顯示“整體的一部分”。

顯示一些整體組成正是我們現在要做的。我們將在種族方面看到整個美國民族的組成。要找出答案，讓我們查看一下2010年美國商務部經濟與統計局種族和西班牙裔起源概覽，并從中獲取一些數據：

美國各種族人口：2010年人口普查
種族	數
白色	223,553,265
黑人或非裔美國人	38,929,319
美洲印第安人和阿拉斯加原住民	2,932,248
亞洲人	14,674,252
夏威夷原住民和其他太平洋島民	540,013
其他種族	19,107,368
兩個或更多種族	9,009,073

如果查看人口普查摘要中的原始數據表，您可能已經注意到有一個單獨的帶有百分比的列。JavaScript圖表的優點在于您不需要它，可以放入數據，并且圖表可以計算所有內容：

// set the datavar data = [
    {x: "White", value: 223553265},
    {x: "Black or African American", value: 38929319},
    {x: "American Indian and Alaska Native", value: 2932248},
    {x: "Asian", value: 14674252},
    {x: "Native Hawaiian and Other Pacific Islander", value: 540013},
    {x: "Some Other Race", value: 19107368},
    {x: "Two or More Races", value: 9009073}];

步驟4.編寫圖表代碼

這是創建交互式JavaScript餅圖的最后一步。添加anychart.onDocumentReady功能。頁面準備好后，將執行此功能。創建圖表實體，將其放入容器中，然后將數據與圖表連接。

anychart.onDocumentReady(function() {
  // set the data
  var data = [
      {x: "White", value: 223553265},
      {x: "Black or African American", value: 38929319},
      {x: "American Indian and Alaska Native", value: 2932248},
      {x: "Asian", value: 14674252},
      {x: "Native Hawaiian and Other Pacific Islander", value: 540013},
      {x: "Some Other Race", value: 19107368},
      {x: "Two or More Races", value: 9009073}
  ];
  // create the chart
  var chart = anychart.pie();
  // set the chart title
  chart.title("Population by Race for the United States: 2010 Census");
  // add the data
  chart.data(data);
  // display the chart in the container
  chart.container('container');
  chart.draw();});

外觀如下：

現在可以使用JavaScript圖表庫創建一個簡單的餅圖！

更改圖表外觀

本部分是可選的。如果您對圖表外觀不滿意，并希望它變得更加出色和吸引人，則可以進行必要的更改。

JS餅圖有很多設置。

讓我們開始修改吧！

圖例

餅圖具有特殊的控制元素：圖例。圖例也稱為圖表的鍵，它鏈接到圖表上顯示的數據。

默認情況下，圖例位于圖表的底部，在這種情況下看起來不佳。

要將圖例移至右側并使其元素垂直堆疊，請在代碼中添加以下設置：

// set legend position
chart.legend().position("right");
// set items layout
chart.legend().itemsLayout("vertical");

分類

我們可以更改的另一件事是餅中切片的順序，以方便進行可視數據分析。讓我們整理一下：

// sort elements
chart.sort("desc");

并且圖片變得更清晰：

熱鍵

我們還有最后一件事可以做，以突出我們在開頭提到的熱鍵問題。讓我們在視覺上脫穎而出。為此，我們通過特殊設置更改數據：

{x: "White", value: 223553265, exploded: true},

最終的JavaScript餅形圖如下所示：

結論

這個小型教程介紹了如何使用AnyChart JavaScript圖表庫構建餅圖。請訪問官方的AnyChart JS Charts網站以獲取更多信息，尤其是，請訪問JavaScript Chart Gallery以獲取更多圖表類型的說明。該AnyChart的圖表文檔和AnyChart的的JavaScript API將幫助您構建和輕松調整HTML5圖表。

=====================================================

想要購買Anychart正版授權的朋友可以。

更多精彩內容，歡迎關注下方的微信公眾號，及時獲取產品最新資訊▼▼▼

圖片2.jpg