时间戳

首页 > 解决方案 > Chartist.js - 向 Y 轴添加刻度线（不是值）

javascript - Chartist.js - 向 Y 轴添加刻度线（不是值）

问题描述

我正在寻找一种方法来添加实际的刻度线，小线，指向 Y 轴上的值，如下图所示： 屏幕截图刻度线

我尝试将路径附加到“.ct-vertical”线（轴线本身除外），尽管它们附加在代码中，但它们不可见。我也不确定是否最好将它们添加到每个值的 y 轴，或者作为我在上面尝试过的“.ct-vertical”行的扩展名。

任何帮助将不胜感激。

谢谢！

标签： javascriptsvg

解决方案

您可以尝试为跨度添加 ::before ）

span.ct-label.ct-horizontal {
  padding-top: 10px;
  position: relative;

 &::before {  
    content: "|";
    display: block;
    position: absolute;
    top: -5px;
    left: 0px;
    font-size: 5px;
   font-weight: bold;
   color: black;
  }
}

https://codepen.io/duchuy-the-flexboxer/pen/WWjreW

（对于 IE，你需要定位 <text> 元素）

推荐阅读