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

Question

正在制作自定义图表，该图表可以根据数据提供的值确定条形图或水平条形图中条形的粗细，而不是使用 barThickness or barPercentage / categoryPercentage 尽可能预设的宽度。

目标：我可以使用包含 x 值和 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,
})

... 会呈现如下所示的图表：

... 而不是这个：

（这里没有包括不相关的样式选项）。

主要功能：

刻度标签以条为中心
报价间隔由柱粗细决定
条形均匀分布

如何做到这一点？

我知道我可以修改条形图控制器的绘图来为绘制的矩形指定明确的宽度，但这无法生成均匀分布的条形。相反，它们在固定宽度类别中具有可变宽度，不是我想要的外观：

我的预感是我需要扩展 new axis 但这看起来很复杂。

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

类似于this unanswered question。在我的搜索中遇到了这些看起来很有希望但最终不是正确答案的答案：

Answer 1

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

使用类别比例来计算与轴尺寸（垂直宽度，水平高度）成比例的条形厚度
覆盖类别比例中的 #getPixelForValue() 方法，使类别宽度反映不同的厚度，而不是统一
使用比例计算的值更改控制器绘制的矩形的尺寸

在此包中将这些实现为自定义图表：https://github.com/swayable/chartjs-chart-superbar using Chart.js's new chart and new axes 自定义功能。

通过将这样的行为添加到类别规模来解决 (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) 有点复杂，因为类别尺度中每个值的像素需要考虑数据集中每个先前项目的各种厚度的 all在计算距边缘的距离时（水平方向为 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 and core.datasetController.js. Also took some inspiration from the source code for Chart.smith.js。

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

Specify varying thickness of each bar in Chart.js bar chart

javascript

charts

chart.js

chart.js2