如何映射多个对象的数组以进行绘图？

如何解决如何映射多个对象的数组以进行绘图？

我有一个 API 响应，它在一个数组中提供多个对象：

[{"symbol":"AAPL","date":"2020-02-27","adj_close":68.24},{"symbol":"TSLA","adj_close":133.8},"date":"2020-02-28","adj_close":122.3},{"symbol":"AAPL","adj_close":64.09},"date":"2020-03-02","adj_close":137.33},"adj_close":69.43},"date":"2020-03-03","adj_close":143.22},...
] 

我正在尝试创建一个 map() 来绘制响应中每个唯一的 symbol，对于已经映射到另一个数据数组的每个 <card>。像这样：

但是正如您所看到的，我为图表制作的映射函数不起作用。它将每个唯一 symbol 的所有数据堆叠到每张卡片上。我希望每个独特的符号都有自己的数据图表。 我一直没能成功，我在下面做了一个可重现的代码：

可复制代码：https://codesandbox.io/s/gallant-curie-5qck3?file=/src/index.js

以下是我设置一切的方式：

Parents.js

export function MiniGraphdisplay(props)
{
    const { data } = props;
    const { slug } = useParams();
    const [historicalPrice,setHistoricalPrice] = useState([]);

    const fetchData = useCallback(async () =>
    {
        const response = await axiosInstance.get('bucket/graph-price/' + slug)
        const result = response.data;
        setHistoricalPrice(result);
    },[])

    useEffect(() =>
    {
        fetchData();
    },[]);

    return (
        <>
        <Container maxWidth="lg" component="main">
            <Grid container spacing={5} alignItems="flex-end">
                {data[0]?.map((data,index) => {
                    return (
                        <Grid item key={index} xs={4} md={4}>
                            <Card>
                            <CardHeader
                            title={<Chip label={data.symbol} />} 
                            subheader={data.adj_close}        
                            />      
                            <CardContent >
                                <div>
                                <MiniGraphs historicalPrice={historicalPrice} />
                                </div>              
                            </CardContent>
                            </Card>
                        </Grid>
                    );
                })}
            </Grid>
        </Container>
        </>
    );
}

Child.js

export function MiniGraphs(props)
{
  const { historicalPrice } = props;

  const getChartData = () =>
  {
    const labels = [];
    const series = [];

    historicalPrice.forEach((item,) =>
    {
      labels.push(item.date);
      series.push(item.adj_close);
    });

    return {
      labels: labels,series: [series]
    };
  };

  // Add graph configuration here
  const chartOptions = {
    // width: 2000,height: 200,// scaleMinSpace: 20
    onlyInteger: true,showPoint: false,axisX: {
      labelInterpolationFnc: function (value,index)
      {
        return index % 32 === 0 ? value : null;
      },}
  };

  return (
    <>
      { historicalPrice && <ChartistGraph data={getChartData()} options={chartOptions} type="Line" />}
    </>
  );
}

解决方法

只是在这里处理您的沙盒。看来，要解决的第一件事是仅将相关数据传递给您的 MiniGraphs 组件。这可以通过以下方式完成：

...
<CardContent>
  <div>
    <MiniGraphs
      historicalPrice={response.filter(
      (i) => i.symbol === data.symbol
      )}
    />
  </div>
</CardContent>
...

您似乎缺少的另一件事，至少在您的沙箱中，是图形的正确样式。所以我将这个文件 https://cdnjs.cloudflare.com/ajax/libs/chartist/0.11.4/chartist.min.css 的内容添加到 Sandbox 中的 styles.css 文件中。

结果似乎正是您要找的：https://codesandbox.io/s/young-https-tol8c?file=/src/App.js

,

我觉得你可以试试看 这里是link

<MiniGraphs symbol={data.symbol} historicalPrice={response} />

和过滤数据

const { historicalPrice,symbol } = props;

  const filterBySymbol = (symbol,key) =>
    historicalPrice
      .filter((elm) => elm.symbol === symbol)
      .map((elm) => elm[key]);


  const mapper = {
    labels: filterBySymbol(symbol,"date"),series: [filterBySymbol(symbol,"adj_close")]
  };
...

<ChartistGraph data={mapper} ...