1
chartjsの時間スケールで日付範囲を使用して表示しようとしています。しかし、いつかは、データは広範囲（350+）です。この場合、y軸のグリッド線の始点とx軸の最初の目盛りが一致しません。私は解決策を探しましたが、人々はすでに解決していると言います。なぜこれはまだ私と一緒に起こるのですか？ 
私は最新のchartjsバージョン（2.6）を使用しています。コードは次のようになります。Chartjs：軸の最初のインデックスに最初の目盛りを整列します。
var config= {
type: 'line',
data: {
datasets: [{
label: 'CPU',
fill: true,
pointHitRadius: 25,
backgroundColor: "rgba(75,192,192,1)",
borderColor: 'rgba(75,192,192,1)',
pointBorderColor: 'rgba(75,192,192,1)',
pointBackgroundColor: '#fff',
borderWidth: 1
}]
},
options: {
scaleBeginAtZero: false,
title: {
display: true,
text: 'Uso de CPU'
},
hover: {animationDuration: 100},
layout:{
padding: {left: 50, right: 50, top: 50, bottom: 50 }
},
legend:{display: false },
animation: {duration: 500 },
scales: {
xAxes: [{
type: 'time',
ticks: {
maxRotation: 0,
autoSkip: true,
maxTicksLimit: 12,
bounds: "data",
},
time: {
round: 'minutes',
displayFormats: {
'millisecond': 'HH:mm',
'second': 'HH:mm',
'minute': 'HH:mm',
'hour': 'HH:mm',
'day': 'DD [de] MMM [de] YY',
'week': 'DD [de] MMM [de] YY',
'month': 'DD [de] MMM [de] YY',
'quarter': 'DD [de] MMM [de] YY',
'year': 'DD [de] MMM [de] YY',
},
tooltipFormat: 'D MMM YYYY H:mm'
}
}],
yAxes: [{
ticks: {
beginAtZero: true,
stepSize: 25,
suggestedMin: 0,
suggestedMax: 100,
callback: function(value, index, values) {
return value+"% ";
}
}
}]
}
}
};
var rows = {"rows":[{"x":"2017-08-25T10:16:54-03:00","y":21}]}; //continues 350+
var canvas = $('<canvas>', {id: element});
var ctx = canvas[0].getContext('2d');
window.myChart = new Chart(ctx, config);
window.myChart.data.datasets[0].data = rows;
window.myChart.update();
任意のヘルプが作成されます。