我有一个由chartJs库生成的条形图。在此图表中,我有三组值。但是,不显示右侧的最后一个栏。我该怎么办?
<div class="col-12">
<div class="card">
<canvas id="chartAvgDailyConsumReport" width="100" height="40"></canvas>
</div>
</div>
已经尝试禁用响应性选项,调整图形的大小。但是,这些选项都没有成功。
function setChartReportAvgDailyConsum(data){
var ctx = document.getElementById("chartAvgDailyConsumReport");
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: data[0].date,
datasets: [{
data: data[0].value,
label: "Ambiente 1",
backgroundColor: 'rgba(148, 151, 247, 0.6)',
borderColor: 'rgba(148, 151, 247, 1)'
},{
data: data[1].value,
label: "Ambiente 2",
backgroundColor: 'rgba(89, 179, 102, 0.6)',
borderColor: 'rgba(89, 179, 102, 1)'
},{
data: data[2].value,
label: "Ambiente 3",
backgroundColor: 'rgba(230, 137, 83, 0.6)',
borderColor: 'rgba(230, 137, 83, 1)'
},{
data: data[3].value,
label: "Ambiente 4",
backgroundColor: 'rgba(243, 119, 171, 0.6)',
borderColor: 'rgba(243, 119, 171, 1)'
}]
},
options: {
responsive: true,
scales: {
yAxes: [{
scaleLabel: {
display: true,
labelString: 'Consumo (watts)'
}
}],
xAxes: [{
scaleLabel: {
display: true,
labelString: 'Histórico do consumo médio diário dos últimos 30 dias'
},
type: 'time',
time: {
unit: 'day',
round: 'day',
displayFormats: {
day: 'D MMM'
}
}
}]
}
}
});
}