日韩高清无码中文字幕,免费A级,日本αV

跨平臺(tái)圖表控件Anychart教程：在COVID-19數(shù)據(jù)上創(chuàng)建JavaScript柱形圖和條形圖（上）

翻譯|使用教程|編輯：莫成敏|2020-04-29 15:30:41.780|閱讀 251 次

概述：在本教程中要構(gòu)建和演示的圖表示例將可視化JHU CSSE的最新新型冠狀病毒病例數(shù)據(jù)，因?yàn)镃OVID-19是當(dāng)今最熱門的話題。

相關(guān)鏈接：

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

點(diǎn)擊下載AnyChart正式版

您的網(wǎng)站或應(yīng)用需要吸引人的JS圖表嗎？從這里開始！完成此快速數(shù)據(jù)可視化教程，您將學(xué)習(xí)如何輕松創(chuàng)建JavaScript 柱狀圖和條形圖，這些柱形圖在任何基于HTML5的項(xiàng)目中看起來都很好，從而可以輕松進(jìn)行比較。

在本教程中要構(gòu)建和演示的圖表示例將可視化JHU CSSE的最新新型冠狀病毒病例數(shù)據(jù)，因?yàn)镃OVID-19是當(dāng)今最熱門的話題。

繼續(xù)閱讀，您會(huì)發(fā)現(xiàn)JS圖表實(shí)際上非常簡單。尤其是如果您至少對(duì)編程有一個(gè)非常基本的了解（不但如此，而且還遠(yuǎn)遠(yuǎn)沒有必要）。

如何構(gòu)建基本的JavaScript柱形圖

通常，只需四個(gè)簡單步驟即可制作幾乎任何基本類型的JS圖表，而柱形圖也不例外：

創(chuàng)建一個(gè)網(wǎng)頁。
參考必要的文件。
設(shè)置數(shù)據(jù)。
對(duì)圖表進(jìn)行編碼。

現(xiàn)在讓我們一個(gè)一個(gè)地介紹它們，然后進(jìn)行一些更高級(jí)的自定義，以更好地進(jìn)行說明。

1、創(chuàng)建一個(gè)網(wǎng)頁

首先，在要構(gòu)建圖表的位置創(chuàng)建一個(gè)HTML頁面。

添加將成為圖表容器的塊級(jí)HTML元素，并指定其ID。

要使圖表填充整個(gè)頁面，請(qǐng)將width和height參數(shù)設(shè)置為100％。

因此，整個(gè)HTML頁面如下所示：

<!DOCTYPE html>
<html>
  <head>
    <title>JavaScript Chart on COVID-19 Data</title>
  </head>
  <body>
    <div id="container" style="width: 100%; height: 100%;"></div>
  </body>
</html>

2、引用必要的文件

其次，在<head>部分內(nèi)的<script>標(biāo)記中包括所有必要的腳本來構(gòu)建圖表。

隨本教程構(gòu)建的圖表將由AnyChart JavaScript圖表庫提供支持，該圖表易于使用且靈活，并具有包含許多示例的詳細(xì)文檔。因此，在此處包括CDN的基本模塊。

圖表代碼本身將轉(zhuǎn)到<body>部分內(nèi)部的<script>標(biāo)簽。

<!DOCTYPE html>
<html>
  <head>
    <title>JavaScript Chart on COVID-19 Data</title>
    <script src="http://cdn.anychart.com/releases/8.7.1/js/anychart-base.min.js"></script>
  </head>
  <body>
    <div id="container" style="width: 100%; height: 100%;"></div>
    <script>
      // The chart code will be written here.
    </script>
  </body>
</html>

3、設(shè)置數(shù)據(jù)

第三，您應(yīng)該添加要可視化的數(shù)據(jù)。

基本上，有很多方法可以將數(shù)據(jù)加載到圖表。本教程介紹了如何創(chuàng)建簡單圖表，以便我們安排簡單數(shù)據(jù)。

當(dāng)前，新型冠狀病毒大流行是全世界頭號(hào)話題。讓我們制作一個(gè)JavaScript柱形圖，以可視化方式顯示截至2020年4月5日確認(rèn)的COVID-19病例數(shù)最高的前10個(gè)國家/地區(qū)。數(shù)據(jù)將從約翰霍普金斯大學(xué)系統(tǒng)科學(xué)與工程中心（JHU CSSE）的中獲取，該數(shù)據(jù)庫已知包含可信的統(tǒng)計(jì)信息。根據(jù)該報(bào)告，截至4月5日，按COVID-19確診病例排名前十的國家/地區(qū)清單如下：

