2016-09-15 104 views
0

我使用Chart.js作为我的图表库。我创建了horizo​​ntalBar图表。chart.js固定条宽度问题

我需要设置图表中单个条的宽度。

我没有找到具体的chartjs文档什么,但同时在看源代码,我发现这是设置固定条宽

但随着行数增加,而不是增加图表的高度选项barThickness ,酒吧互相碰撞。例如请检查小提琴:

https://jsfiddle.net/orhp0zLg/

有什么办法可以增加图表的高度,而不是让酒吧的相互碰撞?

回答

1

barThickness属性是固定宽度,正如您在问题中注意到的那样。

但是,您还有一个名为barPercentage的其他属性,它是酒吧的最大宽度的乘数。
应设置berPercentage的值(假设0.95),你将永远有相同的格式,不管你有多少酒吧有:

options: { 
    scales: { 
     yAxes: [{ 
      barPercentage: 0.95, 
     }] 
    } 
} 


这是您 updated fiddle与修复和这里是与第一7个值的结果,然后12:

enter image description here

enter image description here

+0

是否还存在替代方法来固定条的宽度并增加图表的高度。可以通过完全清除图形并设置画布的高度,然后重新渲染图形。 – user2692032

+0

@ user2692032此答案使用Chart.js内置属性。如果你需要像你所说的解决方案,你应该试着问另一个关于动态'css'和'canvas'的问题。 – tektiv