Блог

У меня уже есть эти графики и данные. Я хотел, чтобы у меня был такой ярлык:

Однако с моими кодами что-то не так, так как это то, что появляется, если я буду передавать метки динамически:

Кроме того, как я могу передать количество пользователей с 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>
  );
}
 

Вы можете использовать Set, чтобы избежать дублирования значений:

 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 и, если хотите, создать массив такого размера с разными цветами.