3

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

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

期望的结果

...而不是这个：

目前看来

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

主要特点：

  • 刻度标签以条为中心
  • 刻度间隔由条形厚度决定
  • 条形间距均匀

如何才能做到这一点？

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

宽度不好

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

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

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

4

1 回答 1

2

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

  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) 稍微复杂一些，因为类别尺度中每个值的像素在计算与边缘的距离（水平或垂直）时需要考虑数据集中每个先前项目的所有各种厚度. 否则轴中类别的粗细将与条的粗细不匹配，并且类别轴标签不会在条上居中。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的源代码中获得了一些灵感。

于 2018-11-28T23:59:55.843 回答