在Chart.js条形图中指定每个条形图的不同厚度

Question

在自定义图表上工作，可以根据数据提供的值确定条形图或水平条形图中的条形图的厚度，而不是使用barThickness或barPer百分比/类别百分比的预设宽度。

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

例如，这段代码：

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,
})

...会使图表看起来像这样：

...而不是这个：

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

主要功能包括：

• 勾号标签位于条的中心
• 勾号间隔由钢筋厚度决定
• 钢筋间距均匀

如何做到这一点？

我知道我可以破解条形图控制器的绘制，以指定绘制矩形的显式宽度，但这无法生成均匀间隔的条形图。相反，它们在固定宽度类别中有可变宽度，这不是我想要的外观：

我的预感是，我需要扩展一个新的轴，但这似乎很复杂。

希望得到关于最佳方法的任何建议！谢谢

类似于这个未回答的问题。在我的搜索中遇到了这些答案，这些答案似乎很有希望，但最终不是正确的答案：

• 如何修改Chartjs 2条形图中的条形宽度
• 如何在chart.js?中动态设置横杆宽度




Answer 1

要支持此功能，需要做三件事：

1. 使用类别比例计算与轴尺寸成比例的钢筋厚度（垂直宽度，水平高度）

在此包中作为自定义图表实现了以下功能：https://github.com/swayable/chartjs-chart-superbar 使用Chart.js的新图表和新Axis自定义功能。

通过将以下行为添加到类别量表中，解决了（1）：

getBarThickness(thicknessPercentage) {
  let thickness = thicknessPercentage * this._axisSize(),
    spacing = this.options.spacing * 2

  return thickness - spacing
}

_axisSize() {
  return this.isHorizontal() ? this.width : this.height
}

（2）有点复杂，因为类别比例中每个值的像素需要考虑到数据集中每个前一项的所有不同厚度，当计算与边缘的距离时（左为水平，或top为垂直）。否则，轴中类别的厚度将与条的厚度不匹配，并且类别轴标签将不会以条为中心。

（1）和（2）的相关文件：https://github.com/swayable/chartjs-chart-superbar/blob/master/src/scale.thickCategory.js

（3） 通过使用上面的Scale#getBarThickness（）方法更改元素的\u视图和\u模型属性中的相关维度来解决此问题。

（3）的相关文件：https://github.com/swayable/chartjs-chart-superbar/blob/master/src/mixin.barThickness.js

通过阅读Chart.js的源代码，特别是scale.category.js和core.datasetController.js，我们了解了其中的大部分内容。还从Chart.smith.js的源代码中获得了一些灵感。