ck-hotmap

ChunkDing 改写的 hotmap 组件

初始化参数

hotMap.create(configObject)

可能的配置属性

• container：(DOMNode)必填 , 应附加热图画布的 DOM 节点（热​​图将适应节点的大小）
• backgroundColor：(字符串)可选 , 十六进制代码、颜色名称或 rgb(a) 形式的背景颜色字符串
• gradient：（对象）可选 表示渐变的对象（语法：数字字符串 [0,1]：颜色字符串），查看示例
• radius：（数字）可选 每个数据点的半径（如果数据点本身未指定）
• opacity：(数字) 可选 [0 - 1] 默认值 = .6; 整个热图的全局不透明度。如果设置，它将覆盖 maxOpacity 和 minOpacity！
• maxOpacity：（数字）可选 [0 - 1] 热图中最高值的最大不透明度。（如果设置了不透明度，将被覆盖）
• minOpacity：（数字）可选 [0 - 1] 热图中最低值的最小不透明度（如果设置了不透明度，则会被覆盖）
• onExtremaChange：函数回调 可选 , 传递一个回调来接收极值变化更新。对 DOM 图例很有用。
• blur：(number) 可选 [0,1] 默认值 = 0.85; 将应用于所有数据点的模糊系数。模糊系数越高，渐变越平滑
• xField：(字符串) 可选 默认值 = “x”, 数据点中 x 坐标的属性名称
• yField：(字符串) 可选 默认值 = “y”, 数据点中 y 坐标的属性名称
• valueField： (字符串) 可选 默认值 = “value”, 数据点中 y 坐标的属性名称

用法

import Hotmap, { HeatmapInitConfig, generateData } from 'ck-hotmap'
// generateData: 生成随机数据的方法
const data = generateData(X轴最大尺寸, Y轴最大尺寸, 随机点总量)
const map = Hotmap.create(ConfigObject: HeatmapInitConfig)
map.setData(data)

实例方法

• hotmapInstance.addData(对象|数组):
  • 返回: hotmapInstance
  • 描述: 仅使用此功能来动态添加数据点，而不是用于数据初始化！hotmapInstance.addData 将单个或多个数据点添加到热图的数据存储中。
• hotmapInstance.setData（对象）
  • 返回: hotmapInstance
  • 描述: 使用数据集初始化热图实例。需要“min”、“max”和“data”属性。setData从热图实例中删除所有先前存在的点并重新初始化数据存储。
• hotmapInstance.setDataMax（数字）
  • 返回: hotmapInstance
  • 描述: 改变数据集的上限并触发完整的重新渲染。
• hotmapInstance.setDataMin（数字）
  • 返回: hotmapInstance
  • 描述: 更改数据集的下限并触发完整的重新渲染。
• hotmapInstance.configure（configObject）
  • 返回: hotmapInstance
  • 描述: 在初始化热图实例后重新配置它。触发完整的重新渲染。
• hotmapInstance.getValueAt（对象）
  • 返回: hotmapInstance
  • 描述: 数据点位置的值
• hotmapInstance.getData() [
  • 返回: 可持久化且可重新导入
  • 描述: （使用 setData）的 JSON 对象]
• hotmapInstance.getDataURL()
  • 返回: dataURL
  • 描述: 回的值是热图实例的 base64 编码的 dataURL。
• hotmapInstance.repaint()
  • 返回: hotmapInstance
  • 描述: 重新绘制整个热图画布