问题描述
[{"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} ...