跨平台图表控件Anychart教程：在COVID-19数据上创建JavaScript柱形图和条形图（上）-控件新闻-慧都网

跨平台图表控件Anychart教程：在COVID-19数据上创建JavaScript柱形图和条形图（上）

翻译|使用教程|编辑：莫成敏|2020-04-29 15:30:41.780|阅读 193 次

概述：在本教程中要构建和演示的图表示例将可视化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="//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="//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正版授权，或了解更多产品信息请点击