8

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

当前代码的结果

4

3 回答 3

14

您无需传递 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" />
        );
    }
  };
于 2018-04-03T07:26:58.890 回答
3

用于定制点。this.props 已经包含：cx: Number, cy: Number, stroke: String, payload: Object, value: Number

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

于 2018-08-22T06:14:26.033 回答
0

与上述相同的解决方案，仅使用打字稿并作为功能组件：

import React from 'react';

export const CustomScatterDot: React.FC<{ cx: number, cy: number }> = ({ cx, cy }) => {
  return (
    <circle
        cx={cx - 10}
        cy={cy - 10}
        r={4}
        stroke='black'
        style={{opacity: "0.9"}}
        strokeWidth={2}
        fill={"green"} />
  );
};
于 2021-10-15T08:45:45.590 回答