[JavaScript知识库]heatmap.js 中文文档

h337

h337 是heatmap.js 全局注册的对象名。你可以使用它来创建热图实例。

h337.create(configObject)

返回热力图实例（heatmapInstance）

使用h337.create 创建热力图实例，可通过configObject 参数自定义****。****

configObject参数为必填参数。

参数配置

配置示例

配置简单，带有标准梯度

// create configuration object
var config = {
  container: document.getElementById('heatmapContainer'),
  radius: 10,
  maxOpacity: .5,
  minOpacity: 0,
  blur: .75
};
// create heatmap with configuration
var heatmapInstance = h337.create(config);

自定义渐变配置

// create configuration object
var config = {
  container: document.getElementById('heatmapContainer'),
  radius: 10,
  maxOpacity: .5,
  minOpacity: 0,
  blur: .75,
  gradient: {
    // enter n keys between 0 and 1 here
    // for gradient color customization
    '.5': 'blue',
    '.8': 'red',
    '.95': 'white'
  }
};
var heatmapInstance = h337.create(config);

heatmapInstance

heatmap 实例由h337.create返回。heatmap 实例有它自己的内部数据存储和渲染器，您可以在其中操作数据。因此，热图得到了更新(部分更新或完全更新，取决于是否有必要)。

heatmapInstance.addData(object|array)

返回热力图实例（heatmapInstance）

仅将此功能用于动态添加数据点，而不是用于数据初始化！heatmapInstance.addData将单个或多个数据点添加到热图的数据存储中。

// a single datapoint
var dataPoint = {
  x: 5, // x coordinate of the datapoint, a number
  y: 5, // y coordinate of the datapoint, a number
  value: 100 // the value at datapoint(x, y)
};
heatmapInstance.addData(dataPoint);

// multiple datapoints (for data initialization use setData!!)
var dataPoints = [dataPoint, dataPoint, dataPoint, dataPoint];
heatmapInstance.addData(dataPoints);

heatmapInstance.setData(object)

返回热力图实例（heatmapInstance）

使用数据集初始化热图实例。min、max和data属性是必需的。setData从 heatmap 实例中删除所有先前存在的点，并重新初始化数据存储。

var data = {
  max: 100,
  min: 0,
  data: [
    dataPoint, dataPoint, dataPoint, dataPoint
  ]
};
heatmapInstance.setData(data);

heatmapInstance.setDataMax(number)

返回热力图实例（heatmapInstance）

更改数据集的上限并触发完整的重新渲染。

heatmapInstance.setDataMax(200);
// setting the maximum value triggers a complete rerendering of the heatmap
heatmapInstance.setDataMax(100);

heatmapInstance.setDataMin(number)

返回热力图实例（heatmapInstance）

更改数据集的下界并触发完整的重新渲染。

heatmapInstance.setDataMin(10);
// setting the minimum value triggers a complete rerendering of the heatmap
heatmapInstance.setDataMin(0);

heatmapInstance.configure(configObject)

返回热力图实例（heatmapInstance）

在初始化后重新配置热图实例。触发完整的重新渲染。

var nuConfig = {
  radius: 10,
  maxOpacity: .5,
  minOpacity: 0,
  blur: .75
};
heatmapInstance.configure(nuConfig);

heatmapInstance.getValueAt(object)

返回一个可持久化和可重新导入(带有setData)的JSON对象

注意：如果点不在存储中，返回值是一个基于梯度混合的插值值。

heatmapInstance.addData({ x: 10, y: 10, value: 100});
// get the value at x=10, y=10
heatmapInstance.getValueAt({ x: 10, y: 10 }); // returns 100

heatmapInstance.getData()

返回一个可持久化和可重新导入(带有setData)的JSON对象

var currentData = heatmapInstance.getData();
// now let's create a new instance and set the data
var heatmap2 = h337.create(config);
heatmap2.setData(currentData); // now both heatmap instances have the same content

heatmapInstance.getDataURL()

返回 dataURL 字符串

返回值是 heatmap 实例的 base64 编码的 dataURL。

heatmapInstance.getDataURL(); // data:image/png;base64...
// ready for saving locally or on the server

heatmapInstance.repaint()

返回热力图实例（heatmapInstance）

重新绘制整个热图画布

创作打卡挑战赛

赢取流量/现金/CSDN周边激励大奖