Перепишите всплывающую подсказку, чтобы показать дополнительную подпорку - PullRequest
Новая
       3

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

0 голосов
/ 09 марта 2020

Я использую точечную диаграмму из Rechart

Данные отображаются нормально, но я хочу всплывающую подсказку, чтобы отобразить дополнительную всплывающую подсказку (название элемента), так же, как это происходит на диаграмме. Я обнаружил, что могу полностью настроить подсказку, но мне интересно, есть ли более простой способ? как опора, которую я не знаю, как использовать. do c не совсем ясно, как использовать некоторые реквизиты

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

<ScatterChart
          width={400}
          height={400}
          margin={{
            top: 20, right: 20, bottom: 20, left: 20,
          }}
        >
          <CartesianGrid />
          <XAxis type="number" dataKey="sizeMB" name="Size" unit=" MB" />
          <YAxis type="number" dataKey="directReferenceCount" name="# of References" unit=" References" />
          <Tooltip cursor={{ strokeDasharray: '3 3' }} dataKey={'fullName'} label={'fullName'} />
          <Scatter name="Line Item" data={this.props.data} fill="#8884d8">

          </Scatter>
        </ScatterChart>

1 Ответ

0 голосов
/ 23 марта 2020

Я не нашел решения, кроме использования полной пользовательской подсказки. вот код: 

  const CustomTooltip = ({ active, payload, label }) => {
  if (active) {
    return (
      <div className="custom-tooltip">
        <p className="intro">{payload[0].payload.fullName}</p>
        <p className="desc">size: {payload[0].payload.sizeMB}</p>
      </div>
    );
  }

  return null;
};

И у меня возникли проблемы с поиском того же css, что и у исходной подсказки, но вот оно: 

.custom-tooltip{
    margin: 0;
    line-height: 24px;
    border: 1px solid #f5f5f5;
    background-color: rgba(255, 255, 255, 0.8);
    padding: 10px;
}

.intro {
  border-top: 1px solid #f5f5f5;
  margin: 0;
}

.desc {
  margin: 0;
  color: rgb(3, 62, 146)
}
...