国产拍在线,91华人,国产第4页

跨平臺圖表控件Anychart教程：在COVID-19數據上創建JavaScript柱形圖和條形圖（上）

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

概述：在本教程中要構建和演示的圖表示例將可視化JHU CSSE的最新新型冠狀病毒病例數據，因為COVID-19是當今最熱門的話題。

相關鏈接：

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

點擊下載AnyChart正式版

您的網站或應用需要吸引人的JS圖表嗎？從這里開始！完成此快速數據可視化教程，您將學習如何輕松創建JavaScript 柱狀圖和條形圖，這些柱形圖在任何基于HTML5的項目中看起來都很好，從而可以輕松進行比較。

在本教程中要構建和演示的圖表示例將可視化JHU CSSE的最新新型冠狀病毒病例數據，因為COVID-19是當今最熱門的話題。

繼續閱讀，您會發現JS圖表實際上非常簡單。尤其是如果您至少對編程有一個非常基本的了解（不但如此，而且還遠遠沒有必要）。

如何構建基本的JavaScript柱形圖

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

創建一個網頁。
參考必要的文件。
設置數據。
對圖表進行編碼。

現在讓我們一個一個地介紹它們，然后進行一些更高級的自定義，以更好地進行說明。

1、創建一個網頁

首先，在要構建圖表的位置創建一個HTML頁面。

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

要使圖表填充整個頁面，請將width和height參數設置為100％。

因此，整個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>部分內的<script>標記中包括所有必要的腳本來構建圖表。

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

圖表代碼本身將轉到<body>部分內部的<script>標簽。

<!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、設置數據

第三，您應該添加要可視化的數據。

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

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

讓我們將此數據轉換為帶有數據數組和標頭設置的JavaScript對象：

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、對圖表進行編碼

最后，既然您已經有了一個頁面、腳本和數據，就可以完成最后一步了-開始編碼。

請記住，將HTML 頁面的<body>部分的<script>標簽內包括圖表代碼。

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

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

然后，添加數據：

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變量中指定數據：

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

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

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

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

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

// draw the chart
chart.draw();

做完了！查看下面的結果。將鼠標懸停在列和工具提示上，并顯示確切的數字：

為方便起見，此JS / HTML5柱形圖可在上獲得，您可以在其中玩代碼，可視化和交互性，以繼續自己掌握該技術。以防萬一，下面還提供了完整的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>

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

本教程內容尚未完結，感興趣的朋友可以繼續關注我們后續更新內容“圖表定制”！您可以下載AnyChart試用版免費體驗~

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