另类天堂影院,午夜成人网站在线,日韩亚洲欧美中文在线

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

翻譯|使用教程|編輯：莫成敏|2020-06-12 13:55:56.630|閱讀 229 次

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

相關鏈接：

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

點擊下載AnyChart正式版

本文內容緊接上文教程！

現在，讓我們看看如何在需要時修改這種JavaScript柱形圖。

圖表定制

切換圖表類型（至水平條）

有許多圖表類型可用于數據可視化，有時您可能需要更改首先選擇的圖表類型，才能更好地了解數據。

例如，您可以通過以下方式將柱形圖類型切換為條形圖類型-simply只需將anychart.column（）更改為anychart.bar（），即可將（垂直）列轉換為（水平）條形。

var chart = anychart.bar();

而已！現在，此JavaScript柱形圖是JS條形圖-? 在the playground查看：

設定主題

您可以通過多種方式自定義圖表的外觀。但是，要快速更改外觀，可以從預先構建的圖表設計主題中進行選擇。

例如，讓我們選擇一種叫做“深色綠松石”的東西。這可以通過兩個快速步驟完成。

首先，在<head>部分內的<script>標簽中引用它：

<script src="http://cdn.anychart.com/releases/8.7.1/themes/dark_turquoise.min.js"></script>

其次，將其應用于圖表，如下所示：

anychart.theme(anychart.themes.darkTurquoise);

現在是這樣的：

啟用網格線

在這樣的數據可視化中直觀地識別由條形線表示的值不是太容易。因此，您可能需要添加網格線以促進感知。

在實際啟用網格之前，讓我們確定所需的滴答間隔-每50,000個案例，每10,000個次要的滴答間隔。然后，只需添加相應的網格線。

// add ticks
chart.yScale().ticks().interval(50000);
chart.yScale().minorTicks().interval(10000);
// add grid lines
chart.yGrid().enabled(true);
chart.yMinorGrid().enabled(true);

請注意，在AnyChart中，條形圖被實現為垂直 JavaScript柱形圖。結果，條形圖中的水平軸為Y，條形圖中的垂直軸為X。因此，請不要與上面的代碼片段中的內容混淆——那里的一切都絕對正確。

這是此步驟的結果：

打開動畫

最后，讓我們在加載時打開條形圖動畫，這是一個簡單而酷的視覺效果：

chart.animation(true);

這是本教程的最終圖表 ?-逐個實施所有描述的轉換的結果！您可以輕松地將其集成到您的Web項目中。刪除所有注釋，您將看到它是用不到30行的純JavaScript代碼創建的。

這是基本JS柱形圖的最終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>
    <script src="http://cdn.anychart.com/releases/8.7.1/themes/dark_turquoise.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 chart
  var chart = anychart.bar();

  // set the theme
  anychart.theme(anychart.themes.darkTurquoise);
 
  // add the data
  chart.data(data);
 
  // set the chart title
  chart.title("Top 10 Countries with the Most Cases of COVID-19");

  // add tick intervals
  chart.yScale().ticks().interval(50000);
  chart.yScale().minorTicks().interval(10000);
  // add grid lines
  chart.yGrid().enabled(true);
  chart.yMinorGrid().enabled(true);

  // turn on the chart animation
  chart.animation(true);
 
  // set the container
  chart.container("container");

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

結論

如您所見，創建JavaScript柱形圖和條形圖一點都不困難。