C3图表刻度值位置

时间:2017-06-06 11:27:49

标签: bar-chart c3.js

我用c3.js建立一个图表。 这是我到目前为止:Image1

这是一个带水平条的图表,因此x轴会旋转。我想更改刻度线的位置(刻度线1,刻度线2,刻度线3)以具有以下内容: Image 2

这可能与c3有关吗?我在参考资料上找不到任何东西。

谢谢!

1 个答案:

答案 0 :(得分:0)

我也需要这样的功能,所以我提供了以下解决方案:

  • 查找DOM中所有最上面的小节(小节表示为<path>元素)。 (最顶部,因为如果一个类别中有多个条形,则需要将刻度线放在类别中最高的条形上方。)

  • 对于上一步中找到的每个条形:查看元素的d属性并从中解析y坐标。 (d属性定义了条形图的绘制方式,看起来像M 0,27.4 L503.45454545454544,27.4 L503.45454545454544,67 L0,67 z,因此在这种情况下,我们对27.4感兴趣)。将所有坐标存储在数组中。

  • 将容器元素(<g>)插入DOM中以将所有刻度线保持在一起

  • 为每个刻度线创建<text>元素,并将坐标数组中的相应y分配为y属性。

jsbin:https://jsbin.com/mumuhoq/3/edit?html,js,output