reactjs - Recharts activeDot 将有效负载返回为未定义

Question

目前我正在使用 Recharts 的 ComposedChart（折线图和条形图）。我想要实现的是将工具提示的“光标”属性设置为false，并为每个点的每个鼠标悬停创建我自己的工具提示。我看到了一个关于如何使用 activeDot ( https://codesandbox.io/s/o424486npz ) 的示例，但是当我尝试使用 activeDot 时，有效负载是未定义的。请参考我的代码。

function ComposedChartComponent(props) {
  const theme = useTheme();
  const classes = useStyles();
  const { chartData, setWidth, setHeight, chartMargin, barSize } = props;

  const customMouseOver = e => {
    console.log(e);
  };

  const customMouseLeave = e => {
    console.log('onMouseLeave');
  };

  return (
    <ComposedChart
      width={setWidth}
      height={setHeight}
      data={chartData}
      margin={chartMargin}
      className={classes.textSize}
    >
      <CartesianGrid vertical={false} />
      <XAxis
        dataKey="name"
        scale="band"
        interval={0}
        tick={<CustomizedAxisTick />}
      />
      <YAxis
        yAxisId="left"
        orientation="left"
        className={classes.yAxisStyles}
        tick={<CustomizedYAxisTick height={setHeight} />}
      />
      <YAxis
        yAxisId="right"
        orientation="right"
        domain={[0, 'datamax']}
        ticks={ticks}
        tickCount={11}
        tick={{ fill: theme.palette.text.primary }}
      />
      <Tooltip cursor={false} wrapperStyle={{ display: 'none' }} />
      <Bar
        yAxisId="left"
        dataKey="pv"
        barSize={30}
        fill="#FC6A03"
        label={
          <CustomBarLabel
            chartWidth={setWidth}
            data={chartData}
            width={barSize}
          />
        }
        isAnimationActive={false}
      />
      <Line
        activeDot={{
          onMouseOver: e => customMouseOver(e),
          onMouseLeave: customMouseLeave,
        }}
        yAxisId="right"
        type="monotone"
        dataKey="amt"
        stroke="#eaed40"
        dot={<CustomizedDot />}
        isAnimationActive={false}
      />
    </ComposedChart>

谁能指出为什么我的 onMouseOver 有效载荷未定义。

谢谢

标签： reactjs