【发布时间】:2017-06-06 11:27:48
【问题描述】:
我正在使用 c3.js 构建图表。 这是我目前所拥有的:Image1
这是一个带有水平条的图表,所以 x 轴是旋转的。我想更改刻度(刻度 1、刻度 2、刻度 3)的位置,使其具有如下内容: Image 2
这可能与c3有关吗?我没有在参考资料上找到任何东西。
谢谢!
【问题讨论】:
-
c3 没有内置参数来实现这一点。但这可以通过转换 c3-axis-x 中的文本元素来完成。
我正在使用 c3.js 构建图表。 这是我目前所拥有的:Image1
这是一个带有水平条的图表,所以 x 轴是旋转的。我想更改刻度(刻度 1、刻度 2、刻度 3)的位置,使其具有如下内容: Image 2
这可能与c3有关吗?我没有在参考资料上找到任何东西。
谢谢!
【问题讨论】:
我也需要这样的功能,所以我提出了以下解决方案:
在 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 属性。
【讨论】: