在 Recharts 中为图例和图表添加间距：详细指南

2024-03-15 04:49:47

在 Recharts 中使用绝对定位为图例和图表添加间距

简介

Recharts 是一个功能强大的图表库，它提供了创建交互式和可定制的图表的功能。但是，当使用绝对定位对图例进行定位时，在图例和图表之间添加间距可能会很棘手。本文将指导你如何使用绝对定位在 Recharts 中轻松为图例和图表添加特定数量的间距。

步骤

1. 创建一个包裹图例和图表的外层容器

创建一个 div，将它定位为绝对位置，并覆盖整个图表区域。这个容器将充当图例和图表之间的父元素。

<div style={{position: "absolute", width: "100%", height: "100%"}}>

2. 将图例放置在容器内

在容器内创建一个 div 来容纳图例。将这个 div 定位为绝对位置，并将其放置在容器的右上角。确保图例的大小和位置符合你的要求。

<div style={{position: "absolute", right: "0px", top: "0px"}}>
  <Legend
    align="right"
    verticalAlign="top"
    iconType="circle"
    iconSize={12}
    formatter={(value, entry) => {
      return <LegendText>{value} ({entry.payload.unit})</LegendText>
    }}
  />
</div>

3. 设置容器的高度

设置外层容器的高度以确保图例保持在容器内。这将防止图例超出图表区域。

<div style={{position: "absolute", width: "100%", height: "500px"}}>

4. 在容器和图表之间添加一个空元素

在容器和图表之间添加一个空 div 来创建间距。将这个空 div 定位为绝对位置，并设置它的高度为所需的间距。例如，要添加 65px 的间距，请设置以下样式：

<div style={{height: "65px"}}></div>

5. 放置图表

最后，将你的 Recharts 图表放置在容器内，确保它位于图例和空元素下方。

<BarChart data={data}
  barGap={8}>
  <CartesianGrid strokeDasharray="3 3" vertical={false} />
  <XAxis tickFormatter={(index) => index + 1} tickMargin={16} tickLine={false} />
  <YAxis orientation={"right"} tickMargin={16} axisLine={false} tickLine={false} />
  <Tooltip content={<CustomTooltip />} />
  <Bar name="Poids" unit="kg" dataKey="kilogram" fill="#282D30" barSize={7}
    radius={[10, 10, 0, 0]} />
  <Bar name="Calories brûlées" unit="kCal" dataKey="calories" fill="#E60000" barSize={7}
    radius={[10, 10, 0, 0]} />
</BarChart>