我如何将这个 Object.values 除以总数？

Question

我有这个，其中 car 是 2，total 是 12。所以我想得到它的百分比，但这是在 Object.values(res)

中

我希望图表中的数据集是百分比值。假设 car 是 2 而 total 是 12。所以它应该是 16.66%。但是，现在在我的数据集中，它只显示 2.

这是代码框 link : https://codesandbox.io/s/bar-graph-9nr8u?file=/src/App.js:0-3062

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: "truck"
      },
      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"
    }
  ];

  const total = 12;

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

  const rounded = Object.entries(res).reduce((acc, [key, value]) => {
    return { ...acc, [key]: value.toFixed(2) };
  }, {});

  return (
    <div className="App">
      <Pie
        data={{
          labels: Object.keys(rounded),
          datasets: [
            {
              data: Object.values(rounded),
              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

您可以在这里看到您修改后的codesandbox：https://codesandbox.io/s/bar-graph-forked-vp4uk 在这种情况下，您必须使用百分比而不是值。

所以，你必须改变：

  const rounded = Object.entries(res).reduce((acc, [key, value]) => {
    return { ...acc, [key]: value.toFixed(2) };
  }, {});

对此：

  const rounded = Object.entries(res).reduce((acc, [key, value]) => {
    return { ...acc, [key]: ((value / total) * 100).toFixed(2) };
  }, {});

Answer 2

你是说

[key]: ((value/total)*100).toFixed(2)

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: "truck"
    },
    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"
  }
];

const total = 12;

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

const rounded = Object.entries(res).reduce((acc, [key, value]) => {
  return { ...acc,
    [key]: ((value/total)*100).toFixed(2)
  };
}, {});

console.log(rounded)
console.log(res)

我如何将这个 Object.values 除以总数？

How can I divide this Object.values with the total?

javascript

reactjs

chart.js

react-chartjs