在chartjs中动态传递JSON数据

Question

我也在codesandbox中创建了这个：https://codesandbox.io/s/bar-graph-9nr8u?file=/src/App.js:2394-3036

我有这些 JSON 数据而且我有这张饼图，上面有汽车、自行车、汽车、卡车等标签。现在，在图表中，我想传递图表数据集中汽车、自行车等 selectedItem 的总用户数。我该怎么做？

JSON:

 const data = [
    {
      birthdate: "Thu Aug 31 2000",
      createdDate: { seconds: 1630377545, nanoseconds: 313000000 },
      items: {
        type2: false,
        type1: true,
        selectedItem: "car"
      },
      displayName: "Person1"
    },
    {
      birthdate: "Thu Aug 31 2000",
      createdDate: { seconds: 1630377545, nanoseconds: 313000000 },
      items: {
        type2: true,
        type1: true,
        selectedItem: "bikes"
      },
      displayName: "Person2"
    },
    {
      birthdate: "Thu Aug 31 2000",
      createdDate: { seconds: 1630377545, nanoseconds: 313000000 },
      items: {
        type2: true,
        type1: true,
        selectedItem: "car"
      },
      displayName: "Person3"
    },
    {
      birthdate: "Thu Aug 31 2000",
      createdDate: { seconds: 1630377545, nanoseconds: 313000000 },
      items: {
        type2: true,
        type1: true,
        selectedItem: "motor"
      },
      displayName: "Person4"
    },
    {
      birthdate: "Thu Aug 31 2000",
      createdDate: { seconds: 1630377545, nanoseconds: 313000000 },
      items: {
        type2: true,
        type1: true,
        selectedItem: "motor"
      },
      displayName: "Person5"
    },
    {
      birthdate: "Thu Aug 31 2000",
      createdDate: { seconds: 1630377545, nanoseconds: 313000000 },
      items: {
        type2: true,
        type1: true,
        selectedItem: "trucks"
      },
      displayName: "Person6"
    },
    {
      birthdate: "Thu Aug 31 2000",
      createdDate: { seconds: 1630377545, nanoseconds: 313000000 },
      items: {
        type2: true,
        type1: true,
        selectedItem: "bikes"
      },
      displayName: "Person7"
    },
    {
      birthdate: "Thu Aug 31 2000",
      createdDate: { seconds: 1630377545, nanoseconds: 313000000 },
      items: {
        type2: true,
        type1: true,
        selectedItem: "truck"
      },
      displayName: "Person8"
    }
  ];

图表：

<Pie
        data={{
          labels: ar,
          datasets: [
            {
              data: [10, 20, 30, 40, 50],
              backgroundColor: ["red", "yellow", "green", "blue", "pink"],
              borderColor: ["rgba(255, 99, 132, 1)"],
              borderWidth: 1
            }
          ]
        }}
        height={400}
        width={600}
        options={{
          maintainAspectRatio: false,
          title: {
            display: true,
            text: "Selected",
            fontSize: 20
          },
          legend: {
            labels: {
              fontSize: 25
            }
          }
        }}
      />

Answer 1

我有点困惑，因为您同时拥有 'truck' 和 'trucks'，也许这本身就是一个错误。但是对于你的问题，这里有一个解决方案：

  const a = data.filter((a) => a.items.selectedItem === "car");
  const b = data.filter((b) => b.items.selectedItem === "bikes");
  const c = data.filter((c) => c.items.selectedItem === "motor");
  const d = data.filter((d) => d.items.selectedItem === "truck");
  const e = data.filter((e) => e.items.selectedItem === "trucks");

当您将数据插入饼图时：

<Pie
    data={{
      labels: ar,
      datasets: [
        {
          data: [a.length, b.length, c.length, d.length, e.length],
          backgroundColor: ["red", "yellow", "green", "blue", "pink"],
          borderColor: ["rgba(255, 99, 132, 1)"],
          borderWidth: 1
        }
      ]
    }}
    height={400}
    width={600}
    options={{
      maintainAspectRatio: false,
      title: {
        display: true,
        text: "Selected",
        fontSize: 20
      },
      legend: {
        labels: {
          fontSize: 25
        }
      }
    }}
  />

Answer 2

您可以使用reduce函数对每个类别进行统计。 working solution

let res = [...data].reduce(
(a, c) => (a[c.items.selectedItem] = (a[c.items.selectedItem] || 0) + 1, a),{});

在饼图中使用生成的对象作为标签和数据，如下所示。

labels = Object.keys(res);
data = Object.values(res));

在chartjs中动态传递JSON数据

Dynamically pass the JSON data in chartjs

javascript

charts

json

reactjs

chart.js