在 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])，如果我添加另一个候选人但来自不同选区，则显示计数首先 label/constituency.

会发生什么：

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

所以应该发生的是，我应该看到第一个选区有 1 个小节，另一个选区有另一个小节，但我得到的是第一个选区有 2 个小节，另一个选区有 none。

应该发生什么：

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
    }
  ])
);

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

Display JSON data in react-chartjs-2

javascript

reactjs

next.js

chart.js

react-chartjs