我使用Chartjs來顯示時間序列線圖。Chartjs X軸標籤和刻度格式
我的設置是如下...
this.chartSetup = {
type: 'line',
data: {
labels: this.times,
datasets: [{
fill: true,
lineTension: 0.1,
backgroundColor: "rgba(75,192,192,0.4)",
borderColor: "rgba(75,192,192,1)",
label: title,
data: this.vals,
pointRadius: 0,
}]
},
options: {
spanGaps: true,
legend: {
position: 'bottom',
labels: {
boxWidth: 10
}
},
tooltips: {
enabled: false
},
responsive: true,
maintainAspectRatio: false,
scales: {
xAxes: [{
ticks: {
stepSize: 6,
unitStepSize: 5
},
type: 'time',
time: {
displayFormats: {
hour: 'h:mm a',
minute: 'h:mm a',
}
}
}],
},
}
};
Chart.defaults.global.animation.easing = "easeOutBounce";
this.chart = new Chart(this.canvas.nativeElement, this.chartSetup);
我的圖表看起來像下面的屏幕截圖
的數據是X軸的日期(標籤),只是數字爲Y. 時間數據從早上6點到下午6點(價值12小時)
我在這裏有幾個問題所有與X軸標籤格式配合使用。
初始上午06點標籤被切斷
如何更改X軸標籤的旋轉(90度,以便也許將修復截短第一值)
我的數據去到6pm,但它顯示額外的X軸值(7pm)。我可以擺脫這個嗎?
在此先感謝您的任何建議。