Question

当某人将线和线悬停时，我希望有两个不同的工具提示。默认情况下，Tooltip组件将两者视为相同，但是它们是两种不同类型的数据。这就是为什么我要根据用户的悬停情况分别为每个工具提示。

我正在尝试首先针对Line图表进行计算，并且我确信对于Bar图表将相同。我正在使用activeDot对象来知道用户将鼠标悬停在哪个点上。尽管它触发了onMouseOver函数，但是它不包含任何数据来知道它是哪个点。我可以做些什么来使数据像定制的Tooltip内容一样（在我的代码中为CustomizedTooltip）。例如label，payload等

这是我到目前为止所拥有的，CodeSandBox

Answer 1

这里的想法是维护要显示其工具提示的state图表。

然后更新状态onMouseOver并在onMouseLeave上重置状态。

请在CodeSandBox

中找到您的更新代码

import * as React from "react";
import { render } from "react-dom";
import {
  ResponsiveContainer,
  ComposedChart,
  Line,
  Bar,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  Legend
} from "recharts";

const data = [
  { name: "" },
  { name: "Monday", uv: 265, pv: 800 },
  { name: "Tuesday", uv: 475, pv: 967 },
  { name: "Wednesday", uv: 624, pv: 1098 },
  { name: "Thursday", uv: 856, pv: 1200 },
  { name: "Friday", uv: 1024, pv: 1108 },
  { name: "Saturday", uv: 1116, pv: 1220 },
  { name: "Sunday", uv: 1208, pv: 1358 },
  { name: "" }
];

const formatter = (value: string) => `$${value}`;

class CustomizedTooltip extends React.PureComponent<any> {
  render() {
    const { label, payload, active, chartType } = this.props;

    if (!active || !label || payload.length === 0) return null;

    return (
      <div className="i-will-customize-tooltip-later">
        <p className="label">{`${label} : ${payload[chartType].value}`}</p>
      </div>
    );
  }
}

class CustomizedDot extends React.PureComponent<any> {
  render() {
    const { cx, cy, value } = this.props;

    if (!value) {
      return null;
    }

    return (
      <svg
        x={cx - 5}
        y={cy - 5}
        width={10}
        height={10}
        viewBox="0 0 10 10"
        fill="#ff7385"
      >
        <rect width="10" height="10" />
      </svg>
    );
  }
}

class LineBarAreaComposedChart extends React.PureComponent<any, any> {
  constructor(){
    super({})
    this.state = {
      chartType: 0
    }
  }
  render() {
    return (
      <ResponsiveContainer minHeight={500}>
        <ComposedChart
          width={800}
          height={400}
          data={data}
          margin={{ top: 20, right: 20, bottom: 20, left: 20 }}
        >
          <CartesianGrid stroke="#efefef" vertical={false} />
          <XAxis
            dataKey="name"
            type="category"
            axisLine={false}
            tickLine={false}
          />
          <YAxis
            dataKey="pv"
            tickFormatter={formatter}
            type="number"
            axisLine={false}
            tickLine={false}
          />
          <Tooltip cursor={false} content={<CustomizedTooltip chartType={this.state.chartType}/>} />
          <Legend />
          <Bar name="Donation total" dataKey="pv" barSize={80} fill="#48bbee" />
          <Line
            name="Average dontaion trend"
            type="monotone"
            dataKey="uv"
            data={data}
            stroke="#ff7385"
            dot={<CustomizedDot />}
            activeDot={{
              onMouseOver: (e: any) => this.setState({chartType: 1}),
              onMouseLeave: (e: any) => this.setState({chartType: 0})
            }}
          />
        </ComposedChart>
      </ResponsiveContainer>
    );
  }
}

render(<LineBarAreaComposedChart />, document.getElementById("root"));

图表-如何为折线图和条形图提供两个不同的工具提示

1 个答案: