Wie kann ich die Gesamtzahl der Elemente in ReCharts anzeigen?

Question

Ich möchte wissen, wie auf die anderen Datenelemente im Feld 'Nutzlast' von recharts von Material-ui zugreifen. Ich versuchte nachzusehen, fand aber keine Hinweise. Ich möchte die anderen Gruppennamen und Werte in der ‚Rückkehr‘ Funktion kann

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

Sie nicht den gesamten Datensatz von innen renderActiveShape Zugriff zugreifen, da es die einzige erhalten einen einzelnen Abschnitt des Diagramms übergeben, nämlich den aktiven Abschnitt. Was Sie tun können, ist eine <Legend> Komponente bereitstellt:

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

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

Dann in Ihrem Diagramm:

<Legend content={renderLegend} /> 

Answer 2

Okay, so nach meinem Kopf für eine lange Zeit hämmern, hier ist die Lösung:

unabhängig von Daten Sie möchten für Ihren eigenen Zweck übergeben, fügen Sie einfach ein zusätzliches Feld in das erste Objekt ein und verwenden Sie es dann als Beispiel:

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

und schließlich in der piechart, nur payload.fieldName