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

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

我有一个项目在真实的计算项目不堆叠正确,我有3个数据集堆叠一个接一个,但它只显示两个数据在我的图表

  1. <div class="graph_container">
  2. <canvas ref="myChart" width="400" height="400"></canvas>
  3. </div>

带时间的水平堆叠条形图格式选项

  1. var options={
  2. responsive:true,
  3. maintainAspectRatio: false,
  4. indexAxis: 'y',
  5. scales: {
  6. x: {
  7. offset: true,
  8. stacked: true,
  9. type: 'time',
  10. time: {
  11. unit:'hour'
  12. },
  13. min: moment(String(todayStartTime)),
  14. max: moment(String(todayEndTime))
  15. // max: moment().add(8, 'hours')
  16. },
  17. y: {
  18. stacked: true,
  19. offset: true
  20. }
  21. }
  22. }

我的数据集

  1. const data = {
  2. datasets: [
  3. {
  4. label: "T1"+moment(todayStartTime).add(0.5,'hours'),
  5. data: [
  6. {
  7. x: moment(todayStartTime).add(0.5,'hours'),
  8. y: 0
  9. },
  10. ],
  11. backgroundColor: "red"
  12. },
  13. {
  14. label: "T2"+moment(todayStartTime).add(2,'hours'),
  15. data: [{
  16. x: moment(todayStartTime).add(2,'hours'),
  17. y: 0
  18. }],
  19. backgroundColor: "blue"
  20. },
  21. {
  22. label: "T3"+moment(todayStartTime).add(3,'hours'),
  23. data: [
  24. {
  25. x: moment(todayStartTime).add(3,'hours'),
  26. y: 0
  27. }],
  28. backgroundColor: "orange"
  29. },
  30. ]
  31. };

图表JS

  1. var $vm=this;
  2. const ctx =this.$refs.myChart;
  3. var todayStartTime=new moment('2022-10-19 08:00:00 am')
  4. var todayEndTime=new moment('2022-10-19 03:00:00 pm')
  5. const config = {
  6. type: 'bar',
  7. data,
  8. options
  9. };
  10. new Chart(ctx,config);

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

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

t30tvxxf

t30tvxxf1#

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

相关问题