Question

正如在 this example 中所见，当您将鼠标放在画笔上时，会出现一个带有数据的标签，当您移动画笔上的滑块时，该日期会相应地更改。但在默认位置，标签在左右两侧都处于屏幕外。

从阅读 doc's 来看，似乎没有像其他 Recharts 组件那样可用于设置工具提示标签样式的字段，也没有任何选项可用于将填充应用于 Brush 以允许它小于可用区域，为标签留出空间。

有人有什么建议吗？可以在 CodeSandbox 链接的代码下方看到。

import "./styles.css";
import {
  ResponsiveContainer,
  LineChart,
  Line,
  XAxis,
  YAxis,
  CartesianGrid,
  Brush
} from "recharts";

export default function App() {
  const data = [
    { interval: "2021-01-01", resultCount: 2 },
    { interval: "2021-01-03", resultCount: 7 },
    { interval: "2021-01-05", resultCount: 1 },
    { interval: "2021-01-08", resultCount: 10 },
    { interval: "2021-01-10", resultCount: 2 },
    { interval: "2021-01-11", resultCount: 9 },
    { interval: "2021-01-15", resultCount: 5 },
    { interval: "2021-01-18", resultCount: 8 },
    { interval: "2021-01-21", resultCount: 0 },
    { interval: "2021-01-22", resultCount: 7 }
  ];
  return (
    <div className="App">
      <ResponsiveContainer width={500} height={300}>
        <LineChart data={data}>
          <YAxis
            dataKey="resultCount"
            label={{
              value: "No. of Posts",
              angle: -90,
              position: "insideLeft"
            }}
          />
          <XAxis
            dataKey="interval"
            label={{ value: "Time (day)", position: "bottom" }}
          />
          <CartesianGrid vertical={false} />
          <Line
            strokeWidth={2}
            dataKey="resultCount"
            stroke="#127ABF"
            dot={{ stroke: "#127ABF", strokeWidth: 3, fill: "#127ABF" }}
            isAnimationActive={false}
          />
          <Brush dataKey="interval" />
        </LineChart>
      </ResponsiveContainer>
    </div>
  );
}

Answer 1

TLDR;使用 stroke 道具（未记录，但在下面解释）

Brush 组件 (https://github.com/recharts/recharts/blob/master/src/cartesian/Brush.tsx) 从 react 中接收 SVGProps，因此您可以像这样设置组件的样式：

<Brush
  stroke="green"
/>

似乎，即使没有记录（https://recharts.org/en-US/api/Brush），您可以传递自定义 traveller，它可以是自定义 svg 元素（我还没有尝试过，但是可以在源文件中看到）。

希望这有帮助！（我在寻找答案时发现了这个，但阅读源代码最终引导我找到了 stroke 道具。

如何在 Recharts Brush 组件中设置标签样式？

1 个答案: