我在条形图上遇到基于时间尺度的问题。如果暂时没有数据,条形图很宽。
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>
答案 0 :(得分:0)
我有同样的问题。通过将缺少的日期添加到数据集中,值为0,我能够获得所需的显示。
虽然我认为当你缺少具有线性时标的天数时,条宽的当前行为是一个错误,但这是一个对我来说不太糟糕的解决方法,因为我的数据不是很稀疏。