在scales.x中添加显示器后,现在我的xAxes标签根据它包含的数据对象具有不同的间隙。我如何使我的xAxes标签以相等的间隙显示?下面的代码如下图所示。请记住,我仍然需要使用显示器来格式化我的数据。
的数据
const levelHistoryOptions = {
responsive: true,
maintainAspectRatio: false,
layout: {
padding: {
top: 20,
bottom: 20,
},
},
plugins: {
legend: {
display: false,
},
datalabels: {
color: theme.palette.primary.main,
anchor: "end",
align: "top",
font: {
size: 16, // Adjust the font size as needed
},
formatter: (value, context) => {
return context.chart.data.datasets[context.datasetIndex].data[
context.dataIndex
];
},
},
},
scales: {
x: {
type: "time",
time: {
unit: "day",
displayFormats: {
day: "MM월 dd일",
},
},
offset: true,
ticks: {
source: "data",
font: {
size: 16,
},
color: theme.palette.primary.main,
},
grid: {
color: theme.palette.mode === "dark" ? "#555" : "#ccc",
},
border: { color: theme.palette.mode === "dark" ? "#555" : "#ccc" },
},
y: {
offset: true,
display: false,
beginAtZero: false,
},
},
};
字符串
1条答案
按热度按时间r6hnlfcb1#
你应该将
x
轴定义为type: 'timeseries'
,如下所示:字符串
有关详细信息,请参阅
Chart.js
文档中的Time Series Axis。