Recharts Piechart - условное отображение метки на каждом разделе пирога - PullRequest
Новая
       6

Recharts Piechart - условное отображение метки на каждом разделе пирога

0 голосов
/ 13 июня 2018

Мне нужно сделать круговую диаграмму с тремя разделами, используя React Recharts.

У меня есть два вопроса:

  1. При наведении мыши, я хочу показать текст с процентами во всплывающей подсказке.как получить процентное значение во всплывающей подсказке?

  2. При изменении размера, если какой-то раздел в круговой диаграмме слишком мал, мне нужно скрыть метку;Как этого добиться?

Мой пример кода 

const {PieChart, Pie, Sector} = Recharts;
const data = [{name: 'Group A', value: 400}, {name: 'Group B', value: 300},
                  {name: 'Group C', value: 300}, {name: 'Group D', value: 200}]; 
function renderCustomToolTip({active, label, payload}) {
  return(
  <div>
    <p> payload[0].label </p>
// need to add percentage value in tooltip
  </div>
);
}
class PieChart extends from React.Component{
    constructor() {
        super(props);
        this.state = {
            activeIndex: 0
        }
    }
    onPieEnter(data, index) {
        this.setState({
          activeIndex: index,
        });
      }
      render () {
        return (
            <div>
                <PieChart width={800} height={400}>
                <Pie 
                    activeIndex={this.state.activeIndex}
                    activeShape={renderActiveShape} 
                    data={data} 
                    cx={300} 
                    cy={200} 
                    innerRadius={60}
                    outerRadius={80} 
                    fill="#8884d8"
                    labelLine={false}
                    label={renderCustomizedLabel}
                    onMouseEnter={this.onPieEnter}
                />
          {
            data.map((entry, index) => <Cell fill={COLORS[index % COLORS.length]}/>)
          }
          <ToolTip content={renderCustomToolTip} />
          </PieChart>
         </div>
      );
    }
}

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

Спасибо.

...