円のパスに要素を動的に配置します

Question

私は以下の3つの円のdivを設計していますが、アイテムの値に基づいて動的にdivの円形パスに配置したいと考えています。

これを実装する方法はありますか？私は動的にdivの円形のパスに項目を配置したい。

以下のコードでは、divを "placeit"クラスの円形パスに配置したいと考えています。

以下のcodepenを見つけます。 https://codepen.io/najurudeen/full/JJQyzL

.container{ 
 
     width: 700px; 
 
     text-align: center; 
 
     justify-content: center; 
 
     align-items: center; 
 
     display: flex; 
 
     background: #282e3d; 
 
     height: 600px; 
 
     
 
    } 
 
     .one{ 
 
     height: 170px; 
 
     background: #2196F3; 
 
     width: 170px; 
 
     border-radius: 100%; 
 
     position: absolute; 
 
     z-index: 4000; 
 
     background: radial-gradient(#86c56f, #30bf9a); 
 
     
 
    } 
 
    
 
    .two{ 
 
     height: 240px; 
 
     background: #9E9E9E; 
 
     width: 240px; 
 
     border-radius: 100%; 
 
     position: absolute; 
 
     
 
     //opacity: 0.4; 
 
     background: radial-gradient(rgba(32,135,153,0.4),rgba(36,133,153,0.5)); 
 
     
 
    } 
 
    
 
    .three{ 
 
     height: 300px; 
 
     background: #E91E63; 
 
     width: 300px; 
 
     border-radius: 100%; 
 
     /* position: absolute; */ 
 
     background: radial-gradient(rgba(40,67,90,0.4),rgba(41,67,88,0.5)); 
 
     
 
    } 
 
    
 
    .placeit{ 
 
     position:absolute; 
 
     left:90%; 
 
     top:20%; 
 
    }

<div class="container"> 
 
    <div class="one"></div> 
 
    <div class="two"> 
 
     <div class="placeit">item1 60%</div> 
 
     <div></div> 
 
     <div></div> 
 
    </div> 
 
    <div class="three"> 
 
     <div class="placeit">item2 70%</div></div> 
 
    </div>

Answer 1

あなたの質問は、あなたが動的に言うとき、私はあなたのコードにいくつかのスクリプトを持っていることについて話している願っています...かなりあいまいです...それはそうであるならば、どこにありますスクリプトとあなたの価値が来ているところ...あなたは定義していないanything..andあなただけの円グラフを作成しようとしているならば、多分これが役立つから：

<div class="container"> 
     <div class="one"><p class="center">Item0 75%</p></div> 
     <div class="two"> 
      <p>item1 60%</p> 

     </div> 
     <div class="three"> 
      <p>item2 70%</p> 
     </div> 
    </div> 

をとtを追加彼のcss：

p { 
    margin-top: 10px; 
} 
.center { 
    margin-top: 0; 
    line-height: 170px; 
}