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

Question

我有一个 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

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

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" />}
    </>
  );
}

Answer 1

只是在这里处理您的沙盒。看来，首先要修复的是只将相关数据传递给 MiniGraphs 组件。可以通过以下方式完成：

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

您似乎缺少的另一件事（至少在您的 Sandbox 中）是图表的正确样式。所以我将这个文件 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

Answer 2

我想你可以试试这里是 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} ...

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

How to map over an array of multiple objects for graphing?

javascript

reactjs

chartist.js

react-chartist