在 react-chartjs-2

如何解决在 react-chartjs-2

我有从后端以下列格式返回的 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
    }
  ])
);