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

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

翻译|使用教程|编辑：莫成敏|2020-06-12 13:55:56.630|阅读 146 次

概述：在本教程中要构建和演示的图表示例将可视化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="//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="//cdn.anychart.com/releases/8.7.1/js/anychart-base.min.js"></script>
    <script src="//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柱形图和条形图一点都不困难。