当前位置：首页 > React

react 热力图如何制作

2026-01-24 08:30:37React

使用 react-heatmap.js 库

安装 react-heatmap.js 库：

npm install react-heatmap.js

引入并使用 HeatMap 组件：

import HeatMap from 'react-heatmap.js';

const data = [
  { x: 0, y: 0, value: 10 },
  { x: 1, y: 1, value: 20 },
  // 更多数据点...
];

function App() {
  return (
    <HeatMap
      data={data}
      width={500}
      height={500}
    />
  );
}

使用 react-calendar-heatmap 库

安装 react-calendar-heatmap：

npm install react-calendar-heatmap

基本日历热力图实现：

react 热力图如何制作

import CalendarHeatmap from 'react-calendar-heatmap';

const values = [
  { date: '2023-01-01', count: 12 },
  { date: '2023-01-02', count: 5 },
  // 更多日期数据...
];

function App() {
  return (
    <CalendarHeatmap
      startDate={new Date('2023-01-01')}
      endDate={new Date('2023-12-31')}
      values={values}
    />
  );
}

使用 D3.js 自定义实现

安装 D3.js：

npm install d3

自定义热力图组件示例：

react 热力图如何制作

import * as d3 from 'd3';
import { useEffect, useRef } from 'react';

function Heatmap({ data, width, height }) {
  const ref = useRef();

  useEffect(() => {
    const svg = d3.select(ref.current);

    // 清除现有内容
    svg.selectAll('*').remove();

    // 创建颜色比例尺
    const colorScale = d3.scaleSequential(d3.interpolateYlOrRd)
      .domain([0, d3.max(data, d => d.value)]);

    // 绘制热力图
    svg.selectAll('rect')
      .data(data)
      .enter()
      .append('rect')
      .attr('x', d => d.x * 30)
      .attr('y', d => d.y * 30)
      .attr('width', 28)
      .attr('height', 28)
      .attr('fill', d => colorScale(d.value));
  }, [data]);

  return <svg ref={ref} width={width} height={height} />;
}

使用 Deck.gl 地理热力图

安装 Deck.gl：

npm install deck.gl @deck.gl/react

地理热力图实现：

import { Deck } from '@deck.gl/core';
import { HeatmapLayer } from '@deck.gl/aggregation-layers';

const data = [
  { coordinates: [longitude, latitude], weight: value },
  // 更多地理数据点...
];

function App() {
  const layers = [
    new HeatmapLayer({
      id: 'heatmap-layer',
      data,
      getPosition: d => d.coordinates,
      getWeight: d => d.weight,
      radiusPixels: 30,
    })
  ];

  return <Deck layers={layers} initialViewState={{ longitude: 0, latitude: 0, zoom: 3 }} />;
}