Я пытаюсь вызвать функцию, основанную на активной точке строки в перерасчетах.
При значении по умолчанию true
при перемещении мыши по диаграмме отображается всплывающая подсказка по умолчанию, вертикальная подсвеченная линия сетки и точки на линии, как и ожидалось, увеличены.
Однако, скажем, я хочу вызвать событие с полезной нагрузкой из activeDot:
activeDotHandler(data) {
this.setState({ dotData: data }); // to be used in a different part of the webpage
}
render() {
return (
<LineChart ...>
<XAxis ... />
<YAxis ... />
<Tooltip />
<Line activeDot={this.activeDotHandler.bind(this)} ... />
</LineChart>
);
}
Это работает, но всплывающая подсказка и выделенная строка больше не отображаются, как если бы у вас было activeDot={true}
.
Возвращение true
из функции также не работает.
Я пробовал что-то вроде activeDot={{ onMouseOver: this.activeDotHandler.bind(this) }}
, но тогда мышь должна быть прямо над точкой.
Я просто хочу всплывающую подсказку по умолчанию и функцию activeDot с добавлением события с полезной нагрузкой activeDot.
Есть идеи, что я делаю не так? Заранее спасибо!
EDIT : Я также попытался добавить onMouseOver
к самому <LineChart>
, что помогло мне получить событие, содержащее полезную нагрузку активной точки. Тем не менее, этот STILL отключает всплывающую подсказку по умолчанию / выделенную сетку / стиль Activedot.
EDIT 2 : также пытался вернуть <circle>
после this.setState()
. Все та же проблема.