我有一个项目在真实的计算项目不堆叠正确,我有3个数据集堆叠一个接一个,但它只显示两个数据在我的图表
<div class="graph_container">
<canvas ref="myChart" width="400" height="400"></canvas>
</div>
带时间的水平堆叠条形图格式选项
var options={
responsive:true,
maintainAspectRatio: false,
indexAxis: 'y',
scales: {
x: {
offset: true,
stacked: true,
type: 'time',
time: {
unit:'hour'
},
min: moment(String(todayStartTime)),
max: moment(String(todayEndTime))
// max: moment().add(8, 'hours')
},
y: {
stacked: true,
offset: true
}
}
}
我的数据集
const data = {
datasets: [
{
label: "T1"+moment(todayStartTime).add(0.5,'hours'),
data: [
{
x: moment(todayStartTime).add(0.5,'hours'),
y: 0
},
],
backgroundColor: "red"
},
{
label: "T2"+moment(todayStartTime).add(2,'hours'),
data: [{
x: moment(todayStartTime).add(2,'hours'),
y: 0
}],
backgroundColor: "blue"
},
{
label: "T3"+moment(todayStartTime).add(3,'hours'),
data: [
{
x: moment(todayStartTime).add(3,'hours'),
y: 0
}],
backgroundColor: "orange"
},
]
};
图表JS
var $vm=this;
const ctx =this.$refs.myChart;
var todayStartTime=new moment('2022-10-19 08:00:00 am')
var todayEndTime=new moment('2022-10-19 03:00:00 pm')
const config = {
type: 'bar',
data,
options
};
new Chart(ctx,config);
输出(仅第一个数据集正确)
仅显示第一个数据集正确,其他数据集错误和一些缺失
1条答案
按热度按时间t30tvxxf1#
这是因为您有一个堆叠的x轴,这意味着值不是从原点开始,而是从第一个条形结束的地方开始。要解决这个问题,您需要将
options.scales.x.stacked
设置为false
,或者不设置它,因为默认值为false。示例:
第一个
感谢已经在github上回答了这个问题的Stockinail:https://github.com/chartjs/Chart.js/issues/10815