图表.js折线图：设置价格变动时，在 x 轴上显示最近的日期。maxTicksLimit

Question

我目前正在使用图表制作折线图.js在过去的30年中。

虽然我每年都有一个数据点，但我无法在 x 轴上为每个年份添加标签。30年不适合那里。因此，我选择仅列出一些年份，通过设置

ticks: {

    maxTicksLimit: SOME_LIMIT_I_MADE

}

这是我的图表的样子的照片

最近的数据点在2020年，最老的数据点在1991年。

似乎设定最早的一年就开始了规模。然后，刻度以固定的间隔向前跳跃。maxTicksLimit

我真正想要的是将最近的2020年显示在秤上（以便用户可以看到数据是新的）。有没有办法让比例尺从最大年份开始，然后从那里向后跳过（与我的图表目前的情况相反）？

谢谢！

Answer 1

这可以通过以某种方式实现您自己的&nbsp;ticks.maxTicksLimit&nbsp;来解决。您必须按以下步骤操作。xAxis将 定义为时间笛卡尔轴，该轴使用包含 和 属性的对象将 接受 为&nbsp;数据点数组。xAxisdataxy从数据中包含的年份中生成一个数组。此数组应包含起始年份和结束年份以及两者之间平均分布的年份（请参阅下面代码段中的函数）。labelscreateLabels告诉图表.js通过定义&nbsp;tick.sources：“标签”来生成给定标签。ticksxAxisconst data = [];for (let year = new Date().getFullYear() - 29; year <= new Date().getFullYear(); year++) {&nbsp; data.push({&nbsp; &nbsp; x: year.toString(),&nbsp; &nbsp; y: Math.floor((Math.random() * 6) + 1)&nbsp; })}const maxTicksLimit = 6;function createLabels() {&nbsp; const years = data.map(o => Number(o.x));&nbsp; const startTime = years[0];&nbsp; const endTime = years[years.length - 1];&nbsp; const tickGap = (endTime - startTime) / (maxTicksLimit - 1);&nbsp; const labels = [startTime];&nbsp; for (let i = 1; i < maxTicksLimit - 1; i++) {&nbsp; &nbsp; labels.push(Math.round(startTime + i * tickGap));&nbsp; }&nbsp; labels.push(endTime);&nbsp; return labels.map(l => l.toString());}new Chart('myChart', {&nbsp; type: 'line',&nbsp; data: {&nbsp; &nbsp; labels: createLabels(),&nbsp; &nbsp; datasets: [{&nbsp; &nbsp; &nbsp; label: 'Demo',&nbsp; &nbsp; &nbsp; fill: false,&nbsp; &nbsp; &nbsp; data: data,&nbsp; &nbsp; &nbsp; borderColor: 'blue'&nbsp; &nbsp; }]&nbsp; },&nbsp; options: {&nbsp; &nbsp; scales: {&nbsp; &nbsp; &nbsp; xAxes: [{&nbsp; &nbsp; &nbsp; &nbsp; type: 'time',&nbsp; &nbsp; &nbsp; &nbsp; time: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; parser: 'YYYY',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; unit: 'year'&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; ticks: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; source: 'labels'&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; }],&nbsp; &nbsp; &nbsp; yAxes: [{&nbsp; &nbsp; &nbsp; &nbsp; ticks: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; beginAtZero: true&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; }]&nbsp; &nbsp; }&nbsp; }});<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js"></script><canvas id="myChart" height="80"></canvas>