如何将数据传递到 chartjs 标签中？

Question

我已经有了这些图表和数据。我想要这样的标签：

但是，我的代码有问题，因为如果我动态传递标签，就会出现以下情况：

另外，我如何传递带有 selectedItem 的用户数量作为汽车、自行车、汽车或卡车。我只试过这个，但我必须输入准确的标签才能正确。我想要的是还根据标签动态传递数据集内的数据。任何帮助，将不胜感激。谢谢。

const d = data.filter((d) => d.items.selectedItem == "car");

  console.log(d.length);

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

这些是我的代码：

export default function App() {
  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: "car"
      },
      displayName: "Person8"
    }
  ];

  const d = data.filter((d) => d.items.selectedItem == "car");

  console.log(d.length);

  let ar = [];
  data.map((item) => {
    ar.push(item.items.selectedItem);
  });

  return (
    <div className="App">
      <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
            }
          }
        }}
      />
    </div>
  );
}

Answer 1

您可以使用设置，它避免重复值：

let ar = new Set();
  data.map((item) => {
    ar.add(item.items.selectedItem);
  });

ar = Array.from(ar); //Convert Set to Array

编辑：好的，为此我认为最好使用：

let ar = {};
  for(let i=0; i<data.length; i++){
    if(ar[data[i].items.selectedItem] === undefined)
      ar[data[i].items.selectedItem] = 1;
    else
      ar[data[i].items.selectedItem]++;
  }

  let data_labels = Object.keys(ar);
  let data_ = Object.keys(ar).map(key => ar[key]);

并替换：

data={{
          labels: data_labels,
          datasets: [
            {
              data: data_,
              backgroundColor: ["red", "yellow", "green", "blue", "pink"],
              borderColor: ["rgba(255, 99, 132, 1)"],
              borderWidth: 1
            }
          ]
        }}

而对于 backgroundColor 数组，您需要检查 ar 的长度，并根据需要制作具有不同颜色的这种大小的数组。

如何将数据传递到 chartjs 标签中？

How can I pass the data into the chartjs label?

javascript

charts

reactjs

chart.js