[英]How to keep side bars in Chartjs bar graph from clipping?
我創建了一個chartjs條形圖,以表示60分鍾間隔內的一組測量。 我設法使圖形啟動並運行,但是它的端欄不斷被剪切。 代碼在這里https://jsfiddle.net/bagelboy/yxs9tr5c/
//
var hourBarctx = document.getElementById("hourBarChart");
var hourBarChart = new Chart(hourBarctx, {
// type: 'line',
type: 'bar',
data: {
labels: [
// min: moment.unix(new Date(2018, 1, 0, 0, 0, 0).getTime() / 1000),
// max: moment.unix(new Date(2018, 1, 0, 0, 30, 0).getTime() / 1000),
moment.unix(new Date(2018, 1, 0, 0, 0, 0).getTime() / 1000),
moment.unix(new Date(2018, 1, 0, 0, 1, 0).getTime() / 1000),
moment.unix(new Date(2018, 1, 0, 0, 2, 0).getTime() / 1000),
moment.unix(new Date(2018, 1, 0, 0, 3, 0).getTime() / 1000),
moment.unix(new Date(2018, 1, 0, 0, 4, 0).getTime() / 1000),
moment.unix(new Date(2018, 1, 0, 0, 5, 0).getTime() / 1000),
moment.unix(new Date(2018, 1, 0, 0, 59, 0).getTime() / 1000),
moment.unix(new Date(2018, 1, 0, 0, 60, 0).getTime() / 1000),
],
datasets: [{
label: 'All Units',
data: [42, 43, 70, 89, 47, 42, 43, 70],
// backgroundColor: 'rgba(0, 0, 200, 0.1)',
backgroundColor: 'rgba(0, 99, 132, 0.6)',
borderColor: 'rgba(0, 99, 132, 1)',
// borderWidth: 0
borderWidth: 1,
},
{
label: 'TV',
data: [],
backgroundColor: 'rgba(76, 175, 80, 0.1)',
borderWidth: 1,
},
{
label: 'Light',
data: [],
backgroundColor: 'rgba(0, 175, 80, 0.1)',
borderWidth: 1,
},
{
label: 'AC',
data: [],
backgroundColor: 'rgba(76, 0, 80, 0.1)',
borderWidth: 1,
}
]
},
options: {
tooltips: {
enabled: true,
callbacks: {
label: function(tooltipItem, data) {
var label = data.labels[tooltipItem.index];
var val = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
return label;
}
}
},
title: {
display: true,
text: 'Hour'
},
elements: {
},
scales: {
xAxes: [{
gridLines: {
offsetGridLines: true
},
categoryPercentage: 1.0,
barPercentage: 1.0,
type: "time",
stacked: true,
time: {
unit: 'minute',
unitStepSize: 1,
displayFormats: {
// day: 'MM/DD/YYYY hh:mm a X Z ',
minute: 'mm',
},
//new Date(year, month, day, hours, minutes, seconds, milliseconds)
min: moment.unix(new Date(2018, 1, 0, 0, 0, 0).getTime() / 1000),
max: moment.unix(new Date(2018, 1, 0, 0, 60, 0).getTime() / 1000),
}
}, ],
yAxes: [{
// barPercentage: 1,
// categoryPercentage: 1,
ticks: {
beginAtZero: true
}
}]
}
}
});
我認為這是您嘗試做軸的方式,它的目的是顯示00-01、01-02等之間的值,在最后一個數據點中,您的軸未移至凌晨1點,第一個數據點類似,我可以通過更改來解決此問題:
min: moment.unix(new Date(2018, 1, 0, 0, 0, 0).getTime() / 1000),
max: moment.unix(new Date(2018, 1, 0, 0, 60, 0).getTime() / 1000),
至:
min: moment.unix(new Date(2018, 1, 0, 0, -1, 0).getTime() / 1000),
max: moment.unix(new Date(2018, 1, 0, 0, 61, 0).getTime() / 1000),
可能不完全是您想要的,但是在小提琴中(添加moment.js作為依賴項之后),它並沒有切斷您的門檻。
我沒有像這樣花費時間,但是也許提供的數據需要有所不同才能使它起作用。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.