正在开发一个自定义图表,可以根据数据提供的值确定条形图或水平条形图中条的厚度,而不是像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,
})
...将呈现如下图所示的图表:
...而不是这样:
(这里没有包括无关的样式选项)。
主要特点包括:
- 刻度标签居中于条形上
- 刻度间隔由条形厚度决定
- 条形间距均匀
如何做到这一点?
我知道可以通过修改绘制条形图控制器来指定矩形的显式宽度,但这不能产生等距的条形。相反,它们在其固定宽度类别内具有可变宽度,这不是我想要的外观:
我的直觉是需要扩展一个新轴,但这似乎很复杂。
希望能得到任何有关最佳方法的建议!谢谢!
类似于这个未解答的问题。在我的搜索中遇到了这些看起来很有前途但最终不是正确答案的回答: