這可以通過(guò)以某種方式實(shí)現(xiàn)您自己的 ticks.maxTicksLimit 來(lái)解決。您必須按以下步驟操作。xAxis
將 定義為時(shí)間笛卡爾軸，該軸使用包含 和 屬性的對(duì)象將 接受 為 數(shù)據(jù)點(diǎn)數(shù)組。xAxisdataxy
從數(shù)據(jù)中包含的年份中生成一個(gè)數(shù)組。此數(shù)組應(yīng)包含起始年份和結(jié)束年份以及兩者之間平均分布的年份（請(qǐng)參閱下面代碼段中的函數(shù)）。labelscreateLabels
告訴圖表.js通過(guò)定義 tick.sources：“標(biāo)簽”來(lái)生成給定標(biāo)簽。ticksxAxis
const data = [];
for (let year = new Date().getFullYear() - 29; year <= new Date().getFullYear(); year++) {
data.push({
x: year.toString(),
y: Math.floor((Math.random() * 6) + 1)
})
}
const maxTicksLimit = 6;
function createLabels() {
const years = data.map(o => Number(o.x));
const startTime = years[0];
const endTime = years[years.length - 1];
const tickGap = (endTime - startTime) / (maxTicksLimit - 1);
const labels = [startTime];
for (let i = 1; i < maxTicksLimit - 1; i++) {
labels.push(Math.round(startTime + i * tickGap));
}
labels.push(endTime);
return labels.map(l => l.toString());
}
new Chart('myChart', {
type: 'line',
data: {
labels: createLabels(),
datasets: [{
label: 'Demo',
fill: false,
data: data,
borderColor: 'blue'
}]
},
options: {
scales: {
xAxes: [{
type: 'time',
time: {
parser: 'YYYY',
unit: 'year'
},
ticks: {
source: 'labels'
}
}],
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js"></script>
<canvas id="myChart" height="80"></canvas>
