快捷導(dǎo)航

react中使用heatmap.js實(shí)現(xiàn)熱力圖的繪制

更新時(shí)間：2023年12月11日 11:43:56 作者：心情無(wú)變化

heatmap.js?是一個(gè)用于生成熱力圖的?JavaScript?庫(kù),React?是一個(gè)流行的?JavaScript?庫(kù),用于構(gòu)建用戶(hù)界面,本小編給大家介紹了在React?應(yīng)用程序中使用heatmap.js實(shí)現(xiàn)熱力圖的繪制的示例,文中通過(guò)代碼示例介紹的非常詳細(xì),需要的朋友可以參考下

heatmap.js 是一個(gè)用于生成熱力圖的 JavaScript 庫(kù)，可以通過(guò)使用 Canvas 或 SVG 來(lái)可視化數(shù)據(jù)密度。React 是一個(gè)流行的 JavaScript 庫(kù)，用于構(gòu)建用戶(hù)界面，在 React 應(yīng)用程序中使用 heatmap.js，首先在你的項(xiàng)目中安裝 heatmap.js 庫(kù)。

使用 npm 或 yarn 命令來(lái)安裝

// NPM 
npm i heatmapjs

// yarn 
yarn add heatmapjs

導(dǎo)入h337庫(kù)

import h337 from 'heatmapjs'

創(chuàng)建熱力圖

// 創(chuàng)建熱力圖實(shí)例
const heatmapInstance = h337.create({ // 使用 h337 庫(kù)創(chuàng)建一個(gè)熱力圖實(shí)例
  container: this.heatmapRef.current, // 將熱力圖渲染到指定的容器中
  radius: 25, // 設(shè)置熱力圖的半徑大小為 25
  maxOpacity: .5, // 設(shè)置熱力圖的最大不透明度為 0.5
  minOpacity: 0, // 設(shè)置熱力圖的最小不透明度為 0
  blur: .75, // 設(shè)置熱力圖的模糊程度為 0.75
  level: 99, // 設(shè)置熱力圖的層級(jí)為 99,數(shù)值越大表示繪制越詳細(xì)
});

// 熱力圖數(shù)據(jù)點(diǎn)
const data = [ 
  { x: 10, y: 20, value: 5 },
  { x: 30, y: 40, value: 10 },
  { x: 50, y: 60, value: 8 },
];

// 將數(shù)據(jù)傳給熱力圖實(shí)例進(jìn)行渲染
heatmapInstance.setData({ data: heatmapData });

react實(shí)現(xiàn)的完整代碼

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 庫(kù)創(chuàng)建一個(gè)熱力圖實(shí)例
	  container: this.heatmapRef.current, // 將熱力圖渲染到指定的容器中
	  radius: 25, // 設(shè)置熱力圖的半徑大小為 25
	  maxOpacity: .5, // 設(shè)置熱力圖的最大不透明度為 0.5
	  minOpacity: 0, // 設(shè)置熱力圖的最小不透明度為 0
	  blur: .75, // 設(shè)置熱力圖的模糊程度為 0.75
	  level: 99, // 設(shè)置熱力圖的層級(jí)為 99,數(shù)值越大表示繪制越詳細(xì)
	});

	// 熱力圖數(shù)據(jù)點(diǎn)
    const data = [
      { x: 10, y: 20, value: 5 },
      { x: 30, y: 40, value: 10 },
      { x: 50, y: 60, value: 8 }
    ];
    
	// 將數(shù)據(jù)傳給熱力圖實(shí)例進(jìn)行渲染
    heatmapInstance.setData({ data })
  }
  
  render() {
    return (
      <div ref={this.heatmapRef} style={{ width: '100%', height: '100%' }} />
    )
  }
}

export default Heatmap