heatmap.js 是一个用于生成热力图的 JavaScript 库,可以通过使用 Canvas 或 SVG 来可视化数据密度。React 是一个流行的 JavaScript 库,用于构建用户界面,在 React 应用程序中使用 heatmap.js,首先在你的项目中安装 heatmap.js 库。
使用 npm 或 yarn 命令来安装
// NPM
npm i heatmapjs
// yarn
yarn add heatmapjs
导入h337库
import h337 from 'heatmapjs'
创建热力图
// 创建热力图实例
const heatmapInstance = h337.create({
// 使用 h337 库创建一个热力图实例
container: this.heatmapRef.current, // 将热力图渲染到指定的容器中
radius: 25, // 设置热力图的半径大小为 25
maxOpacity: .5, // 设置热力图的最大不透明度为 0.5
minOpacity: 0, // 设置热力图的最小不透明度为 0
blur: .75, // 设置热力图的模糊程度为 0.75
level: 99, // 设置热力图的层级为 99,数值越大表示绘制越详细
});
// 热力图数据点
const data = [
{
x: 10, y: 20, value: 5 },
{
x: 30, y: 40, value: 10 },
{
x: 50, y: 60, value: 8 },
];
// 将数据传给热力图实例进行渲染
heatmapInstance.setData({
data: heatmapData });
react实现的完整代码
import React, {
Component, createRef } from 'react';
import h337 from 'heatmapjs';
class Heatmap extends Component {
constructor (props){
super(props)
this.heatmapRef = createRef()
}
componentDidMount() {
const heatmapInstance = h337.create({
// 使用 h337 库创建一个热力图实例
container: this.heatmapRef.current, // 将热力图渲染到指定的容器中
radius: 25, // 设置热力图的半径大小为 25
maxOpacity: .5, // 设置热力图的最大不透明度为 0.5
minOpacity: 0, // 设置热力图的最小不透明度为 0
blur: .75, // 设置热力图的模糊程度为 0.75
level: 99, // 设置热力图的层级为 99,数值越大表示绘制越详细
});
// 热力图数据点
const data = [
{
x: 10, y: 20, value: 5 },
{
x: 30, y: 40, value: 10 },
{
x: 50, y: 60, value: 8 }
];
// 将数据传给热力图实例进行渲染
heatmapInstance.setData({
data })
}
render() {
return (
<div ref={
this.heatmapRef} style={
{
width: '100%', height: '100%' }} />
)
}
}
export default Heatmap