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

Question

正在开发一个自定义图表，可以根据数据提供的值确定条形图或水平条形图中条的厚度，而不是像barThickness或barPercentage / categoryPercentage那样预设宽度。

目标：我可以创建一张包含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条形图中的条形宽度
• 如何动态设置图表.js中的条形宽度？

- tanner

Answer 1

支持这个功能需要执行以下三个步骤：

1. 使用分类比例尺在轴大小（垂直为宽度，水平为高度）的比例下计算条形图的厚度
2. 覆盖类别比例尺中的#getPixelForValue()方法，使类别宽度反映变量的厚度，而不是一致的
3. 使用比例尺计算的值更改控制器绘制的矩形的尺寸

在此软件包中实现了自定义图表：https://github.com/swayable/chartjs-chart-superbar，并使用 Chart.js 的 新图表 和 新轴线 自定义功能。

通过将类别比例尺设置为如下行为，成功完成步骤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) 相对较为复杂，因为类别刻度中每个值的像素需要考虑数据集中每个先前项目的各种厚度，以计算边缘（水平方向的 left 或垂直方向的 top）的距离。否则，轴上类别的厚度将不匹配条形的厚度，并且类别轴标签将不居中于条形上。

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

(3) 通过使用上面的 Scale#getBarThickness() 方法来更改元素的 _view 和 _model 属性中的相关尺寸来解决。

(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 的源代码中汲取了一些灵感。

- tanner