Recharts - Подсказка для каждого бара в гистограмме, состоящей из трех баров - PullRequest
Новая
       21

Recharts - Подсказка для каждого бара в гистограмме, состоящей из трех баров

0 голосов
/ 22 марта 2019

В моей гистограмме три разных бара.
Я хотел бы иметь всплывающую подсказку для каждого столбца гистограммы, а не только один для трех. 

import React from "react";
import {BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend} from "Recharts";
const data = [
      {name: 'Page A', uv: 4000, pv: 1982, amt: 2400},
      {name: 'Page B', uv: 3000, pv: 1398, amt: 4739},
      {name: 'Page C', uv: 2000, pv: 9800, amt: 9056},
      {name: 'Page D', uv: 2780, pv: 3908, amt: 2000},
      {name: 'Page E', uv: 1890, pv: 4678, amt: 2181},
      {name: 'Page F', uv: 2390, pv: 3800, amt: 2873},
      {name: 'Page G', uv: 3490, pv: 1987, amt: 2100},
];
class SimpleBarChart extends React.Component{
    render () {
    return (
        <BarChart width={600} height={300} data={data}
            margin={{top: 5, right: 30, left: 20, bottom: 5}}>
       <CartesianGrid strokeDasharray="3 3"/>
       <XAxis dataKey="name"/>
       <YAxis/>
       <Tooltip />
       <Legend />
       <Bar dataKey="pv" barSize={20} fill="#8884d8" />
       <Bar dataKey="amt" barSize={20} fill="#82ca9d" />
       <Bar dataKey="uv" barSize={20} fill="#ffc658" />
      </BarChart>
    );
  }
}
export default SimpleBarChart;

1 Ответ

0 голосов
/ 17 апреля 2019

Вы можете создать настраиваемую всплывающую подсказку, как показано в следующем примере:

http://recharts.org/en-US/examples/CustomContentOfTooltip <---- Пример настраиваемой подсказки (из документации по перерасчетам) </p>

После созданиянастраиваемую подсказку, вы можете вызвать ее в свойстве OnMouseOver компонента Bar, которое находится в документации здесь:

http://recharts.org/en-US/api/Bar#onMouseOver <---- OnMouseOver </p>

Вы также можете использовать OnMouseEnter иOnMouseLeave, но я знаю, что это работает не для всех.

Возможно, вы захотите создать функцию, которая отображает всплывающую подсказку, когда мышь наводит курсор на полосу, и скрывает подсказку, когда мышь перестает зависать над полосой.

...