0

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

如何绘制具有动态厚度的水平条？

先感谢您。

4

1 回答 1

0

而不是使用barThickness，您可以categoryPercentage一起定义barPercentage

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

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

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

于 2020-06-01T08:35:42.683 回答