【CSS】お手軽円グラフの文字入れ・その他

　どうも！LSSです！！

【CSS】お手軽（？）な円グラフの描き方【小ネタ】 - Little Strange Software

で、お手軽なコードで円グラフをWebページに入れる方法について書きました。

実際に円グラフを置く場合には「どの色が何を示しているのか」や「数値でいうとどのぐらいなのか」を別途記載する必要があるかと思います。

書き方は色々あるかと思いますが、その例を２つほど。

それと、ちょっと気取った変形例を１つ、試してみました。

文字入れ例

情熱 43%

冷静 23%

狂気 19%

その他 15%

円グラフの中に、それぞれの内容を数値%で入れていく一例です。

コード

<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;」を設定する事で「円グラフの中での位置」を指定する事ができます。

凡例

 

情熱 43%
冷静 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度回転」させる事で、グラフ開始角度を真上方向に戻しています。

あとがき

昨日の記事にいただいたコメントを元に挑戦してみました。

なお、この記事中に出てくる文言例は、気の利いたものを思いつかなかったので全く意味のないものですｗ

ってなとこで、今回はこのへんで！

次回もまた、よろしくお願いします^^