在本教程中要构建和演示的图表示例将可视化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="https://cdn.anychart.com/releases/8.7.1/themes/dark_turquoise.min.js"></script>
其次，将其应用于图表，如下所示：
anychart.theme(anychart.themes.darkTurquoise);
现在是这样的：
启用 格线
在这样的数据可视化中直观地识别由条形线表示的值不是太容易。因此，您可能需要添加 格线以促进感知。
在实际启用 格之前，让我们确定所需的滴答间隔-每50,000个案例，每10,000个次要的滴答间隔。然后，只需添加相应的 格线。
// add tickschart.yScale().ticks().interval(50000);chart.yScale().minorTicks().interval(10000);// add grid lineschart.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="https://cdn.anychart.com/releases/8.7.1/js/anychart-base.min.js"></script> <script src="https://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柱形图和条形图一点都不困难。
相关内容推荐：
跨平台图表控件Anychart教程：在COVID-19数据上创建JavaScript柱形图和条形图（上）
想要购买Anychart正版授权，或了解更多产品信息请点击【咨询在线客服】
标签：
声明：本站部分文章及图片源自用户投稿，如本站任何资料有侵权请您尽早请联系jinwei@zod.com.cn进行处理,非常感谢！