【问题标题】:C3 chart tick values positionC3 图表刻度值位置
【发布时间】:2017-06-06 11:27:48
【问题描述】:

我正在使用 c3.js 构建图表。 这是我目前所拥有的:Image1

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

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

谢谢!

【问题讨论】:

  • c3 没有内置参数来实现这一点。但这可以通过转换 c3-axis-x 中的文本元素来完成。

标签: bar-chart c3.js


【解决方案1】:

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

  • 在 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

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2015-09-17
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2023-04-01
    相关资源
    最近更新 更多