Компонент не отображается при добавлении пользовательской метки в ReferenceLine в графиках - PullRequest
Новая
       16

Компонент не отображается при добавлении пользовательской метки в ReferenceLine в графиках

0 голосов
/ 26 июня 2019

Я пытаюсь добавить пользовательскую метку с круглой рамкой справа от ReferenceLine, как показано здесь https://imgur.com/a/svCsNVZ, и, как говорится, вы можете сделать это в документации здесь http://recharts.org/en-US/api/ReferenceLine#label.

Проблема, с которой мы сталкиваемся, заключается в том, что всякий раз, когда мы пытаемся передать сюда компонент <ReferenceLine {...props} label={<CustomizedLabel />} />, ничто никогда не отображается, независимо от того, что я пытаюсь.

1009 * Я не могу найти ни одного примера, где они конкретно сделали это к метке опорной линии, но удалось получить компонент проходящее функциональность работает для точек данных, так что я не знаю, где мыидет не так, как надо.

В настоящее время мы можем настроить метку, используя объект, но при передаче нашего собственного элемента ничего не отображается. 

<ReferenceLine
                  y={dataLimits.lL}
                  stroke={Colors.red.hex}
                  strokeDasharray="3 3"
                  label={{
                    position: "right",
                    value: dataLimits.lL,
                    fill: "#595959",
                    fontSize: "0.75rem"
                  }}
                  ifOverflow="extendDomain"
                />

Мы хотим преобразовать это в 

<ReferenceLine
                  y={dataLimits.lL}
                  stroke={Colors.red.hex}
                  strokeDasharray="3 3"
                  label={<LimitLabel />}
                  ifOverflow="extendDomain"
                />

где LimitLabel имеет указанные выше свойства, но с круглой рамкой.

На консоли не отображаются сообщения об ошибках, и в DOM не отображаются компоненты, где это должно быть.

Этоjsfiddle с нашей текущей реализацией без пользовательского компонента, если это помогает продемонстрировать https://jsfiddle.net/rbyztucn/1/

1 Ответ

1 голос
/ 27 июня 2019

Документы по перерасчетам на этом действительно ограничены, но из моих экспериментов и идеи @rebecca об использовании элементов SVG я понял, что метка prop на этих компонентах ReferenceLine ожидает элемент SVG, а не элемент React DOM.

Я обновлю этот комментарий, когда узнаю больше о позиционировании этих элементов;У меня такое чувство, что я могу использовать встроенные утилиты поиска Recharts, чтобы сделать это довольно легко.

Приятным побочным эффектом этого является то, что вы также можете легко передавать значки SVG на эти метки.

...