Recharts自定义圆点：如何为StackedAreaChart传入坐标？

嘿，这个问题我熟！其实Recharts已经为我们提供了很方便的方式来传递坐标给自定义圆点组件，分两种场景给你讲清楚：

如果你想给堆叠面积图里的某条Area曲线的每个数据点都加上自定义样式的圆点，直接利用Recharts的dot属性就能实现——自定义的Dot组件会自动接收x（像素坐标）、y（像素坐标）和payload（对应的数据对象）这些参数，不用手动传递。

示例代码如下：

import React from 'react';
import { AreaChart, Area, XAxis, YAxis, CartesianGrid, Tooltip } from 'recharts';

// 自定义圆点组件，自动接收x、y、payload参数
const CustomizedDot = ({ x, y, payload }) => {
  // 你可以用payload拿到当前数据点的所有值，比如payload.name是X轴值，payload.underweight是Y轴值
  console.log('当前数据点:', payload);
  return (
    <circle 
      cx={x} 
      cy={y} 
      r={6} 
      fill="#ff4d4f" 
      stroke="#ffffff" 
      strokeWidth={2} 
      style={{ cursor: 'pointer' }}
    />
  );
};

const data = [
  { name: 142, underweight: 36.3, normal: 11.3, overweight: 6.8, obese: 56.7 },
  { name: 196, underweight: 70.3, normal: 22.1, overweight: 10.5, obese: 45.2 },
  { name: 250, underweight: 45.2, normal: 30.8, overweight: 15.3, obese: 38.7 }
];

const StackedAreaWithCustomDot = () => {
  return (
    <AreaChart width={600} height={300} data={data} margin={{ top: 10, right: 30, left: 0, bottom: 0 }}>
      <CartesianGrid strokeDasharray="3 3" />
      <XAxis dataKey="name" />
      <YAxis />
      <Tooltip />
      {/* 在需要自定义圆点的Area上设置dot属性 */}
      <Area 
        type="monotone" 
        dataKey="underweight" 
        stackId="1" 
        stroke="#8884d8" 
        fill="#8884d8" 
        dot={<CustomizedDot />} 
      />
      <Area type="monotone" dataKey="normal" stackId="1" stroke="#82ca9d" fill="#82ca9d" />
      <Area type="monotone" dataKey="overweight" stackId="1" stroke="#ffc658" fill="#ffc658" />
      <Area type="monotone" dataKey="obese" stackId="1" stroke="#ff8042" fill="#ff8042" />
    </AreaChart>
  );
};

export default StackedAreaWithCustomDot;

如果你想在图表的某个特定位置（比如X轴为196、Y轴为50的位置）添加圆点，就需要利用Recharts的比例尺（scale）函数，把数据域的值转换成图表内的像素坐标。

示例代码如下：

import React, { useRef, useEffect, useState } from 'react';
import { AreaChart, Area, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from 'recharts';

const data = [
  { name: 142, underweight: 36.3, normal: 11.3, overweight: 6.8, obese: 56.7 },
  { name: 196, underweight: 70.3, normal: 22.1, overweight: 10.5, obese: 45.2 },
  { name: 250, underweight: 45.2, normal: 30.8, overweight: 15.3, obese: 38.7 }
];

const StackedAreaWithArbitraryDot = () => {
  const chartRef = useRef(null);
  const [dotCoords, setDotCoords] = useState({ x: 0, y: 0 });

  useEffect(() => {
    if (chartRef.current) {
      // 获取图表的X轴和Y轴比例尺函数
      const { xScale, yScale } = chartRef.current;
      // 定义你想要定位的XY轴数据值
      const targetXData = 196;
      const targetYData = 50;
      // 把数据值转换成像素坐标
      const pxX = xScale(targetXData);
      const pxY = yScale(targetYData);
      setDotCoords({ x: pxX, y: pxY });
    }
  }, [data]); // 数据变化时重新计算坐标

  return (
    <ResponsiveContainer width="100%" height={300}>
      <AreaChart ref={chartRef} data={data} margin={{ top: 10, right: 30, left: 0, bottom: 0 }}>
        <CartesianGrid strokeDasharray="3 3" />
        <XAxis dataKey="name" />
        <YAxis />
        <Tooltip />
        <Area type="monotone" dataKey="underweight" stackId="1" stroke="#8884d8" fill="#8884d8" />
        <Area type="monotone" dataKey="normal" stackId="1" stroke="#82ca9d" fill="#82ca9d" />
        <Area type="monotone" dataKey="overweight" stackId="1" stroke="#ffc658" fill="#ffc658" />
        <Area type="monotone" dataKey="obese" stackId="1" stroke="#ff8042" fill="#ff8042" />
        {/* 添加自定义圆点 */}
        <circle 
          cx={dotCoords.x} 
          cy={dotCoords.y} 
          r={6} 
          fill="#1890ff" 
          stroke="#ffffff" 
          strokeWidth={2}
        />
      </AreaChart>
    </ResponsiveContainer>
  );
};

export default StackedAreaWithArbitraryDot;

解释一下：通过ref获取图表实例后，我们可以拿到xScale和yScale两个函数，它们能把你传入的XY轴数据值（比如196、50）转换成图表内部的像素坐标，这样就能精准定位自定义圆点的位置了。如果你的数据是动态更新的，记得把data加入useEffect的依赖数组，确保坐标会重新计算。

内容的提问来源于stack exchange，提问作者user9430503