如何显示ReCharts中元素的总数？

Question

我想知道如何从material-ui访问recharts的'payload‘字段中的其他数据项。我试着查了一下，但没有找到任何参考资料。我想访问'return‘函数中的其他组名和值

const {PieChart, Pie, Sector} = Recharts;
const data = [{name: 'Group B', value: 14},{name: 'Group A', value: 2}, {name: 'Group C', value: 10}];

const renderActiveShape = (props) => {
  const RADIAN = Math.PI / 180;
  const { cx, cy, midAngle, innerRadius, outerRadius, startAngle, endAngle,
    fill, payload, percent, value } = props;
  //payload is the data here...
  const sin = Math.sin(-RADIAN * midAngle);
  const cos = Math.cos(-RADIAN * midAngle);
  const sx = cx + (outerRadius + 10) * cos;
  const sy = cy + (outerRadius + 10) * sin;
  const mx = cx + (outerRadius + 30) * cos;
  const my = cy + (outerRadius + 30) * sin;
  const ex = mx + (cos >= 0 ? 1 : -1) * 22;
  const ey = my;
  const textAnchor = cos >= 0 ? 'start' : 'end';

  return (
    <g>
      <text x={cx} y={cy} dy={8} textAnchor="middle" fill={fill}>{payload.name}</text>

      {/*I want to know how to access the second element in the payload*/}

      <Sector
        cx={cx}
        cy={cy}
        innerRadius={innerRadius}
        outerRadius={outerRadius}
        startAngle={startAngle}
        endAngle={endAngle}
        fill={fill}
      />
      <Sector
        cx={cx}
        cy={cy}
        startAngle={startAngle}
        endAngle={endAngle}
        innerRadius={outerRadius + 6}
        outerRadius={outerRadius + 10}
        fill={fill}
      />
      <path d={`M${sx},${sy}L${mx},${my}L${ex},${ey}`} stroke={fill} fill="none"/>
      <circle cx={ex} cy={ey} r={2} fill={fill} stroke="none"/>
      <text x={ex + (cos >= 0 ? 1 : -1) * 12} y={ey} textAnchor={textAnchor} fill="#333">{`PV ${value}`}</text>
      <text x={ex + (cos >= 0 ? 1 : -1) * 12} y={ey} dy={18} textAnchor={textAnchor} fill="#999">
        {`(Rate ${(percent * 100).toFixed(2)}%)`}
      </text>
    </g>
  );
};

const TwoLevelPieChart = React.createClass({
    getInitialState() {
    return {
      activeIndex: 0,
    };
  },


    render () {
    return (
        <PieChart width={800} height={400} onMouseEnter={this.onPieEnter}>
        <Pie 
            activeIndex={this.state.activeIndex}
          activeShape={renderActiveShape} 
          data={data} 
          cx={300} 
          cy={200} 
          innerRadius={60}
          outerRadius={80} 
          fill="#8884d8"/>
       </PieChart>
    );
  }
})

ReactDOM.render(
  <TwoLevelPieChart />,
  document.getElementById('container')
);

Answer 1

您不能从renderActiveShape内部访问整个数据集，因为它只传递了图表的一个部分，即活动部分。您可以做的是提供一个组件：

const renderLegend = (props) => {
  const { payload } = props;

  return (
    <p>Total count: {payload.length}</p>
  );
}

然后在你的图表中：

<Legend content={renderLegend} />

Answer 2

好的，在我脑海中挣扎了很长一段时间后，下面是解决方案：

无论你想传递什么数据，只需在第一个对象中添加一个额外的字段，然后使用它，例如-

const data = [{name: 'Group B', value: 14, total: 420, whatever: "myData", kiddingMe: "Yes"},{name: 'Group A', value: 2}, {name: 'Group C', value: 10}];

最后，在拼图中，只需使用payload.fieldName