在Chart.js中显示X轴上的所有标签，无论是否有数据

Question

我是Chart.js的新手，我一直在寻找一种方法来显示Chart.js中的所有标签，无论是否有标签的数据，我已经尝试了最大值和最小值，但它不起作用，所以我遇到了刻度回调:

let ctx = document.getElementById("chart").getContext("2d");
let config = {
type: "bar",
data: {
datasets: [
{
label: "cost of goods sold",
data: [0, 20, 40, 50],
},
],
//labels: ["January", "February", "March", "April"],
},
options: {
scales: {
x: {
ticks: {
callback: (value, index, ticks) => {
const x = [
"January",
"February",
"March",
"April",
"May",
"June",
"July",
"August",
"September",
"october",
"November",
"December",
];
return x;
},
},
},
},
},
};
let chart = new Chart(ctx, config);

，但它没有工作。是否有一种方法来显示所有固定的标签总是显示12个月，31天，12周

Answer 1

您可以定义data.labels并确保data.datasets.data具有相同数量的条目，null用于缺失值。

let config = {
type: "bar",
data: {
labels: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "october", "November", "December"],
datasets: [{
label: "cost of goods sold",
data: [0, 20, 40, 50, null, null, null, null, null, null, null, null]
}]
}
};
new Chart('chart', config);

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.8.0/chart.min.js"></script>
<canvas id="chart" height="80"></canvas>