chart.js水平堆栈条未显示预期结果

rlcwz9us  于 2022-11-06  发布在  Chart.js
关注(0)|答案(1)|浏览(143)

我有一个项目在真实的计算项目不堆叠正确,我有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);

输出(仅第一个数据集正确)

仅显示第一个数据集正确,其他数据集错误和一些缺失

t30tvxxf

t30tvxxf1#

这是因为您有一个堆叠的x轴,这意味着值不是从原点开始,而是从第一个条形结束的地方开始。要解决这个问题,您需要将options.scales.x.stacked设置为false,或者不设置它,因为默认值为false。
示例:
第一个
感谢已经在github上回答了这个问题的Stockinail:https://github.com/chartjs/Chart.js/issues/10815

相关问题