跨平台图表控件Anychart教程：使用JavaScript创建热图图表（上）-控件新闻-慧都网

跨平台图表控件Anychart教程：使用JavaScript创建热图图表（上）

翻译|使用教程|编辑：吴园园|2020-02-28 11:42:54.350|阅读 180 次

概述：学习如何使用JavaScript快速创建交互式热图。

相关链接：

AnyChart是基于JavaScript (HTML5) 的图表控件。使用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：包括所有必要的文件

接下来，在<head>HTML页面的部分中，您应该引用所有必需的脚本文件。

那里有多个JavaScript库，它们提供了预先编写的JS代码，使开发人员能够以或多或少的直观方式可视化数据。要按照本教程构建热图图表，我将使用 JS图表库。它非常灵活，但是易于入门和集成。

使用AnyChart时，有两种选择方式来获取必要的脚本：

下载并将它们放在您的服务器上，或者
从CDN使用它们。

在这里，我将介绍CDN链接。AnyChart具有模块化系统，并且制作热图需要使用核心和专用的热图脚本。基本代码实现如下所示：

<!DOCTYPE html>
<html>
  <head>
    <title>Basic JavaScript Heat Map Chart</title>
    <script src="//cdn.anychart.com/releases/8.7.1/js/anychart-core.min.js"></script>
    <script src="//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图表代码

好了，您准备好编写代码了吗？

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="//cdn.anychart.com/releases/8.7.1/js/anychart-core.min.js"></script>
    <script src="//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>

这是基本热图图表的外观-

跨平台图表控件Anychart教程：使用JavaScript创建热图图表（上）