国产原创精品视频,国产呦合第一系,亚洲社区在线视频

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

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

概述：學(xué)習(xí)如何使用JavaScript快速創(chuàng)建交互式熱圖。

相關(guān)鏈接：

AnyChart是基于JavaScript (HTML5) 的圖表控件。使用AnyChart控件，可創(chuàng)建跨瀏覽器和跨平臺的交互式圖表和儀表。AnyChart 圖表目前已被很多知名大公司所使用，可用于儀表盤、報表、數(shù)據(jù)分析、統(tǒng)計學(xué)、金融等領(lǐng)域。重要推薦：

點擊下載Anychart最新試用版

是否想學(xué)習(xí)如何使用JavaScript快速創(chuàng)建交互式熱圖？該數(shù)據(jù)可視化教程將指導(dǎo)您逐步完成編碼過程。對HTML（HTML5）的基本了解和對編程的一些了解足以掌握這種圖表技術(shù)。

熱圖是基于矩陣的二維數(shù)據(jù)可視化，其中顏色表示值。它通常用于促進復(fù)雜數(shù)據(jù)集的分析，揭示變量如何變化，相關(guān)等的模式。

最終閱讀此JS圖表教程，您就可以在網(wǎng)站和應(yīng)用程序中獲得引人注目的熱圖并運行，而不會遇到更多問題。

如何制作JavaScript熱圖

構(gòu)建任何類型的JS圖表僅需執(zhí)行以下四個常規(guī)步驟：

創(chuàng)建一個將顯示圖表的HTML頁面。
包括所有必需的JavaScript文件。
加載數(shù)據(jù)。
編寫圖表的JavaScript代碼。

讓我們詳細了解它們。

步驟1：建立HTML網(wǎng)頁

您需要做的第一件事是創(chuàng)建一個基本的HTML頁面，在其中放置相關(guān)標題和HTML塊元素（例如<div>）以放置圖表。在這里，id具有值container，但是可以隨意使用對您有意義的任何東西。該頁面應(yīng)如下所示：

<!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內(nèi)部參數(shù)<style>塊定義空間圖表將占據(jù)你可以將這些根據(jù)自己的需要改變。它們在此處設(shè)置的方式使熱圖占據(jù)了整個空間。

步驟2：包括所有必要的文件

接下來，在<head>HTML頁面的部分中，您應(yīng)該引用所有必需的腳本文件。

那里有多個JavaScript庫，它們提供了預(yù)先編寫的JS代碼，使開發(fā)人員能夠以或多或少的直觀方式可視化數(shù)據(jù)。要按照本教程構(gòu)建熱圖圖表，我將使用 JS圖表庫。它非常靈活，但是易于入門和集成。

使用AnyChart時，有兩種選擇方式來獲取必要的腳本：

下載并將它們放在您的服務(wù)器上，或者
從CDN使用它們。

在這里，我將介紹CDN鏈接。AnyChart具有模塊化系統(tǒng)，并且制作熱圖需要使用核心和專用的熱圖腳本。基本代碼實現(xiàn)如下所示：

<!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：載入資料

現(xiàn)在該收集數(shù)據(jù)了！

在本教程中，我將可視化聯(lián)合國開發(fā)計劃署（UNDP）的人類發(fā)展指數(shù)（HDI）數(shù)據(jù)，以觀察六個宏觀區(qū)域（阿拉伯國家，東亞和太平洋，歐洲和中亞，拉丁）的人類發(fā)展指數(shù)變化美洲和加勒比海，南亞和撒哈拉以南非洲-從2010年到2018年。

要創(chuàng)建熱圖，需要三個數(shù)據(jù)字段：

x，其中設(shè)置了列名稱，
y，其中設(shè)置了行名，以及
heat，其中設(shè)置了值。

結(jié)果數(shù)據(jù)將如下所示：

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>標簽內(nèi)添加函數(shù)。它將包含熱圖圖表的整個核心JavaScript代碼，并在頁面準備好后執(zhí)行。
添加步驟3中的數(shù)據(jù)。
使用anychart.heatMap(data)創(chuàng)建一個熱圖圖顯示了包括數(shù)據(jù)。
添加相關(guān)的圖表標題。
設(shè)置容器ID以將圖表放入其中。
繪制圖表。

再加上有關(guān)色標的一件重要事情。在我的情況下，所有數(shù)據(jù)值均小于1。這意味著AnyChart的默認序數(shù)標度將在所有單元格中為我們提供相同的顏色。為了改善可視化并快速應(yīng)用更合適的單元格著色，我將使用基于兩種顏色的線性刻度；第一種顏色＃ACE8D4將是heat值0的顏色，而第二種顏色＃00726A將被設(shè)置為最大值。中間的顏色將自動計算。

這是結(jié)果代碼：

<!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創(chuàng)建熱圖圖表（上）