Событие Recharts не работает, когда значение столбца гистограммы равно 0

Я использую компоненты Recharts BarChart для визуализации моих данных. В компоненте панели он поддерживает несколько обработчиков событий (onClick, onMouseDown, так далее).

Мой вопрос: у меня есть обработчик событий onClick, поэтому пользователи могут нажимать на гистограмму и перенаправлять на другие страницы на основе идентификатора результата.

Моя проблема: если значение гистограммы равно 0, пользователи не могут щелкнуть ссылку, поскольку обработчик событий onClick реализован на самой панели.

Исходный код:

<BarChart
  width={500}
  height={500}
  layout="vertical"
  data={data}
>
  <XAxis type="number" />
  <YAxis dataKey="title" type="category" />
  <Bar
    dataKey="score"
    fill={Color}
    label={<CustomLabel />}
    onClick={(data, index) => {
      // some logic here
      return history.push(`/${data.x.y.id}`);
    }}
  />
</BarChart>

Снимок экрана: Образец изображения

Моя попытка:

Я попытался найти возможное решение и посмотреть примеры API на веб-сайте recharts, я не вижу ничего, что могло бы решить мою проблему. Я также пытался использовать onClick для заголовка на оси или панели, но компонент не поддерживает эту функцию. Пожалуйста, порекомендуйте.


reactjs recharts
person Melvin    schedule 22.06.2018    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Вы можете добавить атрибут onClick в компонент BarChart и проверить data.activePayload[0], чтобы узнать, какой гистограмма была нажата.

<BarChart
  width={500}
  height={500}
  layout="vertical"
  data={data}
  onClick={(data) => {
    // do your history.push based on data.activePayload[0]
    if (data && data.activePayload && data.activePayload.length > 0) {
      return history.push(`/${data.activePayload[0].x.y.id}`);
    }
  }}
>
  <XAxis type="number" />
  <YAxis dataKey="title" type="category" />
  <Bar
    dataKey="score"
    fill={Color}
    label={<CustomLabel />}
  />
</BarChart>
person Tom Van Rompaey    schedule 22.06.2018
comment
Условие if (data.activePayload.length > 0) не будет работать, поскольку данные null при щелчке по заголовку оси. Вместо этого используйте if (data). - person Melvin; 22.06.2018