heatmap.js 使用文档

文件heatmap.min.js

地址 https://www.patrick-wied.at/static/heatmapjs/

 

创建

var heatmap1 = h337.create({
  	container: domElement, //容器
		backgroundColor, // 背景颜色
		gradient: {//渐变颜色
        "0": "#469b2c",//value为0的颜色
        "0.025": "#096dca",//value为50的颜色
        "0.1": "#dabb24",//value为200的颜色
        "0.25": "#dd8108",//value为500的颜色
        "0.5": "#aa3489",//value为1000的颜色
        "1": "red",//value为2000的颜色
    }, 
	    radius, //半径
	    opacity, //透明
	    maxOpacity, //热图中最大值具有的最大不透明度
	    minOpacity, //热图中最小值的最小不透明度
	    onExtremaChange, //传递回调以接收极值更改更新
	    blur, //将应用于所有数据点的模糊因子。模糊因子越高，渐变将越平滑
	    xField, //数据点中x坐标的属性名称
	    yField, //数据点中y坐标的属性名称
	    valueField //数据点中y坐标的属性名称
});

 

更新数据

heatmap.setData({
  max: 5,
  data: [{ x: 10, y: 15, value: 5}, ...]
});

 

添加数据

heatmap.addData(
{
  max: 5,
  data: [{ x: 10, y: 15, value: 5}, ...]
})

 

更新最大、最小值

heatmap.setDataMax();
heatmap.setDataMin();

 

更新配置

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

 

获取数据

heatmap.getData(); //获取数据

 

数据点位置处的值

heatmap.addData({ x: 10, y: 10, value: 100});// 添加一个点

heatmap.getValueAt({ x: 10, y: 10 }); // 查询这个位置的点

 

截图功能

heatmap.getDataURL(); // base64实例

重绘

heatmap.repaint(); // 重绘整个heatmap画布