使用Chart.js,我想在一个时间范围内比较2个数据集。所以我每天发送数据,但这是我的输出
如您所见,对于第一个和最后一个数据,我无法看到我的所有图表。第一个将显示第二个数据集,最后一个将显示第一个数据集。
编辑
这是一个WORKING CODEPEN
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}]
},{
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
});
最佳答案
我遇到了同样的问题,并通过在offset: true
中添加scales.xAxes
选项来解决此问题
这是带有一个新选项https://codepen.io/anon/pen/yQqrVz?editors=0010的代码-现在所有条形都可见。
这是我的示例https://jsfiddle.net/0bnmc4eg/3/
我在这次对话中找到了解决方案https://github.com/chartjs/Chart.js/pull/4545
关于javascript - chart.js时间范围内的多个条形图不会显示全部,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/47795221/