React Chart.js柱状图如何匹配labels与对象数据、处理缺失字段问题

问题根因 #

1. 数值与标签不匹配：Object.values()返回的数组顺序遵循对象属性的插入顺序，和你手动定义的labels数组顺序不一致，导致数值和标签错位。你定义的labels顺序是["Comedy", "Romance", "Tragedy", "Chick Flick", "others"]，但data1的属性插入顺序是Tragedy、Romance、Comedy、others，返回的数值顺序自然和labels对不上。
2. 缺失字段异常：两个数据对象的属性不完全一致，直接用Object.values()不会自动补全缺失的属性，导致返回的数组长度和labels长度不一致，渲染自然出错。

解决方法 #

不要直接用Object.values()获取数值，统一按照你定义的labels顺序从数据对象中逐个取值，缺失的属性默认填0即可，同时注意属性名的大小写要一致（你原代码里labels写的是Others，数据里是others，需要统一修正）。

修正后完整代码 #

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"
  };
  // 统一提取labels，属性名和数据里的保持一致
  const labels = ["Comedy", "Romance", "Tragedy", "Chick Flick", "others"];
  // 按labels顺序生成数值数组的工具函数
  const getDataset = (data) => {
    return labels.map(label => {
      // 不存在的字段返回0，同时把字符串转成数字
      return Number(data[label] ?? 0);
    })
  }

  return (
    <div className="App">
      <Bar
        data={{
          labels: labels,
          datasets: [
            {
              label: "Part1",
              data: getDataset(data1),
              backgroundColor: ["rgba(255, 99, 132, 0.2)"],
              borderColor: ["rgba(255, 99, 132, 1)"],
              borderWidth: 1
            },
            {
              label: "Part2",
              data: getDataset(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) + "%";
                }
              }
            }
          },
          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>
  );
}

内容的提问来源于stack exchange，提问作者JS3