简介
ultimate-heatmap-chart 是一个基于 D3.js 和 Canvas 的 JavaScript 生成热力图的库，支持一般矩形（非正方形）的数据处理，非常适用于可视化数据矩阵、网页浏览数据等。
本文主要介绍如何使用 ultimate-heatmap-chart 包，包括如何准备数据、如何生成热力图、如何进行自定义样式和配置等。
准备工作
安装依赖
首先需要安装 ultimate-heatmap-chart 包，可以直接在终端中使用 npm 进行安装，打开终端输入以下命令即可：
npm install --save ultimate-heatmap-chart
准备数据
ultimate-heatmap-chart 需要使用一个二维数组作为数据源，数组中每个元素表示一个矩形的值，如：
const data = [
[0, 10, 20],
[30, 40, 50],
[60, 70, 80]
];数组中的每个值会对应到一个矩形的颜色深浅，值越大颜色越深，可以根据实际需求定义不同的颜色标尺。
生成热力图
基础用法
import UltimateHeatmapChart from 'ultimate-heatmap-chart';
const data = [...]; // 二维数组数据源
const heatmap = new UltimateHeatmapChart();
heatmap.init(
'#heatmap-container', // 热力图容器的 DOM 元素（例如 div）
data, // 数据源
);其中，heatmap.init() 方法中的第一个参数为热力图的容器，必须是一个已经在 DOM 中存在的元素。如果需要动态添加热力图容器，可以在添加后再调用此方法。
热力图细节
热力图宽高
可以通过 width 和 height 参数设置热力图的大小，它们的默认值分别是 600px 和 400px。
heatmap.init(
'#heatmap-container', // 热力图容器的 DOM 元素（例如 div）
data, // 数据源
{
width: 800, // 热力图宽度，默认 600
height: 600, // 热力图高度，默认 400
}
);颜色标尺
可以通过 colorScale 参数设置热力图的颜色标尺，它们的默认值如下：
const defaultColorScale = ['#00008f', '#0000ff', '#008fff', '#8fffdb', '#ffff00', '#ff8f00', '#ff0000']; // 默认颜色标尺
可以看到，颜色标尺是一个包含七种颜色的数组，分别代表数据源中不同取值的颜色，值越小颜色越深。如果需要更改颜色标尺，也可以直接传入自定义的颜色数组。
heatmap.init(
'#heatmap-container', // 热力图容器的 DOM 元素（例如 div）
data, // 数据源
{
colorScale: ['#ff0000', '#ffff00', '#00ff00', '#0000ff', '#00ffff', '#ff00ff', '#000000'], // 自定义颜色标尺
}
);完整代码如下：
-- -------------------- ---- -------
------ -------------------- ---- -------------------------
----- ---- - ------ -- -------
----- ------- - --- -----------------------
-------------
--------------------- -- ------ --- ----- ----
----- -- ---
-
------ ---- -- -------- ---
------- ---- -- -------- ---
----------- ----------- ---------- ---------- ---------- ---------- ---------- ----------- -- -------
-
--结束语
以上就是 ultimate-heatmap-chart 的使用教程，可以根据实际需求灵活调整配置项，生成不同的热力图效果。希望本文能够对您有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005730081e8991b448e9281