[英]How can I show the total number of elements in ReCharts?
I want to know how to access the other data items in the 'payload' field of recharts from material-ui. 我想知道如何从material-ui访问图表的“有效负载”字段中的其他数据项。 I tried looking up but found no references.
我尝试查找,但没有找到参考。 I want to access the other groupnames and values in the 'return' function
我想在“返回”功能中访问其他组名和值
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')
);
You can't access the whole dataset from inside renderActiveShape
as it only get's passed a single section of your chart, namely the active section. 您无法从
renderActiveShape
内部访问整个数据集,因为它仅传递了图表的单个部分,即活动部分。 What you could do is providing a <Legend>
component: 您可以做的是提供一个
<Legend>
组件:
const renderLegend = (props) => {
const { payload } = props;
return (
<p>Total count: {payload.length}</p>
);
}
Then inside your Chart: 然后在您的图表内:
<Legend content={renderLegend} />
Okay so after banging my head for a long time, here's the solution: 好吧,经过长时间的敲打,下面是解决方法:
whatever data you'd like to pass in for your own purpose, just add an extra field in the first object and then use it, example- 无论您要出于自己的目的传递任何数据,只需在第一个对象中添加一个额外的字段,然后使用它,例如-
const data = [{name: 'Group B', value: 14, total: 420, whatever: "myData", kiddingMe: "Yes"},{name: 'Group A', value: 2}, {name: 'Group C', value: 10}];
and finally in the piechart, just use payload.fieldName
最后在饼图中,只需使用
payload.fieldName
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.