どうも！LSSです！！
【CSS】お手軽（？）な円グラフの描き方【小ネタ】 - Little Strange Software
で、お手軽なコードで円グラフをWebページに入れる方法について書きました。
実際に円グラフを置く場合には「どの色が何を示しているのか」や「数値でいうとどのぐらいなのか」を別途記載する必要があるかと思います。
書き方は色々あるかと思いますが、その例を２つほど。
それと、ちょっと気取った変形例を１つ、試してみました。
文字入れ例
円グラフの中に、それぞれの内容を数値%で入れていく一例です。
コード
<div style="position: relative; width: 200px; height: 200px; border-radius: 50%; background: conic-gradient(red 0% 43%,blue 43% 66%,yellow 66% 85%,green 85% 100%);">
<div style="position: absolute; left: 120px; top: 60px; background: #ffffff80;">情熱 43%</div>
<div style="position: absolute; left: 40px; top: 150px; background: #ffffff80;">冷静 23%</div>
<div style="position: absolute; left: 0px; top: 85px; background: #ffffff80;">狂気 19%</div>
<div style="position: absolute; left: 5px; top: 10px; background: #ffffff80;">その他 15%</div>
</div>
円グラフとなるdivタグの中に、項目ごとのdivタグを別途用意し、
<div style="position: absolute; left: 120px; top: 60px; background: #ffffff80;">情熱 43%</div>
left（円グラフの左端からどれだけ右にずらすか）、top（円グラフの上端からどれだけ下にずらすか）をそれぞれ調整・設定しています。
基準となる円グラフそのものには「position: relative;」を設定し、その中のdivタグには「position: absolute;」を設定する事で「円グラフの中での位置」を指定する事ができます。
凡例
冷静 23%
狂気 19%
その他 15%
円グラフの横に、各色の意図とその割合を数値で示す凡例をつける一例です。
コード
<div style="position: relative; width: 300px; height: 200px;">
<div style="position: absolute; width: 200px; height: 200px; border-radius: 50%; background: conic-gradient(red 0% 43%,blue 43% 66%,yellow 66% 85%,green 85% 100%);"> </div>
<div style="position: absolute; left: 210px; top: 0px;">
<span style="background-color: red; color: white;">情熱 43%</span><br />
<span style="background-color: blue; color: white;">冷静 23%</span><br />
<span style="background-color: yellow;">狂気 19%</span><br />
<span style="background-color: green; color: white;">その他 15%</span>
</div>
</div>
こちらは、円グラフの外側をさらにdivタグで囲み、
外側のdiv…幅300px、高さ200px（
（円グラフ…幅200px、高さ200px）
（凡例…左端から210px右にずらす）
）
という、「外側divの中に円グラフと凡例を内包した」構造となっています。
斜めの円グラフ
「楕円の円グラフ」を、ちょっと気取って傾けてみました。
コード
<div style="
transform: rotate(-25deg);
width: 300px;
height: 150px;
border-radius: 50%;
background:
conic-gradient(from 25deg,red 0% 43%,blue 43% 66%,yellow 66% 85%,green 85% 100%);
"> </div>
赤太字部分が昨日のコードからの追加部分、青太字部分が楕円にするための幅・高さ設定です。
まず、
transform: rotate(-25deg);
で楕円を反時計回りに25度回転。
その状態では、中のグラフ部分も同様に傾くため、conic-gradient内に
from 25deg,
を入れて「円グラフの開始角度を時計回りに25度回転」させる事で、グラフ開始角度を真上方向に戻しています。
あとがき
昨日の記事にいただいたコメントを元に挑戦してみました。
なお、この記事中に出てくる文言例は、気の利いたものを思いつかなかったので全く意味のないものですｗ
ってなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
