在react-chartjs-2中显示JSON数据

Question

我有从后端返回的JSON数据，格式如下：

[
   0: {
       candidateId: "1",
       constituencyId: "2",
       count: 50
   },
   1: {
       candidateId: "2",
       constituencyId: "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] }]

所以应该发生的情况是，我应该看到第一个选区有一个条形，另一个选区有另一个条形，但我得到的是第一个选区有两个条形，另一个选区没有。

应该发生什么：

labels = ["A", "B"]
datasets = [{ label: "Person 1", data: [1] }, { label: "Person 2", data: [0,1] }]

每个人的数据应与labels中的相应标签相对应

我确实知道数据集的值是基于标签的索引完成的，但我不确定该如何编写。

Answer 1

这对你有用吗？浏览数据的方法略有不同。

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", lastName: "Person", 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",
      constituencyId: "2",
      count: 20
    }
  ])
);