九九九九九热,成人在线论坛,日韩精品在

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

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

概述：在本教程中要構(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正式版

本文內(nèi)容緊接上文教程！

現(xiàn)在，讓我們看看如何在需要時(shí)修改這種JavaScript柱形圖。

圖表定制

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

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

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

var chart = anychart.bar();

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

設(shè)定主題

您可以通過多種方式自定義圖表的外觀。但是，要快速更改外觀，可以從預(yù)先構(gòu)建的圖表設(shè)計(jì)主題中進(jìn)行選擇。

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

首先，在<head>部分內(nèi)的<script>標(biāo)簽中引用它：

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

其次，將其應(yīng)用于圖表，如下所示：

anychart.theme(anychart.themes.darkTurquoise);

現(xiàn)在是這樣的：

啟用網(wǎng)格線

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

在實(shí)際啟用網(wǎng)格之前，讓我們確定所需的滴答間隔-每50,000個(gè)案例，每10,000個(gè)次要的滴答間隔。然后，只需添加相應(yīng)的網(wǎng)格線。

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

請(qǐng)注意，在AnyChart中，條形圖被實(shí)現(xiàn)為垂直 JavaScript柱形圖。結(jié)果，條形圖中的水平軸為Y，條形圖中的垂直軸為X。因此，請(qǐng)不要與上面的代碼片段中的內(nèi)容混淆——那里的一切都絕對(duì)正確。

這是此步驟的結(jié)果：

打開動(dòng)畫

最后，讓我們在加載時(shí)打開條形圖動(dòng)畫，這是一個(gè)簡單而酷的視覺效果：

chart.animation(true);

這是本教程的最終圖表 ?-逐個(gè)實(shí)施所有描述的轉(zhuǎn)換的結(jié)果！您可以輕松地將其集成到您的Web項(xiàng)目中。刪除所有注釋，您將看到它是用不到30行的純JavaScript代碼創(chuàng)建的。

這是基本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>

結(jié)論

如您所見，創(chuàng)建JavaScript柱形圖和條形圖一點(diǎn)都不困難。

相關(guān)內(nèi)容推薦：

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

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