[英]React: Data transformation to advanced form (or how to work with my data in graphs of react chartjs 2)
I have three records (JSONs) in database and I fetch them in main.js and in return statement I send them to next file by this <StatisticListGraph items={loadedStatistics} />
.我在数据库中有三个记录 (JSON),我在 main.js 中获取它们,在返回语句中,我通过
<StatisticListGraph items={loadedStatistics} />
将它们发送到下一个文件。 In StatisticListGraph I am mapping data (you can see bellow).在 StatisticListGraph 中,我正在映射数据(您可以在下面看到)。 I get data in this form there:
我在那里以这种形式获得数据:
So I have three JSONs files and my graph is rendered three times, but I want to render graph only once and data have into the desired form: data: [2,5,6,8,7]
-> here should be my props properties from database, not only same dummy numbers.所以我有三个 JSONs 文件,我的图形被渲染了三次,但我只想渲染一次图形并且数据具有所需的形式:
data: [2,5,6,8,7]
- >这里应该是我的道具来自数据库的属性,不仅是相同的虚拟数字。
Question : How can I get the correct form of data for graphs react chartjs 2 - so to the form data: [props0.goals, props1.goals, props2.goals, ...]?问题:我怎样才能得到图表的正确数据形式 react chartjs 2 - 所以表格数据:[props0.goals, props1.goals, props2.goals, ...]?
How can I transform data from three JSONs to one JSON?如何将数据从三个 JSON 转换为一个 JSON? For example I have:
例如我有:
JSON A:{
id: 58987,
name: JsonA,
goals: 5,
assist:4
},
JSON B:{
name: JsonB,
goals: 15,
assist:2
},
JSON C:{
name: JsonC,
goals: 10,
assist:21
}
and I want to have one JSON, where I want this form:我想要一个 JSON,我想要这个表格:
JSON Z: {
name: [JsonA, JsonB, JsonC],
goals: [5,15,10],
assist: [4,2,21]
}
main.js主程序
const [loadedStatistics, setLoadedStatistics] = useState();
useEffect(() => {
const fetchStatistics = async () => {
try {
const responseData = await sendRequest(
'http://localhost:5000/api/statistics'
);
setLoadedStatistics(responseData.statistics);
} catch (err) { }
};
fetchStatistics();
}, [sendRequest]);
StatisticsListGraph.js StatisticsListGraph.js
return (
<div>
{props.items.map(
filteredStatistic => (
<StatisticItemGraph
key={filteredStatistic.id}
id={filteredStatistic.id}
name={filteredStatistic.name}
goals={filteredStatistic.goals}
shots={filteredStatistic.shots}
shotsOnGoal={filteredStatistic.shotsOnGoal}
ballPos={filteredStatistic.ballPos}
tackles={filteredStatistic.tackles}
fouls={filteredStatistic.fouls}
yellowCards={filteredStatistic.yellowCards}
redCards={filteredStatistic.redCards}
offsides={filteredStatistic.offsides}
cornersKicks={filteredStatistic.cornersKicks}
freeKicks={filteredStatistic.freeKicks}
/>
))}
</div>
);
StatisticItemGraph.js StatisticItemGraph.js
import React, { useState, useEffect } from 'react';
import { Doughnut } from 'react-chartjs-2';
const StatisticItemGraph = props => {
const [data, setData] = useState([])
useEffect(() => {
setData({
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
datasets: [{
label: ['# of Votes'],
data: [2,5,6,8,7], **// data: [props.goals] = 3 graphs**
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 3
}]
})
}, [setData]);
return (
<div>
<Doughnut data={data} />
</div>
);
}
export default StatisticItemGraph;
Create a method which will return you data in desired format.创建一个方法,它将以所需格式返回数据。 I have written logic to convert your data in desired format.
我已经编写了将您的数据转换为所需格式的逻辑。
const data = [{ id: 58987, name: 'JsonA', goals: 5, assist: 4 }, { name: 'JsonB', goals: 15, assist: 2 }, { name: 'JsonC', goals: 10, assist: 21 }] const result = {} data.forEach(item => { if (.result.name) { result.name = [] } else { result.name.push(item.name) } if (.result.goals) { result.goals = [] } else { result.goals.push(item.goals) } if (.result.assist) { result.assist = [] } else { result.assist.push(item.assist) } }) console.log(result)
Now use this data in StatisticsListGraph component and pass this to the child component.现在在 StatisticsListGraph 组件中使用此数据并将其传递给子组件。
return ( < div >
<
StatisticItemGraph name = {
result.name
}
goals = {
result.goals
}
/> <
/div>
);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.