Question

我有一个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

Answer 1

您无需传递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" />
        );
    }
  };

Answer 2

用于定制点。 this.props已经包含： cx：数字， cy：数字，笔画：字符串，有效负载：对象，值：数字

cx和cy是您要使用的坐标，如果您也对数据感兴趣，那么this.props.payload可能就是您要使用的坐标。

重新定制自定义点

2 个答案: