ReChartsの要素の総数はどのように表示できますか？

Question

私はmaterial-uiからrechartsの 'ペイロード'フィールドの他のデータ項目にアクセスする方法を知りたいと思います。私は見上げてみましたが、参照が見つかりませんでした。私はそれが唯一のあなたのチャート、すなわち活性部分の単一セクションを通過し得るよう「戻る」機能

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内部からデータセット全体にアクセスすることはできませんで、他のgroupnamesと値にアクセスしたいです。長い間、私の頭を叩いた後、ここに解決策ですので

<Legend content={renderLegend} /> 

Answer 2

オーケー：

どんなデータ

その後

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

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

あなたのチャートの内部：何あなたができることは<Legend>コンポーネントを提供しています独自の目的のために渡す場合は、最初のオブジェクトに余分なフィールドを追加して使用してください。例：

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

、最終的にあなたが[ReChartsのソース]で見ることができるように円グラフで、ちょうどpayload.fieldName