h337

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

h337.create(configObject)

返回热力图实例（heatmapInstance）

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

configObject参数为必填参数。

参数配置

属性名称	类型	是否必选	描述
container	DOM	是	热力图将添加到的DOM节点（热力图画布将适应节点尺寸）
backgroundColor	string	否	以hexcode、颜色名称或rgb(a)形式的背景颜色字符串
gradient	object	否	表示渐变的对象，语法（number string [0,1] : color string），参考示例
radius	number	否	每个数据点的半径(如果没有在数据点本身上指定，则使用该半径)
opacity	number[0, 1] 默认：0.6	否	整个热图的全局不透明度。如果设置了maxOpacity和minOpacity，将覆盖maxOpacity和minOpacity!
maxOpacity	number[0, 1]	否	热力图中最大的不透明度值（如果设置了opacity，将会被opacity覆盖）
minOpacity	number[0, 1]	否	热力图中最小的不透明度值（如果设置了opacity，将会被opacity覆盖）
onExtremaChange	function callback		通过回调函数接受极值的变化更新。对DOM图例有用。
blur	number[0, 1] 默认值：0.85	否	将应用于所有数据点的模糊因子。模糊系数越高，渐变就越平滑
xField	string 默认值：’x’	否	数据点中x坐标的属性名
yField	string 默认值：’y’	否	数据点中y坐标的属性名
valueField	string 默认值：’value’	否	数据点中y坐标的属性名

配置示例

配置简单，带有标准梯度

// 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）

重新绘制整个热图画布