- ベストアンサー
コニク（conic）で円グラフがつくれますか？
コニク（conic）で円グラフがつくれますか？ ここにいうコニク（conic）とは、 CSS の「conic-gradient() 関数」のことです。 単色なら簡単に作れます。 さて、添付図のような多色の円グラフは どんなコードで作れますか？
- retorofan
- お礼率86% (336/388)
- JavaScript
- 回答数3
- ありがとう数2
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
文字は適当にかぶせてね あなたの血肉になってないね <!DOCTYPE html> <title></title> <meta charset="utf-8"> <style> #G { border-radius: 50%; width: 500px; height: 500px; } </style> <body> <table id="T" border="1"> <th>趣味<th>人数 <tr><td>旅行<td>4513 <tr><td>読書<td>2345 <tr><td>映画<td>1234 <tr><td>音楽<td>2985 </table> <div id="G"></div> <script> const A=['red','green','blue', 'orange'], B=[...T.querySelectorAll('tr td:nth-of-type(2)')].map(a=>parseFloat(a.textContent)||0), C=B.reduce((a,b)=>a+b); let [a,...b] = B.map(a=>a/C*400), c = b.reduce(([[a,b],...c],d)=>[[b,b+d],[a,b],...c],[[,a]]).reverse(), d = c.map((a,b)=>[A[b],...a.map(a=>a?a.toFixed(2)+'grad':'')].join` `); G.style.background = `conic-gradient(${d.join`,`})`; </script>
その他の回答 (2)
- _kappe_
- ベストアンサー率68% (1581/2304)
質問文にはJavaScriptでという指定がなく、質問が投稿されたカテゴリーには気付かなかったので、CSSでの書き方を回答しました。 JavaScriptでの方法については他の回答者にお任せします。
- _kappe_
- ベストアンサー率68% (1581/2304)
簡単なものだとhttps://developer.mozilla.org/ja/docs/Web/CSS/gradient/conic-gradientの下のほうに例があります。赤・橙・黄の3色です。 conic-gradient(red 36deg, orange 36deg 170deg, yellow 170deg)
お礼
ご回答ありがとうございます。 折角ですが、このサイトは既に確認済みです。 なお、これはＣＳＳであり、 希望しているJavaScriptコードではないです。
補足
ＣＳＳの記述によるサンプルは それなりに見て知っています。 希望は、JavaScriptコーディングによって 添付画像のように仕上げたいのです。
お礼
度々申し訳ございません。 質問の投稿時には JavaScriptカテゴリーで 行いました。 反映されていないですね。