Блог

Главная - Вопросы по программированию - Подзаряжает метку всплывающей подсказки карты деревьев

Подзаряжает метку всплывающей подсказки карты деревьев

#reactjs #recharts

Вопрос:

При создании TreeMap с <Tooltip/> помощью как мне получить метку во всплывающей подсказке?

Я получаю только подсказки, такие как : 5738

В самой карте деревьев имена отображаются правильно.

У меня такое же поведение, когда я открываю пример из документов rechart в codesandbox и добавляю подсказку.

Я также поиграл с пользовательской подсказкой, но не смог заставить ее работать.

Ответ №1:

Мне пришлось сделать пользовательскую подсказку, чтобы заставить это работать.

Это также поместит имя ячейки (корневое имя) во всплывающую подсказку.

 const CustomTooltip = ({ active, payload, label }) => {
  
  if (active amp;amp; payload amp;amp; payload.length) {
    return (
      <div className="treemap-custom-tooltip">
        <p>{`${payload[0].payload.root.name}`}</p>
        <p>{`${payload[0].payload.name} : ${payload[0].value}`}</p>
      </div>
    );
  }

  return null;
};



<Treemap
        width={400}
        height={400}
        aspectRatio={4 / 3}
        data={formattedData}
        dataKey="size"
        stroke="#fff"
        fill="#8884d8"
      >
        <Tooltip content={<CustomTooltip />}/>
</Treemap>
Метки: