Из вашего кода я вижу, что вы пробовали разные подходы, в том числе ticks.autoskip
и ticks.maxTicksLimit
. Обе эти опции ограничивают количество меток тиков, если это необходимо, но не гарантируют, что последняя метка соответствует последней точке данных.
Чтобы решить эту проблему в чистом виде, вы должны реализовать свой собственный ticks.maxTicksLimit
на xAxis
. Это можно сделать следующим образом.
- Создайте массив
labels
из времен, содержащихся в ваших данных. Этот массив должен содержать время начала и окончания данных и указанное количество одинаково распределенных времен между ними (см. Функцию createLabels
в исправленном вами коде ниже). - Скажите диаграмму. js, чтобы генерировать отметки на
xAxis
от заданных этикеток, определив tick.sources: 'labels'
.
const data = [
{ t: new Date("2015-3-15 13:30"), y: 12 },
{ t: new Date("2015-3-25 13:20"), y: 21 },
{ t: new Date("2015-3-26 13:20"), y: 21 },
{ t: new Date("2015-3-27 13:20"), y: 21 },
{ t: new Date("2015-5-14 13:20"), y: 21 },
{ t: new Date("2015-7-25 14:12"), y: 32 },
{ t: new Date("2015-08-01 14:12"), y: 40 },
{ t: new Date("2015-08-10 14:12"), y: 40 },
{ t: new Date("2015-08-11 14:12"), y: 40 },
{ t: new Date("2015-09-20 14:12"), y: 40 }
];
function createLabels(maxTicksLimit) {
const times = data.map(o => o.t.getTime());
const startTime = times[0];
const endTime = times[times.length -1];
const tickGap = ( endTime - startTime) / (maxTicksLimit - 1);
const labels = [startTime];
for (let i = 1; i < maxTicksLimit - 1; i++) {
labels.push(startTime + i * tickGap);
}
labels.push(endTime);
return labels;
}
var myChart = new Chart(document.getElementById("examChart"), {
type: 'line',
data: {
labels: createLabels(12),
datasets: [{
label: 'Demo',
fill: false,
data: data,
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
options: {
scales: {
xAxes: [{
type: 'time',
ticks: {
source: 'labels',
minRotation: 45
},
time: {
unit: 'day',
displayFormats: {
day: 'DD/MM/YYYY'
},
tooltipFormat: 'DD/MM/YYYY'
}
}],
yAxes: [{
ticks: {
suggestedMin: 0
},
gridLines: {
zeroLineColor: "rgba(0,255,0,1)"
},
scaleLabel: {
display: true,
labelString: 'y axis'
}
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.js"></script>
<div class="container" style="width:50%;">
<canvas id="examChart"></canvas>
</div>