Question

如何将dataKey的值传递给另一个组件？我有一个带有自定义点的折线图，该点需要数据中的值。如何将数据键的值传递给它？

const data = [
    { name: 'abc', value: '1' },
    { name: 'cde', value: '2',},
    { name: 'fgh', value: '3' }
    ...
];

<LineChart data={data} margin={{ right: 50, left: 50 }}>
    <Tooltip />
    <Line type="monotone" dataKey="value" stroke="black" strokeWidth="1px" dot={<CustomDot name={[[[name dataKey]]]} />} />
</LineChart>

Answer 1

如果您查看由Recharts提供的this example，您会发现，如果将React元素传递给dot的{{1}}属性，它将具有以下内容自动设置属性：Line，其中cx, cy, stroke, payload, value和cx是绘制点所需的坐标，而cy是要查找的值。

您可以尝试使用其JSFiddle示例，以了解其工作原理：https://jsfiddle.net/ps1a6jeu/5/

Answer 2

如果我错了，请纠正我，但您希望将两个属性传递到Line组件中，以便可以使用另一个属性制作dynamic点。据我了解，该用例未涵盖在内，因为子组件仅以dataKey的身份看到传递给父组件的内容，而dataKey仅接受string和number ，因此您无法通过object。

您可以使用LabelList实现相同的功能。我分叉了CustomziedDot的示例并进行了一些更改

https://jsfiddle.net/hs86kb97/11/

看看是否有帮助。

图表-将dataKey的值传递给子组件

2 个答案: