97超碰人人摸人人操,成人深夜福利在线,在线第一页

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

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

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

# 界面/圖表報(bào)表/文檔/IDE等千款熱門(mén)軟控件火熱銷(xiāo)售中 >>

相關(guān)鏈接：

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

點(diǎn)擊下載Anychart最新試用版

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

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

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

如何制作JavaScript熱圖

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

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

讓我們?cè)敿?xì)了解它們。

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

您需要做的第一件事是創(chuàng)建一個(gè)基本的HTML頁(yè)面，在其中放置相關(guān)標(biāo)題和HTML塊元素（例如<div>）以放置圖表。在這里，id具有值container，但是可以隨意使用對(duì)您有意義的任何東西。該頁(yè)面應(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ù)自己的需要改變。它們?cè)诖颂幵O(shè)置的方式使熱圖占據(jù)了整個(gè)空間。

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

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

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

使用AnyChart時(shí)，有兩種選擇方式來(lái)獲取必要的腳本：

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

在這里，我將介紹CDN鏈接。AnyChart具有模塊化系統(tǒng)，并且制作熱圖需要使用核心和專用的熱圖腳本。基本代碼實(shí)現(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>標(biāo)記 <body>是熱圖圖表的JavaScript代碼所在的位置。

步驟3：載入資料

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

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

要?jiǎng)?chuàng)建熱圖，需要三個(gè)數(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：編寫(xiě)JS Heat Map圖表代碼

好了，您準(zhǔn)備好編寫(xiě)代碼了嗎？

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

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

這是結(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>

這是基本熱圖圖表的外觀-

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