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

Question

使用自定义图表可以根据数据提供的值确定条形图或水平条形图中条形的粗细，而不是尽可能使用 barThickness 预先设置的宽度或 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,
})

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

... 而不是这个:

(此处未包括不相关的样式选项)。

主要功能:

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

如何做到这一点？

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

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

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

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

• How to modify bar width in Chartjs 2 bar charts
• How to set width of bar dynamically in chart.js?

Answer 1

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

1. 使用类别尺度计算与轴尺寸(垂直宽度，水平高度)成比例的条形厚度
2. 覆盖类别比例中的#getPixelForValue() 方法，使类别宽度反射(reflect)不同的厚度，而不是统一
3. 使用比例尺计算的值更改 Controller 绘制的矩形的尺寸

在这个包中将这些实现为自定义图表:https://github.com/swayable/chartjs-chart-superbar使用 Chart.js 的 new chart和 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) 有点复杂，因为类别尺度中每个值的像素在计算距离时需要考虑数据集中每个先前项目的各种厚度所有边缘(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 的源代码中获得了一些灵感。 .