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

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,使小节始终为20

。

未定义bar厚度导致bar始终为50

（与barThickness: 'flex'相同。]

如何绘制具有动态厚度的horizo​​ntalBar？

谢谢你。

我使用最新的Chart.js 2.9.3。我正在尝试绘制一条水平线，其厚度取决于浏览器窗口的大小：当浏览器窗口为全屏时，从50到将浏览器窗口调整为...时的20到...

Answer 1

代替使用barThickness，您可以定义categoryPercentage together with barPercentage