Question

我可以使用Jquery和CSS绘制数字折线图。请在下面查看我的代码段。

每10％的宽度，我会有一条细线，它会重复直到线的末尾。现在，例如在第5条细线处，我需要用一个点替换它，并且每隔10、15、20 ...到该行的末尾，点将继续显示。但是我不知道怎么得到。请帮忙。谢谢！

$(document).ready(function(){
  for(var i = 0; i< 40; i++)
    $(".BG").append('<div class="scale"></div>'); 

     
});

.BG {
  display: flex;
  border-top: 5px solid gray;
  position: relative;
}
.scale {
  width: 10%;
 /*  border-top: 5px solid green; */
}
.scale:after {
  content: "";
  width: 1px;
  height: 7px;
  background-color: black;
  float: right;
  /* margin-top: -4px; */
  position: absolute;
  top: -6px
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="BG">

</div>

Answer 1

JS

 $(document).ready(function(){
      for(var i = 1; i<= 40; i++) {
        if (i%5 === 0) {
          $(".BG").append('<div class="scale scaled-dot"></div>'); 
        } else {
          $(".BG").append('<div class="scale"></div>'); 
        }
      }
    });

CSS

.scaled-dot:after {
  // Modify styles with how you want the dot to look like
}

Answer 2

纯CSS解决方案可以做到这一点。

我使用您可以轻松调整的随机值的示例

.BG {
  height:20px;
  background:
    radial-gradient(circle closest-side,red 97%,transparent 100%) 
      44% 0 /  /* adjust the 44% to control the position */
      calc(100%/5) 100%, /* adjust the 5 to control the space between circle */
     
    repeating-linear-gradient(to right, 
        black     0 2px, /* change the 2px to adjust the width of the bars */
        transparent 2px calc(100%/20)), /* adjust the 20 to control the number of bars */
    
    linear-gradient(gray,gray) center/100% 10px no-repeat;
  border-right:2px solid black;
}

<div class="BG">

</div>

使用jQuery绘制数字折线图

2 个答案: