在本教程中要构建和演示的图表示例将可视化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="https://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 chartvar chart = anychart.column();// add the datachart.data(data);
我们还为图表添加标题，以一目了然地显示其含义：
chart.title("Top 10 Countries with the Most Cases of COVID-19");
最后要做的是设置容器和命令以绘制图表：
// set the containerchart.container("container");// draw the chartchart.draw();
做完了！查看下面的结果。将鼠标悬停在列和工具提示上，并显示确切的数字：
为方便起见，此JS / HTML5柱形图可在AnyChart Playground上获得，您可以在其中玩代码，可视化和交互性，以继续自己掌握该技术。以防万一，下面还提供了完整的HTML / JS代码：
<!DOCTYPE html><html> <head> <title>JavaScript Chart on COVID-19 Data</title> <script src="https://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>
看起来很简洁利落，不是吗/span>
本教程内容尚未完结，感兴趣的朋友可以继续关注我们后续更新内容“图表定制”！您可以下载AnyChart试用版免费体验~
想要购买AnyChart正版授权，或了解更多产品信息请点击【咨询在线客服】
标签：
声明：本站部分文章及图片源自用户投稿，如本站任何资料有侵权请您尽早请联系jinwei@zod.com.cn进行处理,非常感谢！