问题描述
我有从后端以下列格式返回的 JSON 数据:
[
0: {
candidateId: "1",constituencyId: "2",count: 50
},1: {
candidateId: "2",count: 20
}
]
我想在条形图中显示以上内容,并将 constituencyId
作为 x 轴上的标签,candidateId
作为数据集,count
作为值。
constituencyId
指的是一个位置,在这种情况下它最多可以有 4 个人,所以我想弄清楚如何在图表上显示它。
这是我目前所做的:
const generateGraph = (data) => {
let conArr = [];
let canArr = [];
data.forEach((d) => {
// get the names of the constituencies that are in data
// each constituency is a label for the chart
constituencies.forEach((con) => {
if (con.constituencyId === d.constituencyId) {
if (!conArr.includes(con.name)) {
conArr.push(con.name);
}
}
});
// get the names of the candidates that are in data
// each candidate is a dataset object for the chart
candidates.forEach((can) => {
if (can.candidateId === d.candidateId) {
canArr.push({
label: can.lastName + "," + can.firstName,data: [d.count],// problem in this line
});
}
});
});
const chartData = {
labels: conArr,datasets: canArr,};
return chartData;
};
上述代码的问题在于,我在数据集 (data: [d.count]
) 中设置数据值的行,如果我添加了另一个候选人但来自不同的选区,则显示第一个标签的计数/选区。
发生了什么:
labels = ["A","B"]
datasets = [{ label: "Person 1",data: [1] },{ label: "Person 2",data: [1] }]
所以应该发生的是,我应该看到第一个选区有 1 个小节,另一个选区有另一个小节,但我得到的是第一个选区有 2 个小节,另一个没有。
应该发生什么:
labels = ["A",data: [0,1] }]
每个人的数据应该对应于 labels
我知道数据集的值是根据标签的索引完成的,但我不确定我会如何写。
解决方法
这对你有用吗?处理数据的方法略有不同。
https://codesandbox.io/s/vigilant-faraday-4n1nb?file=/src/index.js
const constituencies = [
{ constituencyId: "1",name: "A" },{ constituencyId: "2",name: "B" }
];
const candidates = [
{ candidateId: "1",lastName: "Person",firstName: "1" },{ candidateId: "2",firstName: "2" }
];
const generateGraph = (data) => {
let conArr = constituencies.map((con) => con.name);
let canArr = constituencies.map((con,index) =>
data
.filter((entry) => entry.constituencyId === con.constituencyId)
.map((entry) => {
const candidate = candidates.find(
(can) => can.candidateId === entry.candidateId
);
if (candidate === null) {
return null;
}
return {
label: candidate.lastName + "," + candidate.firstName,data: new Array(index).fill(0).concat([entry.count])
};
})
);
const chartData = {
labels: conArr,datasets: canArr
};
return chartData;
};
console.log(
generateGraph([
{
candidateId: "1",constituencyId: "2",count: 50
},{
candidateId: "2",count: 20
}
])
);