学习如何使用JavaScript快速创建交互式热图。
AnyChart是基于JavaScript (HTML5) 的图表控件。使用AnyChart控件，可创建跨浏览器和跨平台的交互式图表和仪表。AnyChart 图表目前已被很多知名大公司所使用，可用于仪表盘、 表、数据分析、统计学、金融等领域。重要推荐：AnyChart已加入在线订购，超值特惠限时抢购！咨询详情>>
Anychart最新试用版
是否想学习如何使用JavaScript快速创建交互式热图数据可视化教程将指导您逐步完成编码过程。对HTML（HTML5）的基本了解和对编程的一些了解足以掌握这种图表技术。
热图是基于矩阵的二维数据可视化，其中颜色表示值。它通常用于促进复杂数据集的分析，揭示变量如何变化，相关等的模式。
最终阅读此JS图表教程，您就可以在 站和应用程序中获得引人注目的热图并运行，而不会遇到更多问题。
如何制作JavaScript热图
构建任何类型的JS图表仅需执行以下四个常规步骤：
- 创建一个将显示图表的HTML页面。
- 包括所有必需的JavaScript文件。
- 加载数据。
- 编写图表的JavaScript代码。
让我们详细了解它们。
步骤1：建立HTML 页
您需要做的第一件事是创建一个基本的HTML页面，在其中放置相关标题和HTML块元素（例如<div>）以放置图表。在这里，id具有值container，但是可以随意使用对您有意义的任何东西。该页面应如下所示：
<!DOCTYPE html><html> <head> <title>Basic JavaScript Heat Map Chart</title> <style> html, body, #container { width: 100%; height: 100%; margin: 0; padding: 0; } </style> </head> <body> <div id="container"></div> </body></html>
在width与height内部参数<style>块定义空间图表将占据你可以将这些根据自己的需要改变。它们在此处设置的方式使热图占据了整个空间。
步骤2：包括所有必要的文件
那里有多个JavaScript库，它们提供了预先编写的JS代码，使开发人员能够以或多或少的直观方式可视化数据。要按照本教程构建热图图表，我将使用AnyChart JS图表库。它非常灵活，但是易于入门和集成。
使用AnyChart时，有两种选择方式来获取必要的脚本：
- 下载并将它们放在您的服务器上，或者
- 从CDN使用它们。
在这里，我将介绍CDN链接。AnyChart具有模块化系统，并且制作热图需要使用核心和专用的热图脚本。基本代码实现如下所示：
<!DOCTYPE html><html> <head> <title>Basic JavaScript Heat Map Chart</title> <script src="https://cdn.anychart.com/releases/8.7.1/js/anychart-core.min.js"></script> <script src="https://cdn.anychart.com/releases/8.7.1/js/anychart-heatmap.min.js"></script> <style> html, body, #container { width: 100%; height: 100%; margin: 0; padding: 0; } </style> </head> <body> <div id="container"></div> <script> <!-- The heat map code goes here --> </script> </body></html>
该部分中的<script>标记 <body>是热图图表的JavaScript代码所在的位置。
步骤3：载入资料
现在该收集数据了！
在本教程中，我将可视化联合国开发计划署（UNDP）的人类发展指数（HDI）数据，以观察六个宏观区域（阿拉伯国家，东亚和太平洋，欧洲和中亚，拉丁）的人类发展指数变化美洲和加勒比海，南亚和撒哈拉以南非洲-从2010年到2018年。
要创建热图，需要三个数据字段：
- x，其中设置了列名称，
- y，其中设置了行名，以及
- heat，其中设置了值。
结果数据将如下所示：
var data = [ { x: "2010", y: "Arab States", heat: 0.676 }, { x: "2010", y: "East Asia and the Pacific", heat: 0.691 }, { x: "2010", y: "Europe and Central Asia", heat: 0.735 }, { x: "2010", y: "Latin America and the Caribbean", heat: 0.731 }, { x: "2010", y: "South Asia", heat: 0.585 }, { x: "2010", y: "Sub-Saharan Africa", heat: 0.498 }, { x: "2011", y: "Arab States", heat: 0.681 }, { x: "2011", y: "East Asia and the Pacific", heat: 0.700 }, { x: "2011", y: "Europe and Central Asia", heat: 0.744 }, { x: "2011", y: "Latin America and the Caribbean", heat: 0.737 }, { x: "2011", y: "South Asia", heat: 0.593 }, { x: "2011", y: "Sub-Saharan Africa", heat: 0.505 }, { x: "2012", y: "Arab States", heat: 0.687 }, { x: "2012", y: "East Asia and the Pacific", heat: 0.707 }, { x: "2012", y: "Europe and Central Asia", heat: 0.750 }, { x: "2012", y: "Latin America and the Caribbean", heat: 0.740 }, { x: "2012", y: "South Asia", heat: 0.601 }, { x: "2012", y: "Sub-Saharan Africa", heat: 0.512 }, { x: "2013", y: "Arab States", heat: 0.688 }, { x: "2013", y: "East Asia and the Pacific", heat: 0.714 }, { x: "2013", y: "Europe and Central Asia", heat: 0.759 }, { x: "2013", y: "Latin America and the Caribbean", heat: 0.748 }, { x: "2013", y: "South Asia", heat: 0.607 }, { x: "2013", y: "Sub-Saharan Africa", heat: 0.521 }, { x: "2014", y: "Arab States", heat: 0.691 }, { x: "2014", y: "East Asia and the Pacific", heat: 0.721 }, { x: "2014", y: "Europe and Central Asia", heat: 0.766 }, { x: "2014", y: "Latin America and the Caribbean", heat: 0.752 }, { x: "2014", y: "South Asia", heat: 0.617 }, { x: "2014", y: "Sub-Saharan Africa", heat: 0.527 }, { x: "2015", y: "Arab States", heat: 0.695 }, { x: "2015", y: "East Asia and the Pacific", heat: 0.727 }, { x: "2015", y: "Europe and Central Asia", heat: 0.770 }, { x: "2015", y: "Latin America and the Caribbean", heat: 0.754 }, { x: "2015", y: "South Asia", heat: 0.624 }, { x: "2015", y: "Sub-Saharan Africa", heat: 0.532 }, { x: "2016", y: "Arab States", heat: 0.699 }, { x: "2016", y: "East Asia and the Pacific", heat: 0.733 }, { x: "2016", y: "Europe and Central Asia", heat: 0.772 }, { x: "2016", y: "Latin America and the Caribbean", heat: 0.756 }, { x: "2016", y: "South Asia", heat: 0.634 }, { x: "2016", y: "Sub-Saharan Africa", heat: 0.535 }, { x: "2017", y: "Arab States", heat: 0.699 }, { x: "2017", y: "East Asia and the Pacific", heat: 0.733 }, { x: "2017", y: "Europe and Central Asia", heat: 0.771 }, { x: "2017", y: "Latin America and the Caribbean", heat: 0.758 }, { x: "2017", y: "South Asia", heat: 0.638 }, { x: "2017", y: "Sub-Saharan Africa", heat: 0.537 }, { x: "2018", y: "Arab States", heat: 0.703 }, { x: "2018", y: "East Asia and the Pacific", heat: 0.741 }, { x: "2018", y: "Europe and Central Asia", heat: 0.779 }, { x: "2018", y: "Latin America and the Caribbean", heat: 0.759 }, { x: "2018", y: "South Asia", heat: 0.642 }, { x: "2018", y: "Sub-Saharan Africa", heat: 0.541 },];
步骤4：编写JS Heat Map图表代码
好了，您准备好编写代码了吗/p>
- anychart.onDocumentReady在<script>标签内添加函数。它将包含热图图表的整个核心JavaScript代码，并在页面准备好后执行。
- 添加步骤3中的数据。
- 使用anychart.heatMap(data)创建一个热图图显示了包括数据。
- 添加相关的图表标题。
- 设置容器ID以将图表放入其中。
- 绘制图表。
再加上有关色标的一件重要事情。在我的情况下，所有数据值均小于1。这意味着AnyChart的默认序数标度将在所有单元格中为我们提供相同的颜色。为了改善可视化并快速应用更合适的单元格着色，我将使用基于两种颜色的线性刻度；第一种颜色＃ACE8D4将是heat值0的颜色，而第二种颜色＃00726A将被设置为最大值。中间的颜色将自动计算。
这是结果代码：
<!DOCTYPE html><html> <head> <title>Basic JavaScript Heat Map Chart</title> <script src="https://cdn.anychart.com/releases/8.7.1/js/anychart-core.min.js"></script> <script src="https://cdn.anychart.com/releases/8.7.1/js/anychart-heatmap.min.js"></script> <style> html, body, #container { width: 100%; height: 100%; margin: 0; padding: 0; } </style> </head> <body> <div id="container"></div> <script> anychart.onDocumentReady(function () { // create the data var data = [ { x: "2010", y: "Arab States", heat: 0.676 }, { x: "2010", y: "East Asia and the Pacific", heat: 0.691 }, { x: "2010", y: "Europe and Central Asia", heat: 0.735 }, { x: "2010", y: "Latin America and the Caribbean", heat: 0.731 }, { x: "2010", y: "South Asia", heat: 0.585 }, { x: "2010", y: "Sub-Saharan Africa", heat: 0.498 }, { x: "2011", y: "Arab States", heat: 0.681 }, { x: "2011", y: "East Asia and the Pacific", heat: 0.700 }, { x: "2011", y: "Europe and Central Asia", heat: 0.744 }, { x: "2011", y: "Latin America and the Caribbean", heat: 0.737 }, { x: "2011", y: "South Asia", heat: 0.593 }, { x: "2011", y: "Sub-Saharan Africa", heat: 0.505 }, { x: "2012", y: "Arab States", heat: 0.687 }, { x: "2012", y: "East Asia and the Pacific", heat: 0.707 }, { x: "2012", y: "Europe and Central Asia", heat: 0.750 }, { x: "2012", y: "Latin America and the Caribbean", heat: 0.740 }, { x: "2012", y: "South Asia", heat: 0.601 }, { x: "2012", y: "Sub-Saharan Africa", heat: 0.512 }, { x: "2013", y: "Arab States", heat: 0.688 }, { x: "2013", y: "East Asia and the Pacific", heat: 0.714 }, { x: "2013", y: "Europe and Central Asia", heat: 0.759 }, { x: "2013", y: "Latin America and the Caribbean", heat: 0.748 }, { x: "2013", y: "South Asia", heat: 0.607 }, { x: "2013", y: "Sub-Saharan Africa", heat: 0.521 }, { x: "2014", y: "Arab States", heat: 0.691 }, { x: "2014", y: "East Asia and the Pacific", heat: 0.721 }, { x: "2014", y: "Europe and Central Asia", heat: 0.766 }, { x: "2014", y: "Latin America and the Caribbean", heat: 0.752 }, { x: "2014", y: "South Asia", heat: 0.617 }, { x: "2014", y: "Sub-Saharan Africa", heat: 0.527 }, { x: "2015", y: "Arab States", heat: 0.695 }, { x: "2015", y: "East Asia and the Pacific", heat: 0.727 }, { x: "2015", y: "Europe and Central Asia", heat: 0.770 }, { x: "2015", y: "Latin America and the Caribbean", heat: 0.754 }, { x: "2015", y: "South Asia", heat: 0.624 }, { x: "2015", y: "Sub-Saharan Africa", heat: 0.532 }, { x: "2016", y: "Arab States", heat: 0.699 }, { x: "2016", y: "East Asia and the Pacific", heat: 0.733 }, { x: "2016", y: "Europe and Central Asia", heat: 0.772 }, { x: "2016", y: "Latin America and the Caribbean", heat: 0.756 }, { x: "2016", y: "South Asia", heat: 0.634 }, { x: "2016", y: "Sub-Saharan Africa", heat: 0.535 }, { x: "2017", y: "Arab States", heat: 0.699 }, { x: "2017", y: "East Asia and the Pacific", heat: 0.733 }, { x: "2017", y: "Europe and Central Asia", heat: 0.771 }, { x: "2017", y: "Latin America and the Caribbean", heat: 0.758 }, { x: "2017", y: "South Asia", heat: 0.638 }, { x: "2017", y: "Sub-Saharan Africa", heat: 0.537 }, { x: "2018", y: "Arab States", heat: 0.703 }, { x: "2018", y: "East Asia and the Pacific", heat: 0.741 }, { x: "2018", y: "Europe and Central Asia", heat: 0.779 }, { x: "2018", y: "Latin America and the Caribbean", heat: 0.759 }, { x: "2018", y: "South Asia", heat: 0.642 }, { x: "2018", y: "Sub-Saharan Africa", heat: 0.541 }, ]; // create the chart and set the data chart = anychart.heatMap(data); // set the chart title chart.title("Human Development Index by region (2010-2018)"); // create and configure the color scale. var customColorScale = anychart.scales.linearColor(); customColorScale.colors(["#ACE8D4", "#00726A"]); // set the color scale as the color scale of the chart chart.colorScale(customColorScale); // set the container id chart.container("container"); // initiate drawing the chart chart.draw(); }); </script> </body></html>
这是基本热图图表的外观-
我们可以在此图表上看到，撒哈拉以南非洲地区的人类发展指数值最低，而欧洲和中亚地区似乎是最高的。但是，要一眼就能看到其他有趣的东西，甚至清楚地了解一件非常重要的基本知识，这不容易.
关于自定义JS热图图表和更改色阶的教程，请关注下一篇。
=====================================================
想要购买Anychart正版授权的朋友可以咨询官方客服。
标签：
声明：本站部分文章及图片源自用户投稿，如本站任何资料有侵权请您尽早请联系jinwei@zod.com.cn进行处理,非常感谢！