所以在 Chart.js 中我有一个基于日期范围的时间序列。该图表无法将所有日期显示为轴标签，因此它显示了合理的选择。它始终在左侧显示第一个日期，但并不总是在轴的右端显示最后一个日期。
例如，我的日期范围可以是从 1 月 1 日到 7 月 30 日的每一天。该轴将从 1 月 1 日开始，但结束日期可能是 7 月 27 日、28 日或 29 日。
对我来说，结束日期比开始日期更重要。有没有一种方法可以可靠地显示最后日期并让开始日期成为变化的日期？
这可以通过实施您自己的解决方案来解决ticks.maxTicksLimit https://www.chartjs.org/docs/latest/axes/cartesian/linear.html#tick-configuration-options on the xAxis。您必须按如下方式进行。
- 定义
xAxis as a 时间笛卡尔轴 https://www.chartjs.org/docs/latest/axes/cartesian/time.html接受data作为一个数组数据点 https://www.chartjs.org/docs/latest/charts/line.html#point使用包含的对象x and y属性各有。
- 生成一个
labels数据中包含的日期数组。该数组应包含开始日期和结束日期以及两者之间均匀分布的天数（请参阅函数createLabels在下面的代码片段中）。
- 告诉 Chart.js 生成
ticks on the xAxis通过定义给定标签tick.sources: 'labels' https://www.chartjs.org/docs/latest/axes/cartesian/time.html#ticks-source.
const data = [];
let date = Date.parse('2020-01-01');
for (let day = 1; day <= 31; day++) {
date = new Date(date);
date.setDate(day);
data.push({
x: date,
y: Math.floor((Math.random() * 6) + 1)
})
};
const maxTicksLimit = 8;
function createLabels() {
const days = data.map(o => o.x);
const startTime = days[0];
const endTime = days[days.length - 1];
const tickGap = data.length / (maxTicksLimit - 1);
const labels = [startTime];
for (let i = 1; i < maxTicksLimit - 1; i++) {
labels.push(days[Math.floor(i * tickGap)]);
}
labels.push(endTime);
return labels;
}
new Chart('myChart', {
type: 'line',
data: {
labels: createLabels(),
datasets: [{
label: 'My Dataset',
fill: false,
data: data,
borderColor: 'blue'
}]
},
options: {
scales: {
xAxes: [{
type: 'time',
time: {
unit: 'day'
},
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="90"></canvas>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
