Recharts - передать значение 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>

reactjs html css recharts
person Community    schedule 28.01.2019    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Если вы посмотрите этот пример, предоставленный Recharts, вы увидите, что если вы передаете элемент React в свойство dot объекта Line, он будет автоматически иметь следующие свойства: cx, cy, stroke, payload, value, где cx и cy - координаты, которые вам нужно нарисовать, а value - это значение, которое вы ищете.

Вы можете поиграть с их примером JSFiddle, чтобы увидеть, как все это работает: https://jsfiddle.net/ps1a6jeu/5/

person Claire Lin    schedule 28.01.2019
comment
Я думаю, он говорит о передаче компоненту более одного значения. В этом примере мы передаем одно значение, то есть value, и используем его для вычисления smileys на основе этого, но что, если данные ранее были отображены в массиве. - person json singh; 25.09.2019

arrow_upward
0
arrow_downward

Поправьте меня, если я ошибаюсь, но вы хотите передать два свойства в компонент Line, чтобы вы могли использовать другое для создания dynamic точек. Насколько я понимаю, этот вариант использования не рассматривается, поскольку дочерние компоненты видят только то, что было передано родителю, поскольку dataKey и dataKey принимают только string и number, поэтому вы не можете передать object.

Вы можете достичь той же функциональности, используя LabelList. Я раздвоил пример CustomziedDot и внес некоторые изменения

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

Посмотрим, поможет ли это.

person json singh    schedule 25.09.2019