0

如何将 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>
4

2 回答 2

0

如果你看一下Recharts提供的这个例子，你会发现如果你将一个 React 元素传递给 的dot属性，Line它将自动具有以下属性：并且是您正在寻找的价值。cx, cy, stroke, payload, valuecxcyvalue

您可以使用他们的 JSFiddle 示例来看看它是如何工作的： https ://jsfiddle.net/ps1a6jeu/5/

于 2019-01-28T23:46:36.313 回答
0

如果我错了，请纠正我，但您希望将两个属性传递给Line组件，以便您可以使用另一个来制作dynamic点。根据我的理解，这个用例不包括在内，因为子组件只能看到传递给父组件的内容，dataKey并且dataKey只接受一个stringand number，所以你不能传递一个object.

您可以使用LabelList. 我分叉了这个CustomziedDot例子并做了一些改变

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

看看这是否有帮助。

于 2019-09-25T11:45:10.890 回答