动态生成 Html 个图形

Question

我正在尝试找出动态生成此图形的最佳方法。这可以是 1 -> n 个圆圈，其中包含与基线相关的信息。

请告诉我您以前是如何做到这一点的，或者您熟悉一种可能有效的方法。

这是基本布局的图像。

这是客户样本报告的图片。

Answer 1

这是您的形状的基本 css。您应该能够轻松扩展此图案以旋转底部图案的形状。在前后使用 css 有助于保持标记干净。

.fizz { 
    height: 50px; 
    width: 50px; 
    background:#ddd; 
    border-radius:50%; 
    position:relative; 
    float: left;
    margin-right:20px;
}
.fizz:before { 
    content:""; 
    height: 50px; 
    top: 49px; 
    left: 23px;
    position:absolute;
    border-left: 4px solid #ddd;
}
.fizz:after { 
    content:""; 
    height: 10px; 
    width: 10px; 
    top: 97px; 
    left: 16px;
    position:absolute;
    border: 4px solid #ddd;
    border-radius: 50%;
}

<div class="fizz"></div>
<div class="fizz"></div>
<div class="fizz"></div>
<div class="fizz"></div>

动态生成 Html 个图形

Dynamically Generate Html Graphic

html

css

dynamic