国产网址在线,国产免费毛卡片,91丝袜美腿

跨平臺圖表控件Anychart教程：使用JavaScript創建熱圖圖表（上）

翻譯|使用教程|編輯：吳園園|2020-02-28 11:42:54.350|閱讀 229 次

概述：學習如何使用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="http://cdn.anychart.com/releases/8.7.1/js/anychart-core.min.js"></script>
    <script src="http://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="http://cdn.anychart.com/releases/8.7.1/js/anychart-core.min.js"></script>
    <script src="http://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創建熱圖圖表（上）