【发布时间】：2022-10-06 03:20:43
【问题描述】：
我正在使用 ChartJS：3.9.1 + react-chartjs-2：4.3.1 我有一个问题，当数据集太小（2-3 个值）时 - 条之间的空间太大（见图）：
当数据集有足够的值时，这个问题是不可重现的：
我的数据集：
barChartData = {
labels: labels,
datasets: [
{
data: values,
backgroundColor: \'#F5CB3E\',
// barThickness: 17,
borderRadius: 5,
categoryPercentage: 1.0,
maxBarThickness: 18,
barPercentage: 0.5,
minBarLength: 1,
yAxisID: \'y\',
},
],
};
我的选择：
{
maintainAspectRatio: false,
responsive: true,
indexAxis: \'y\',
plugins: {
legend: {
display: false,
position: \'top\' as const,
},
title: {
display: false,
},
tooltip: {
enabled: false,
},
datalabels: {
display: true,
color: \'#f2f2f2\',
formatter: Math.round,
anchor: \'end\',
align: function (context: DataSetContext) {
const data = context.dataset.data[context.dataIndex];
if (data < 10) {
return \'start\';
} else {
return \'end\';
}
},
offset: function (context: DataSetContext) {
return context.dataset.data[context.dataIndex] < 10 ? -20 : 3;
},
clamp: true,
font: {
size: 14,
weight: 600,
},
},
},
scales: {
x: {
stacked: true,
grid: {
display: false,
drawBorder: false,
},
ticks: {
font: { size: 13 },
color: \'#f0f0f0\',
display: false,
},
suggestedMax: (1 + 0.2) * configurableOptions.xAxisMaxValue,
},
y: {
ticks: {
beginAtZero: false,
color: \'#f0f0f0\',
font: {
size: 14,
weight: 500,
},
},
grid: {
drawBorder: false,
display: false,
},
},
},
};
我与 barPercentage 和 categoryPercentage 共舞，但没有任何改变。似乎文档不包含我的问题的答案。先感谢您！
标签： javascript charts chart.js bar-chart