如何匹配标签和对象？

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"
  };

我在我的 codesandbox 中重新创建了这个：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"
  };

我从 "Tragedy" 中得到第一个值 25.00，但是自从我正在使用 Object.values(data1) 它将显示在图表中 Comedy 的值为 25，这是错误的。我怎么能够匹配数据集和标签？
另外，在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>
  );
}

Link 至 codesandbox https://codesandbox.io/s/gracious-wilbur-jbw6v?file=/src/App.js

如何匹配标签和对象？

How can I match the labels and the object?

javascript

reactjs

charts

react-chartjs

react-chartjs-2