Chart.js 条形厚度
我需要使用 Chart.js v3.5 有关条形厚度的帮助 问题：我设置了条形厚度“barThickness：55，”，在响应式之后我不知道如何在响应式中管理它 这是我使用过的代码，请让我知道我应该为解决方案做什么。谢谢。
在这里，我遇到了响应式创建的问题，请查看图像网址：图像链接
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
},
},
},
},
});
I need help on bar thickness using chart.js v3.5
Issue: I set the bar thickness "barThickness: 55," and after in responsive I don't know to manage it in responsive
here is my code which I have used, Please let me know what should I do for the solution. Thanks.
Here I Have the issue which is created in responsive, have a look on the image url : 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
},
},
},
},
});
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
在 Chart.js 4+ 中，
我们可以使用 barPercentage 来控制条形粗细，
如下所示：
const options = {
条形百分比：0.3，
};
In Chart.js 4+
we can use barPercentage to control bar thickness
like this:
const options = {
barPercentage: 0.3,
};
我创建了一个片段。看看吧。图表会自动响应。
我不知道这个
data: barData,是从哪里来的。所以我创建了自己的数据集。I have Created a snippet. Take a look. Charts are responsive automatically.
I didn't know from where this
data: barData,is coming. So I have created my own dataset.