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

Posted 2023-03-25

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

【英文标题】：Howto draw horizontalBar with dynamic thickness (automatic rescale on browser window height resize) in Chart.js 2.9.3?

【发布时间】：2020-09-19 10:30:19

【问题描述】：

我使用最新的 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' 相同）。

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

提前谢谢你。

【参考方案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 将占用整个类别宽度并将条形放在彼此旁边。

【讨论】：

嗯，我看不出有什么区别（horisontalBar 高度不会随着窗口高度调整而改变）-jsfiddle.net/pd0Lxzmc