0

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

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

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

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

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

这是我设置所有内容的方式：

父母.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" />}
    </>
  );
}
4

2 回答 2

1

只是在这里工作你的沙盒。看来，要解决的第一件事就是只将相关数据传递给您的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到styles.css了沙盒中的文件中。

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

于 2021-03-01T18:45:06.090 回答
1

我想你可以试试，这里有一个链接

<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} ...
于 2021-03-01T18:50:20.640 回答