如何使条形宽度相同而类别宽度可变？

Question

我有一个包含多个数据集的条形图，其中包含空值。我使用

skipNull

隐藏空值。目前，每个组（月）具有相同的宽度，并且条形的宽度与组中条形的数量成反比。我希望图表中的所有条形都具有相同的宽度，并且组具有可变的宽度。

这是我当前的代码：

const data = {
  labels: ['January', 'February', 'March'],
  datasets: [
    {
      label: 'Dataset 1',
      data: [3, null, null],
      skipNull: true,
    },
    {
      label: 'Dataset 2',
      data: [1, 2, null],
      skipNull: true,
    },
    {
      label: 'Dataset 3',
      data: [4, 1, 3],
      skipNull: true,
    },
  ],
};

new Chart(
  document.querySelector('#chart'),
  {
    type: 'bar',
    data: data,
  }
)

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.1/chart.umd.js"></script>
<canvas width="500" height="100" id="chart"></canvas>

这或多或少是我想要的图表的样子（请原谅我糟糕的 Photoshop 技能）：

我尝试了

barPercentage

和

barThickness

，但它们不影响组宽度。

Answer 1

使用

maxBarThickness

属性：

const data = {
  labels: ['January', 'February', 'March'],
  datasets: [
    {
      label: 'Dataset 1',
      data: [3, null, null],
      skipNull: true,
      maxBarThickness: 50,
    },
    {
      label: 'Dataset 2',
      data: [1, 2, null],
      skipNull: true,
      maxBarThickness: 50,
    },
    {
      label: 'Dataset 3',
      data: [4, 1, 3],
      skipNull: true,
      maxBarThickness: 50,
    },
  ],
};

new Chart(
  document.querySelector('#chart'),
  {
    type: 'bar',
    data: data,
  }
)

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.1/chart.umd.js"></script>
<canvas width="500" height="100" id="chart"></canvas>