问题描述
我创建了这个小提琴.它包含一个ChartJS条形图:
I created this fiddle. It contains a ChartJS bar chart:
https://jsfiddle.net/07pzys9t/
var options = {
legend: { display: false },
animation: {
animateScale: true
},
scales: {
xAxes: [{
barPercentage: 1,
categoryPercentage: 1,
barThickness : 45
}],
yAxes: [{
barPercentage: 1,
categoryPercentage: 1,
ticks: {
beginAtZero: true
}
}]
},
tooltips: {
}
};
var dataForChart = {
datasets: [{
data: [0.2, 0.4, .78, 0.05],
backgroundColor:["#FF6384","#4BC0C0","#FFCE56","#36A2EB"],
borderWidth: 0
}],
labels: ['1', '2', '3', '4']
};
var chart = new Chart($("#statsRenderingResultsDeliveryClaimsChart"), {
type: 'bar',
data: dataForChart,
options: options
});
如何删除条形之间的空间?我读了这个答案:
How can I remove the space between the bars? I read this answer:
但是它似乎不起作用,因为如果您查看我创建的小提琴中的代码,则会在两个轴上添加 barPercentage
和 categoryPercentage
属性.
But it doesn't seem to work because if you look at the code in the fiddle I created I add the barPercentage
and categoryPercentage
properties on both axes.
关于如何实现所需行为的任何想法吗?
Any idea on how to achieve the wanted behaviour?
感谢您的关注.
推荐答案
如果您将图表与自适应方面结合使用,则不会对栏施加强制宽度值.
If you use chart with responsive aspect, you don't be force a width value to your bars.
您只需要使用这两个属性设置xAxes
You just need set your xAxes with this two attributes
xAxes: [{
barPercentage: 1.0,
categoryPercentage: 1.0
}]
而不是:
xAxes: [{
barPercentage: 1,
categoryPercentage: 1,
barThickness : 45
}]
您需要使用带有barPercentage和categoryPercentage属性的响应方面的百分比值.
You need use percent value with responsive aspect using barPercentage and categoryPercentage attributes.
这篇关于CharJS 2.5.0-如何删除条之间的空间的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!