🍕
CSSで円グラフを作りたい
円グラフを作りたい
こういうのをCSSで作りたい場合、どうするか？
実は、conic-gradient()という、円グラフを作るためだけに用意されたようなCSS関数があって、これを使えば簡単に円グラフを作ることができます。
conic-gradient()は中心点の周りを回る扇型グラデーションを生成します。
ベーシックな円グラフ
background:conic-gradient(green 0%,green 73% ,grey 73%,grey 100%);
この円グラフにこれより少し小さい円を重ねると、円周だけ見せるタイプの円グラフができます。
アニメーションさせたい
円グラフをアニメーションさせたい場合、conic-gradient()にCSSアニメーションを指定することはできないので、JavaScriptで無理やり動かします。
conic-gradientの%の値を任意の値まで1%ずつ増加させることでアニメーションを実現します。
backgroundにはCSS変数を指定しておき、それをsetPropertyで書き換えます。
アニメーション
function sleep(milliseconds) {
return new Promise(resolve => setTimeout(resolve, milliseconds));
}
async function ChartAnime() {
for (let i = 0; i < 79; i++) {
document.getElementById("chart").style.setProperty("--GraphAnime","conic-gradient(red 0%,red "+i+"%, transparent "+i+"%, transparent 100%)")
document.getElementById("number").innerHTML=i;
await sleep(20);
}
}
ChartAnime()
うまいことアニメーションさせるために、ループ処理を毎回遅延させます。
これでこんな感じの円グラフができました。Rerunでアニメーションを確認してみてください。
かっこいい円グラフを作りたい
こういう、AppleWatchのアクティビティアプリみたいな両端に半円のついた円グラフを作りたい場合、これはconic-gradient()ではどうしようもないので、素直にライブラリを使いましょう。
参考
Discussion