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. 元素。

chartimage

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）