用Chart.js使用下面的ticks配置,只有当xAxes结果小于7时,才会与未知文本重叠。
major: {
enabled: true
}
这是我的代码。
options: {
scales: {
xAxes: [
{
type: 'time',
distribution: 'series',
display: true,
ticks: {
beginAtZero: false,
autoSkip: true,
maxTicksLimit: 10,
maxRotation: 0,
responsive: true,
legend: {
display: false,
},
major: {
enabled: true
}
}
}
]
}
}
如果没有看到更多的代码,很难猜测你的问题的原因。在下面的可运行代码片段中,我使用了和你一样的选项,而且工作得很好。
请确保使用最新的Chart.js稳定版(目前是 v2.9.3),并检查这是否解决了你的问题。
new Chart('chart', {
type: 'line',
data: {
datasets: [{
label: 'things',
borderColor: 'blue',
backgroundColor: 'lightblue',
data: [
{ t: new Date("05/01/2020"), y: 2 },
{ t: new Date("05/02/2020"), y: 0 },
{ t: new Date("05/03/2020"), y: 1 },
{ t: new Date("05/04/2020"), y: 7 },
{ t: new Date("05/05/2020"), y: 6 },
{ t: new Date("05/06/2020"), y: 4 }
]
}]
},
options: {
scales: {
xAxes: [{
type: 'time',
distribution: 'series',
ticks: {
beginAtZero: false,
autoSkip: true,
maxTicksLimit: 10,
maxRotation: 0,
responsive: true,
legend: {
display: false,
},
major: {
enabled: true
}
}
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js"></script>
<canvas id="chart" height="90"></canvas>