如何解决React Recharts 如何为每个图表传递多列数据?
我已经构建了自己的 rechart 工具提示元素,我可以设法从输入文件夹自动生成图表,而且我还设法为每个图表和每列显示工具提示。我的问题是,每一列都显示第一列的名称和值。我试图映射我的数据数组,但它没有显示任何内容。这是我的代码:
Chart1.js 用于构建图表
const dataForView = [
{
name: '',data: props.teszt.Location_name,},{
name: 'PCA value',data: props.teszt.PCA_value,{
name: 'bulding Cells',data: props.teszt.Cells_where_building_label,{
name: 'vegetation Cells',data: props.teszt.Cells_where_vegetation_label,{
name: 'Avg buildings',data: props.teszt.Avg_building_labels,{
name: 'Avg vegetation',data: props.teszt.Avg_vegetation_labels,{
name: "",data: props.teszt.Picture_name,];
const id = 1;
const renderTooltip = () => {
const fax = Object.keys(jsons).map((index) =>
<AreaChartTooltip data={dataForView[index]} i={index} />
);
return (
/* fax */
<AreaChartTooltip data={dataForView} i={id} />
)
};
return (
<BarChart
width={800}
height={400}
data={data}
margin={{
top: 20,left: 20
}}
centered
>
<Cartesiangrid strokeDasharray="3 3" />
<XAxis dataKey="name" />
<YAxis />
<Tooltip content={renderTooltip} />
<Legend />
<Bar dataKey="data" fill="#9aad45">
<LabelList dataKey="data" position="top" />
</Bar>
</BarChart>
);
}
以及内置的 ChartTooiltip - chartCard.js
export default function AreaChartTooltip(props) {
const classes = useStyles();
const {data = {},i} = props;
const [expanded,setExpanded] = React.useState(false);
const handleExpandClick = () => {
setExpanded(!expanded);
};
return (
<Card className={classes.root}>
<CardHeader
title={data[0].data}
subheader={data[i].name +": "+ data[i].data}
/>
<CardMedia
className={classes.media}
title="maps"
image={image}
style={styles.media}
/>
<CardContent>
<Typography variant="body2" color="textSecondary" component="p">
</Typography>
</CardContent>
...
在这个 § 下方就是图像,你可以看到图表的每一列都显示了第一列的名称和值。工具提示的标题工作正常,它始终显示实际图表名称,因为它始终是数组的 0. 元素。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。