从heatmap.js v1.0迁移到v2.0的完整指南

从heatmap.js v1.0迁移到v2.0的完整指南

heatmap.js 🔥 JavaScript Library for HTML5 canvas based heatmaps 项目地址: https://gitcode.com/gh_mirrors/he/heatmap.js

前言

heatmap.js作为一款优秀的热力图可视化库，在v2.0版本中对API进行了重大改进和简化。本文将详细介绍如何将项目从v1.0平滑迁移到v2.0版本，帮助开发者理解新版本的核心变更点。

核心配置变更

1. element属性更名为container

在v1.0版本中，我们使用element属性来指定热力图的容器DOM元素。v2.0版本将其更名为container，使语义更加明确。

v1.0写法：

var cfg = {
   "element": domElement
};

v2.0写法：

var cfg = {
   "container": domElement
};

2. opacity属性调整为maxOpacity

v1.0中的opacity属性在v2.0中被拆分为更精细的控制参数：

• maxOpacity：控制数据点的最大不透明度
• minOpacity：控制数据点的最小不透明度
• opacity：全局不透明度（会影响所有数据点）

重要变化：

• 所有不透明度值现在使用0-1的小数表示，而非百分比
• 要实现平滑渐变效果，应使用maxOpacity而非opacity

v1.0写法：

var cfg = {
   "opacity": 80  // 80%不透明度
}

v2.0写法：

var cfg = {
   "maxOpacity": 0.8  // 使用小数表示
}

数据操作API简化

v2.0版本对数据操作API进行了大幅简化，移除了冗余的store中间层。

1. 添加数据点

v1.0写法：

heatmap.store.addDataPoint(x, y, value);

v2.0写法：

heatmap.addData({ x: 100, y: 100, value: 10 });

2. 设置数据集

v1.0写法：

heatmap.store.setDataSet({
   max: 10,
   data: [...]
});

v2.0写法：

heatmap.setData({
   max: 10,
   data: [...]
});

3. 自定义值字段

v2.0默认使用value字段表示数据点值，但支持自定义字段名：

var heatmap = h337.create({
   valueField: 'count'  // 使用count字段代替value
});

heatmap.addData({ x: 100, y: 100, count: 10 });

完整迁移示例

下面是一个完整的v1.0配置迁移到v2.0的示例：

v1.0配置：

var cfg = {
   "element": domElement,
   "opacity": 80
}

var heatmap = h337.create(cfg);
heatmap.store.setDataSet(data);

v2.0配置：

var cfg = {
   "container": domElement,
   "maxOpacity": 0.8
}

var heatmap = h337.create(cfg);
heatmap.setData(data);

迁移建议

1. 逐步迁移：可以先从配置项开始修改，再调整数据操作方法
2. 测试验证：迁移后应仔细检查热力图的渲染效果，特别是透明度相关表现
3. 利用默认值：v2.0提供了更合理的默认配置，可以减少不必要的参数设置

总结

heatmap.js v2.0通过简化API和优化配置项，提供了更直观的开发体验。理解这些关键变更点后，开发者可以轻松完成版本迁移工作。新版本不仅保持了原有的强大功能，还通过更清晰的API设计提高了代码的可维护性。

heatmap.js 🔥 JavaScript Library for HTML5 canvas based heatmaps 项目地址: https://gitcode.com/gh_mirrors/he/heatmap.js