小编tan*_*ner的帖子

使用自定义图表，可以根据数据提供的值确定条形图或水平条形图中条形的厚度，而不是使用barThickness或barPercentage / CategoryPercentage尽可能预设的宽度。

x目标：我可以使用包含值和 a 的数据创建一个水平条形图thickness，其中厚度成为该条形相对于其他条形的相对厚度。

例如，这段代码：

const data = {
  labels: ['Northeast', 'Midwest', 'South', 'West'],
  datasets: [
    {
      data: [
        { x: 10, thickness: 18 },
        { x: 20, thickness: 8 },
        { x: 13, thickness: 5 },
        { x: 4, thickness: 12 }
      ],
    },
  ],
}

const context = document.querySelector('#myChart').getContext('2d')

const barChart = new Chart(context, {
    type: 'horizontalBar',
    data: data,
})

...会渲染一个看起来像这样的图表：

...而不是这个：

（此处不包括不相关的样式选项）。

主要特点：

• 刻度标签位于栏的中心
• 刻度间隔由柱线厚度决定
• 条形间距均匀

如何才能做到这一点？

我知道我可以修改条形图控制器的绘制以指定所绘制矩形的显式宽度，但这无法生成均匀间隔的条形。相反，它们在固定宽度类别中具有可变宽度，这不是我 …