javascript - Chart.js 条形厚度

Question

我需要使用 Chart.js v3.5 有关条形厚度的帮助 问题:我设置了条形厚度“barThickness:55，”，在响应式之后我不知道如何在响应式中管理它 这是我使用过的代码，请让我知道我应该为解决方案做什么。谢谢。

这里我遇到了响应式创建的问题，请查看图像网址:image link

var myNewChartB = new Chart(ctx, {
            type: "bar",
            data: barData,
            options: {
                borderSkipped: false,
                borderRadius: 3,
                plugins: {
                    barRoundness: 1,
                    legend: {
                        display: false,
                    },
                    title: {
                        font: {
                            size: 16
                        },
                        display: true,
                        text: 'Researchers (n=3)',
                        padding: {
                            left: 0,
                            right: 0,
                            top: 0,
                            bottom: 0
                        }
                    },
                    datalabels: {
                        display: true,
                        clamp: true,
                        formatter: (val, context) => (`${val}%`),
                        anchor: 'start',
                        align: 'end',
                    }
                },
    
                responsive: true,
                tooltips: {
                    enabled: false,
                },
                barThickness: 55,
                maintainAspectRatio: false,
    
                scales: {
                    x: {
                        display: true,
                        title: {
                            font: {
                                size: 16,
                            },
                            display: true,
                            text: "Scroes (1-9)",
                        },
                        grid: {
                            display: false,
                            drawBorder: false, //<- set this
                        },
                    },
                    y: {
                        display: true,
    
                        ticks: {
                            display: false
                        },
                        title: {
                            font: {
                                size: 16
                            },
                            display: true,
                            text: "% of Respondants",
                        },
                        grid: {
                            color: '#9B9898',
                            drawBorder: false, //<- set this
                        },
                    },
                },
            },
        });

Answer 1

在 Chart.js 4+ 中

我们可以使用 barPercentage 来控制条形厚度

像这样:

常量选项 = { 条形百分比:0.3， };