具有時間刻度的chart.js寬條

Question

在基於時間的尺度上，我的條形圖存在問題。 一段時間沒有數據時，條形圖很寬。

 var element = document.querySelector('.line-chart'); var options = { legend: { position: 'bottom' }, hover: { mode: 'point', intersect: false }, tooltips: { mode: 'x', intersect: false, callbacks: { title: function (tooltip, data) { return; }, label: function (tooltip, data) { return ; }, footer: function (tooltip, data) { return; } } }, scales: { xAxes: [{ id: 'timescale', type: 'time', unit: 'day', unitStepSize: 1, time: { displayFormats: { 'millisecond': 'DD MMMM YYYY HH:mm', 'second': 'mm:ss', 'minute': 'HH:mm', 'hour': 'HH:mm', 'day': 'DD MMM', 'week': 'DD MMM', 'month': 'DD MMMM', 'quarter': '[Q]Q - YYYY', 'year': 'YYYY', } }, display: true, position: 'bottom', scaleLabel: { display: true, labelString: "Heure", } }], yAxes: [{ id: 'consumption', type: 'linear', position: 'left', ticks: { beginAtZero: true }, scaleLabel: { display: true, labelString: "Consommation", } }] } } var graph = new Chart(element, { type : 'bar', data : { labels : [], datasets : [{ label: 'datasets1', type: 'bar', backgroundColor: Chart.helpers.color('#0000FF').alpha(0.5).rgbString(), borderColor: '#0000FF', unite: null, yAxisID: 'consumption', data: [{x: '2017-10-26T22:00:00.000Z', y:73.16},{x: '2017-11-27T22:00:00.000Z', y:36.16}, {x: '2017-11-28T22:00:00.000Z', y:36.16}, {x: '2017-11-29T22:00:00.000Z', y:36.16}, {x: '2017-12-27T22:00:00.000Z', y:36.16}] },{ label: 'datasets2', type: 'bar', backgroundColor: Chart.helpers.color('#FF0000').alpha(0.5).rgbString(), borderColor: '#FF0000', unite: null, yAxisID: 'consumption', data: [{x: '2017-10-26T22:00:00.000Z', y:87.16},{x: '2017-11-27T22:00:00.000Z', y:24.16}] }], }, options : options }); 

 .container { display: flex; height: 100%; width: 100%; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.bundle.min.js"></script> <div class="container"> <canvas class="line-chart"></canvas> </div> 

碼筆

Answer 1

我遇到過同樣的問題。 通過將缺失的日期添加到值為0的數據集中，我可以獲得所需的顯示。

雖然我認為當您缺少線性時間標度的天時條形寬度上的當前行為是一個錯誤，但這是一種變通方法，對我來說還不錯，因為我的數據不是很稀疏。