讓我們將此數(shù)據(jù)轉(zhuǎn)換為帶有數(shù)據(jù)數(shù)組和標(biāo)頭設(shè)置的JavaScript對(duì)象：

var data = {
  header: ["Country", "Number of cases"],
  rows: [
    ["United States", 337072],
    ["Spain", 131646],
    ["Italy", 128948],
    ["Germany", 100123],
    ["France", 93773],
    ["China", 82602],
    ["Iran", 58226],
    ["United Kingdom", 48436],
    ["Turkey", 27069],
    ["Switzerland", 21100]
]};

4、對(duì)圖表進(jìn)行編碼

最后，既然您已經(jīng)有了一個(gè)頁面、腳本和數(shù)據(jù)，就可以完成最后一步了-開始編碼。

請(qǐng)記住，將HTML 頁面的<body>部分的<script>標(biāo)簽內(nèi)包括圖表代碼。

首先，添加anychart.onDocumentReady()函數(shù)，以便在頁面準(zhǔn)備就緒時(shí)加載圖表：

<script>
  anychart.onDocumentReady(function() {
    // The main chart code goes here.
  });
</script>

然后，添加數(shù)據(jù)：

anychart.onDocumentReady(function() {

  var data = {
    header: ["Country", "Number of cases"],
    rows: [
      ["United States", 337072],
      ["Spain", 131646],
      ["Italy", 128948],
      ["Germany", 100123],
      ["France", 93773],
      ["China", 82602],
      ["Iran", 58226],
      ["United Kingdom", 48436],
      ["Turkey", 27069],
      ["Switzerland", 21100]
  ]};

});

接下來，定義圖表類型。（您可以在“支持的圖表”列表的框中立即找到AnyChart中可用的圖表類型的完整列表。）在此圖表中，將選擇柱形圖類型，并在data變量中指定數(shù)據(jù)：

// create the column chart
var chart = anychart.column();
 
// add the data
chart.data(data);

我們還為圖表添加標(biāo)題，以一目了然地顯示其含義：

chart.title("Top 10 Countries with the Most Cases of COVID-19");

最后要做的是設(shè)置容器和命令以繪制圖表：

// set the container
chart.container("container");

// draw the chart
chart.draw();

做完了！查看下面的結(jié)果。將鼠標(biāo)懸停在列和工具提示上，并顯示確切的數(shù)字：

為方便起見，此JS / HTML5柱形圖可在上獲得，您可以在其中玩代碼，可視化和交互性，以繼續(xù)自己掌握該技術(shù)。以防萬一，下面還提供了完整的HTML / JS代碼：

<!DOCTYPE html>
<html>
  <head>
    <title>JavaScript Chart on COVID-19 Data</title>
    <script src="http://cdn.anychart.com/releases/8.7.1/js/anychart-base.min.js"></script>
  </head>
  <body>
    <div id="container" style="width: 100%; height: 100%;"></div>
    <script>
anychart.onDocumentReady(function() {

  // create the data
  var data = {
    header: ["Country", "Number of cases"],
    rows: [
      ["United States", 337072],
      ["Spain", 131646],
      ["Italy", 128948],
      ["Germany", 100123],
      ["France", 93773],
      ["China", 82602],
      ["Iran", 58226],
      ["United Kingdom", 48436],
      ["Turkey", 27069],
      ["Switzerland", 21100]
  ]};
 
  // create the column chart
  var chart = anychart.column();
 
  // add the data
  chart.data(data);
 
  // set the chart title
  chart.title("Top 10 Countries with the Most Cases of COVID-19");
 
  // set the container
  chart.container("container");

  // draw the chart
  chart.draw();
 
});
    </script>
  </body>
</html>

看起來很簡潔利落，不是嗎？

本教程內(nèi)容尚未完結(jié)，感興趣的朋友可以繼續(xù)關(guān)注我們后續(xù)更新內(nèi)容“圖表定制”！您可以下載AnyChart試用版免費(fèi)體驗(yàn)~

想要購買AnyChart正版授權(quán)，或了解更多產(chǎn)品信息請(qǐng)點(diǎn)擊