javascript - 绘制自定义点

我有一个StackedAreaChart，在图上显示区域后，我想添加一个自定义点。

目前，我的代码看起来像这样，但是我想根据XAxis和YAxis数据绘制一个点。是否存在将x和y坐标传递给CustomizedDot类的任何方法？

import React from 'react';
import { AreaChart, Area, XAxis, YAxis, CartesianGrid, Tooltip, Label, Dot } 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.7, overweight: 15.9, obese: 2.2 },
];

class CustomizedDot extends React.Component {
    render() {
        const { cx, cy } = this.props;

        return (
            <circle cx={160} cy={50} r={25} stroke="black" strokeWidth={3} fill="red" />
        );
    }
};

class BMIGraph extends React.Component {
    render() {
        return (
            <div>
                <h2>Index telesne mase za odrasle</h2>
                <AreaChart width={600} height={400} data={data} margin={{ top: 10, right: 30, left: 0, bottom: 0 }}>
                    <XAxis dataKey="name">
                        <Label value="Višina (cm)" offset={0} position="insideBottom" />
                    </XAxis>
                    <YAxis>
                        <Label value="Teža (kg)" angle={-90} position="insideLeft" textAnchor="middle" />
                    </YAxis>
                    <CartesianGrid strokeDasharray="3 3" />
                    {/* <Tooltip /> */}
                    <CustomizedDot />
                    <Area type='monotone' dataKey='underweight' stackId="1" stroke='#8884d8' fill='#7d7dff' animationDuration={3500} name="Podhranjenost" dot={<CustomizedDot />} />
                    <Area type='monotone' dataKey='normal' stackId="1" stroke='#82ca9d' fill='#7dff7d' animationDuration={3500} name="Normalna teža" />
                    <Area type='monotone' dataKey='overweight' stackId="1" stroke='#ffc658' fill='#ffff7d' animationDuration={3500} name="Prekomerna teža" />
                    <Area type='monotone' dataKey='obese' stackId="1" stroke='#ffc658' fill='#ff7d7d' animationDuration={3500} name="Debelost" />
                </AreaChart>
            </div>
        );
    }
}

export default BMIGraph;

The result of the current code

最佳答案

您无需传递X和Y轴数据。

通过使用

const { cx, cy } = this.props;

cx & cy保持您所需的x，y位置。

在CustomizedDot类中尝试一下

 class CustomizedDot extends React.Component {
    render() {
        const { cx, cy } = this.props;

        return (
            <circle cx={cx - 10} cy={cy - 10} r={25} stroke="black" strokeWidth={3} fill="red" />
        );
    }
  };