如何在 Chart.js 2.9.3 中绘制具有动态厚度的水平条（在浏览器窗口高度调整大小时自动调整大小）？

Question

我使用最新的 Chart.js 2.9.3。

我正在尝试绘制一个粗细取决于浏览器窗口大小的水平条：从浏览器窗口全屏时的 50 到调整浏览器窗口大小时的 20到非常小的高度。

我已尝试以下代码 - 但 bar 始终为 50 (https://jsfiddle.net/zg6c54rt/1/)：

var ctx = document.getElementById('chart').getContext('2d');
        var chart = new Chart(ctx, {
            type: 'horizontalBar',
            data: {
                labels: ['1', '2', '3', '4'],
                datasets: [{
                    barThickness: 'flex',
                    maxBarThickness: 50,
                    data: [100, 90, 85, 95]
                }]
            },
            options: {
                 scales: {
                    xAxes: [{
                        ticks: {
                            min: 0
                        }
                    }]
                }
            }
        });

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js"></script>
     <div class="text-center">
            <canvas id="chart"></canvas>
    </div>

将barThickness: 'flex', 更改为barThickness: 20, 使bar 始终20。

未定义 barThickness 导致 bar 始终为 50（与 barThickness: 'flex' 相同）。

如何绘制动态粗细的水平条？

提前谢谢你。

Answer 1

您可以定义categoryPercentage together with barPercentage，而不是使用barThickness

datasets: [{
  categoryPercentage: 1, 
  barPercentage: 0.5,
  data: [100, 90, 85, 95]
}]

categoryPercentage：每个类别的可用宽度的百分比 (0-1) 应在样本宽度内。

barPercentage：每个条的可用宽度的百分比 (0-1) 应在类别宽度内。 1.0 将占用整个类别宽度并将条形放在彼此旁边。