如何匹配标签和对象？

Question

我在下面有这些对象：

 const data1 = {
    Tragedy: "25.00",
    Romance: "50.00",
    Comedy: "50.00",
    others: "25.00"
  };
  const data2 = {
    "Chick Flick": "50.00",
    Tragedy: "25.00",
    Comedy: "25.00",
    others: "25.00"
  };

我在我的密码箱中重新创建了这个：https://codesandbox.io/s/heuristic-snow-5j3ys?file=/src/App.js:63-2076

我遇到了这个示例问题。

const data1 = {
    Tragedy: "25.00",
    Romance: "50.00",
    Comedy: "50.00",
    others: "25.00"
  };

1. 我的第一个值是25.00，来自"Tragedy"，但后来因为 我正在使用Object.values(data1) 它将显示在图表中 Comedy 的值是 25，这是错误的。我怎样才能 匹配数据集和标签？
2. 另外，在data1 中，存在浪漫。但在data2 中不存在。它 如果出现在图表中，确实会导致问题。

以下是代码：

   export default function App() {
      const data1 = {
        Tragedy: "25.00",
        Romance: "50.00",
        Comedy: "50.00",
        others: "25.00"
      };
      const data2 = {
        "Chick Flick": "50.00",
        Tragedy: "25.00",
        Comedy: "25.00",
        others: "25.00"
      };

  return (
    <div className="App">
      <Bar
        data={{
          labels: ["Comedy", "Romance", "Tragedy", "Chick Flick", "Others"],
          datasets: [
            {
              label: "Part1",
              data: Object.values(data1),
              backgroundColor: ["rgba(255, 99, 132, 0.2)"],
              borderColor: ["rgba(255, 99, 132, 1)"],
              borderWidth: 1
            },
            {
              label: "Part2",
              data: Object.values(data2),
              backgroundColor: ["rgba(75, 192, 192, 0.2)"],
              borderColor: ["rgba(255, 159, 64, 1)"],
              borderWidth: 1
            }
          ]
        }}
        height={400}
        width={600}
        options={{
          maintainAspectRatio: false,
          title: {
            display: true,
            text: "hello",
            fontSize: 20
          },
          scales: {
            y: {
              min: 0,
              max: 100,
              ticks: {
                stepSize: 20,
                callback: function (value) {
                  return ((value / this.max) * 100).toFixed(0) + "%"; // convert it to percentage
                }
              }
            }
          },
          plugins: {
            tooltip: {
              callbacks: {
                label: function (context) {
                  var label = context.dataset.label || "";
                  if (context.parsed.y !== null) {
                    label += " " + context.parsed.y + "%";
                  }
                  return label;
                }
              }
            }
          },
          legend: {
            labels: {
              fontSize: 25
            }
          }
        }}
      />
    </div>
  );
}

Answer 1

这是您可以使用的更新代码：

我添加了一个函数，它将根据标签值getData 创建数据。

import "./styles.css";
import { Bar } from "react-chartjs-2";

export default function App() {
  const data1 = {
    Tragedy: "25.00",
    Romance: "50.00",
    Comedy: "50.00",
    Others: "25.00"
  };
  const data2 = {
    "Chick Flick": "50.00",
    Tragedy: "25.00",
    Comedy: "25.00",
    Others: "25.00"
  };

  const labels = ["Comedy", "Romance", "Tragedy", "Chick Flick", "Others"];

  const getData = (data) => {
    return labels.map((label) => data[label]);
  };

  return (
    <div className="App">
      <Bar
        data={{
          labels,
          datasets: [
            {
              label: "Part1",
              data: getData(data1),
              backgroundColor: ["rgba(255, 99, 132, 0.2)"],
              borderColor: ["rgba(255, 99, 132, 1)"],
              borderWidth: 1
            },
            {
              label: "Part2",
              data: getData(data2),
              backgroundColor: ["rgba(75, 192, 192, 0.2)"],
              borderColor: ["rgba(255, 159, 64, 1)"],
              borderWidth: 1
            }
          ]
        }}
        height={400}
        width={600}
        options={{
          maintainAspectRatio: false,
          title: {
            display: true,
            text: "hello",
            fontSize: 20
          },
          scales: {
            y: {
              min: 0,
              max: 100,
              ticks: {
                stepSize: 20,
                callback: function (value) {
                  return ((value / this.max) * 100).toFixed(0) + "%"; // convert it to percentage
                }
              }
            }
          },
          plugins: {
            tooltip: {
              callbacks: {
                label: function (context) {
                  var label = context.dataset.label || "";
                  if (context.parsed.y !== null) {
                    label += " " + context.parsed.y + "%";
                  }
                  return label;
                }
              }
            }
          },
          legend: {
            labels: {
              fontSize: 25
            }
          }
        }}
      />
    </div>
  );
}

链接到codesandbox https://codesandbox.io/s/gracious-wilbur-jbw6v?file=/src/App.js