午夜视频福利在线观看,韩国日本三级网站,日本三级hd

国产自产第一-国产自产对白一区-国产自产精品-国产自产区44页-国产自产在线-国产自产自拍-国产自产自拍视频-国产自精品

跨平臺(tái)圖表控件Anychart教程：如何使用JavaScript創(chuàng)建餅圖

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

概述：本文介紹了如何創(chuàng)建，更改餅圖并將其集成到您的網(wǎng)頁(yè)中。

相關(guān)鏈接：

跨平臺(tái)圖表控件Anychart教程：如何使用JavaScript創(chuàng)建餅圖

AnyChart是基于JavaScript (HTML5) 的圖表控件。使用AnyChart控件，可創(chuàng)建跨瀏覽器和跨平臺(tái)的交互式圖表和儀表。AnyChart 圖表目前已被很多知名大公司所使用，可用于儀表盤、報(bào)表、數(shù)據(jù)分析、統(tǒng)計(jì)學(xué)、金融等領(lǐng)域。重要推薦：

AnyChart現(xiàn)已更新至最新版本8.7.0，九大數(shù)據(jù)可視化新功能上線，改進(jìn)了功能并修復(fù)了一些bug。新版本，新功能，趕快下載體驗(yàn)吧~（點(diǎn)擊查看更新詳情）

點(diǎn)擊下載Anychart 8.7.0最新版

您是否曾經(jīng)想過，Web開發(fā)人員如何創(chuàng)建交互式JavaScript餅圖并將其集成到HTML5應(yīng)用程序和網(wǎng)頁(yè)中？如果答案是肯定的，請(qǐng)繼續(xù)閱讀！本文介紹了如何創(chuàng)建，更改餅圖并將其集成到您的網(wǎng)頁(yè)中。注意！本文提出了一個(gè)緊迫的政治問題。但是我們不會(huì)冒犯任何人！

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

創(chuàng)建一個(gè)JavaScript餅圖

要使用JavaScript圖表庫(kù)制作任何類型的圖表，您需要執(zhí)行四個(gè)基本步驟。花費(fèi)5分鐘，您將學(xué)到向網(wǎng)頁(yè)添加一個(gè)交互式JS（HTML5）餅形圖，如下所示：

隨本JS圖表教程一起創(chuàng)建的JavaScript餅圖

步驟1.創(chuàng)建一個(gè)HTML頁(yè)面

您需要做的第一件事是創(chuàng)建一個(gè)文件，稍后您將在其中放置圖表。創(chuàng)建一個(gè)簡(jiǎn)單的HTML頁(yè)面，設(shè)置其標(biāo)題并為將來的圖表創(chuàng)建一個(gè)容器：

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

容器的width和height參數(shù)可以百分比或像素設(shè)置。他們負(fù)責(zé)圖表的寬度和高度。將它們?cè)O(shè)置為“ 100％”將使圖表占據(jù)整個(gè)頁(yè)面。

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

第二步是將鏈接添加到該<head>部分。有必要加載JavaScript圖表庫(kù)并創(chuàng)建一個(gè)標(biāo)簽，將未來的餅圖示例的整個(gè)代碼放入其中：

<!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.將數(shù)據(jù)放在一起

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

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

顯示一些整體組成正是我們現(xiàn)在要做的。我們將在種族方面看到整個(gè)美國(guó)民族的組成。要找出答案，讓我們查看一下2010年美國(guó)商務(wù)部經(jīng)濟(jì)與統(tǒng)計(jì)局種族和西班牙裔起源概覽，并從中獲取一些數(shù)據(jù)：

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

如果查看人口普查摘要中的原始數(shù)據(jù)表，您可能已經(jīng)注意到有一個(gè)單獨(dú)的帶有百分比的列。JavaScript圖表的優(yōu)點(diǎn)在于您不需要它，可以放入數(shù)據(jù)，并且圖表可以計(jì)算所有內(nèi)容：

// 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.編寫圖表代碼

這是創(chuàng)建交互式JavaScript餅圖的最后一步。添加anychart.onDocumentReady功能。頁(yè)面準(zhǔn)備好后，將執(zhí)行此功能。創(chuàng)建圖表實(shí)體，將其放入容器中，然后將數(shù)據(jù)與圖表連接。

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();});

外觀如下：

現(xiàn)在可以使用JavaScript圖表庫(kù)創(chuàng)建一個(gè)簡(jiǎn)單的餅圖！

更改圖表外觀

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

JS餅圖有很多設(shè)置。

讓我們開始修改吧！

圖例

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

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

要將圖例移至右側(cè)并使其元素垂直堆疊，請(qǐng)?jiān)诖a中添加以下設(shè)置：

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

分類

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

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

并且圖片變得更清晰：

熱鍵

我們還有最后一件事可以做，以突出我們?cè)陂_頭提到的熱鍵問題。讓我們?cè)谝曈X上脫穎而出。為此，我們通過特殊設(shè)置更改數(shù)據(jù)：

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

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

結(jié)論

這個(gè)小型教程介紹了如何使用AnyChart JavaScript圖表庫(kù)構(gòu)建餅圖。請(qǐng)?jiān)L問官方的AnyChart JS Charts網(wǎng)站以獲取更多信息，尤其是，請(qǐng)?jiān)L問JavaScript Chart Gallery以獲取更多圖表類型的說明。該AnyChart的圖表文檔和AnyChart的的JavaScript API將幫助您構(gòu)建和輕松調(diào)整HTML5圖表。

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

想要購(gòu)買Anychart正版授權(quán)的朋友可以。

更多精彩內(nèi)容，歡迎關(guān)注下方的微信公眾號(hào)，及時(shí)獲取產(chǎn)品最新資訊▼▼▼

圖片2.jpg