在条形图之间添加空格/边距

Question

如何在Chart.js 3.0中添加空白/边距?我没有找到任何可以处理的图像

What I want

我的代码是这样的:我有什么

datasets: [{
categoryPercentage: 1.0,
barPercentage: 0.8,
}]
},
options: {
onHover() {},
indexAxis: 'y',
maintainAspectRatio: false,
}

完整代码:https://codepen.io/mateofaivre/pen/zYdYgmB

Answer 1

您应该将categoryPercentage设置为较低的值，如0.8,barPercentage设置为1。

关于categoryPercentage和barPercentage的图形信息:

// categoryPercentage: 1.0
// barPercentage: 1.0
Bar:        | 1.0 | 1.0 |
Category:   |    1.0    |
Sample:     |===========|
// categoryPercentage: 1.0
// barPercentage: 0.5
Bar:          |.5|  |.5|
Category:  |      1.0     |
Sample:    |==============|
// categoryPercentage: 0.5
// barPercentage: 1.0
Bar:             |1.0||1.0|
Category:        |   .5   |
Sample:     |==================|

编辑:

你可以从图表的元集中获取条形条宽度，并使用它在图表上绘制，如下所示:

const plugin = {
id: 'background',
beforeDraw: (chart, args, opts) => {
if (!opts.color) {
return;
}
const {
ctx,
chartArea,
_metasets
} = chart;
ctx.fillStyle = opts.color;
_metasets.forEach(meta => {
meta.data.forEach(data => {
if (data.horizontal) {
ctx.fillRect(chartArea.left, (data.y - (data.height / 2)), chartArea.width, data.height)
} else {
ctx.fillRect((data.x - (data.width / 2)), chartArea.top, data.width, chartArea.height)
}
})
});
}
}
Chart.register(plugin);
var colors = [];
for (var i = 0; i < 5; i++) {
colors.push('#5671DB');
}
var config = {
type: 'bar',
data: {
labels: ['Commerce, vente', 'Transport', 'Bureautique', 'Accueil', 'Santé', 'Secrétariat', 'Nettoyage', 'Sécurité', 'Mécanique', 'Agro-alimentaire'],
datasets: [{
data: [23.8, 17.7, 13, 9.5, 7.8, 7, 5.5, 5, 4.5, 3.5],
backgroundColor: colors,
hoverBackgroundColor: colors,
borderColor: colors,
}],
},
options: {
onHover() {},
indexAxis: 'y',
barPercentage: 0.8,
//barThickness: 60,
// maxBarThickness: 60,
categoryPercentage: 1.0,
maintainAspectRatio: true,
responsive: true,
plugins: {
background: {
color: '#CDECEF'
},
title: {
display: false,
text: "Les 10 principaux domaines d'emploi",
align: 'start',
fullSize: true,
color: '#324488',
font: {
size: 24,
family: 'Arial',
}
},
legend: {
display: false
},
tooltip: {
backgroundColor: 'rgba(255,255,255,0)',
displayColors: false,
titleFont: {
size: 0,
},
titleMarginBottom: 0,
titleSpacing: 0,
bodyFont: {
size: 25,
weight: 700
},
xAlign: 'right',
callbacks: {
label: (item) => (`${item.parsed.x} %`),
},
},
},
scales: {
y: {
beginAtZero: true,
ticks: {
color: "#34478B",
font: {
size: 18,
},
stepSize: 1,
beginAtZero: true
},
},
x: {
ticks: {
color: "#25C8C9",
font: {
size: 14
},
stepSize: 1,
beginAtZero: true
},
}
}
},
};

var ctx = document.getElementById('myChart').getContext('2d');
new Chart(ctx, config);

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<canvas id="myChart"></canvas>

codePen

Answer 2

如果减小条的大小不成问题，你可以在选项中添加barPercentage。

:

const config = {
type: 'bar',
data,
options: {
indexAxis: 'y',
barPercentage: 0.8
}
};

条形图| Charts.js