如何在堆积条形图中使用多余的垂直 space？

Question

我正在尝试创建一个使用整个 canvas:

的堆积条形图（使用 chart.js 3.7+）

new Chart(..., {
    type: 'bar',
    data: {
        labels: ['a','b','c','d','e'],
        datasets: [{
            backgroundColor: '#ff00ff',
            data: [20,40,60,40,20],
        },{
            backgroundColor: '#00ff00',
            data: [100,200,300,200,100],
        }]
    },
    options: {
        maintainAspectRatio: false,
        responsive: true,
        plugins: {
            legend: { display: false },
        },
        scales: {
            x: {
                display: false,
                stacked: true 
            }, 
            y: { 
                display: true,
                stacked: true 
            }
        }
    }
});

当我使用普通条形图时，图表会被拉伸以耗尽所有垂直线 space:

但是当我堆叠条形时，组合的最长条形并没有用完所有垂直方向 space:

如何让堆叠条形图拉伸以使用所有可用的垂直线 space？

参见示例 here。

Answer 1

您可以对数组求和，在结果数组中找到最大值，然后将 options.scales.y.max 属性设置为该值：

let data1 = [20,40,60,40,20];
let data2 = [100,200,300,200,100];

let sum = data1.map(function (num, idx) {
  return num + data2[idx];
});

let max = Math.max(...sum);

var options = 
{
    maintainAspectRatio: false,
    responsive: true,
    plugins: {
        legend: { display: false },
    },
    scales: {
      x: {
        display: false,
        stacked: true 
      }, 
      y: { 
        display: true,
        stacked: true,
        max: max
      }
    }
  };

var mychart = new Chart(document.getElementById('mycanvas2').getContext('2d'), {
  type: 'bar',
  data: {
    labels: ['a','b','c','d','e'],
    datasets: [{
      backgroundColor: '#ff00ff',
      data: data1
    },{
      backgroundColor: '#00ff00',
      data: data2
    }]
  },
  options: options
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.0/chart.min.js"></script>
<div  style="width:400px; height: 200px">
  <canvas id="mycanvas2"></canvas>
</div>

Answer 2

根据 this issue with chart.js，您可以配置 y-axis 边界以适应数据：

options: {
    scales: {
        x: {
            display: false,
            stacked: true 
        }, 
        y: { 
            display: true,
            stacked: true,
            bounds: 'data' <----------
        }
    }
}

如何在堆积条形图中使用多余的垂直 space？

How to use excess vertical space in stacked bar chart?

javascript

chart.js