概要
HTMLとCSSとjQueryを使用してドーナツグラフを書く方法について説明します。
目次
こんな感じに表示されます
記述方法
HTML
CSS
JavaScript
解説
おわりに
こんな感じに表示されます
記述方法
実際のコードになります。
HTML
<div class="circle">
<div class="circle-before"></div>
<div class="circle-inner">
<p style="font-size: 50px;">
<span id="point">0</span>%
</p>
</div>
<div class="circle-after"></div>
</div>
CSS
.circle {
margin: 0 auto;
position: relative;
width: 216px;
height: 216px;
border-radius: 50%;
text-align: center;
overflow: hidden;
z-index: 1;
background: #fed032;
}
.circle-before {
position: absolute;
top: 0;
left: -108px;
width: 216px;
height: 216px;
background: #ccc;
transform-origin: right 108px;
z-index: 2;
transform: rotate(0deg);
}
.circle-after {
position: absolute;
top: 0px;
left: 108px;
width: 216px;
height: 216px;
background: #ccc;
transform-origin: left 108px;
z-index: 3;
transform: rotate(0deg);
}
.circle-after._right {
background: #fed032;
}
.circle .circle-inner {
position: absolute;
top: 50%;
left: 50%;
padding-top: 26px;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
width: 180px;
height: 180px;
background: #ffffff;
border-radius: 50%;
z-index: 4;
}
JavaScript
jQueryを使用しています。
var point = 0; // %の値
$("#point").text(point)
if (point > 50) {
$(".circle-after").addClass("_right");
$(".circle-after").css("transform", "rotate(360deg)");
$(".circle-before").css("transform", "rotate(" + (point - 50) * 3.6 + "deg)");
} else {
$(".circle-after").css("transform", "rotate(" + point * 3.6 + "deg)");
}
解説
まず、circleという円の要素を用意します。
その子要素として、.circle-before,.circle-afterという円の直径と同じ大きさの正方形2つと、.circleより少し小さい円.circle-innerを作ります。
position:absoluteでそれらを上下左右中央で揃えて重ね、％の値によって.circle-before,.circle-afterを回転させることでドーナツグラフにします。
50%未満のとき
わかりやすいように、.circle-beforeを赤、.circle-afterを青、.circle-innerは非表示にしています。
50%未満のときは、.circle-afterを回転させます。
$(".circle-after").css("transform", "rotate(" + point * 3.6 + "deg)");
50%以上のとき
.circle-afterに._rightというクラスを付与し、円と同じ黄色にします。
.circle-afterを右側に固定し、.circle-beforeを回転させます。
$(".circle-after").addClass("_right");
$(".circle-after").css("transform", "rotate(360deg)");
$(".circle-before").css("transform", "rotate(" + (point - 50) * 3.6 + "deg)");
おわりに
初めて記事を書きました。説明って難しいですね、わかりにくい点があるかもしれません。
参考記事
CSSだけでドーナツグラフをつくってプログレスを表現する
↧