在 Chart.js 条形图中指定每个条形的不同粗细

Question

使用自定义图表，可以根据数据提供的值确定条形图或水平条形图中条形的厚度，而不是使用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,
})

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

...而不是这个：

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

主要特点：

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

如何才能做到这一点？

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

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

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

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

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

Answer 1

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

1. 使用类别比例来计算与轴尺寸成比例的条形厚度（垂直宽度，水平高度）
2. 重写#getPixelForValue()类别比例中的方法，以便类别宽度反映变化的厚度，而不是统一的
3. 使用比例计算的值更改控制器绘制的矩形的尺寸

使用 Chart.js 的新图表和新轴自定义功能将这些实现为此包中的自定义图表： https: //github.com/swayable/chartjs-chart-superbar。

通过将这样的行为添加到类别范围来解决（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) 有点复杂，因为在计算距边缘的距离（水平或垂直）时，类别尺度中每个值的像素需要考虑数据集中每个先前项目的所有各种厚度。否则，轴中类别的粗细将与条形的粗细不匹配，并且类别轴标签将不会在条形上居中。lefttop

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

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

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