如何匹配标签和对象?

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

1. 我的第一个值是"Tragedy"中的25.00，但此后我用的是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>
);
}

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