BLOG
25年新卒 WEBエンジニア インターンシップ 受付中

HTMLとCSSで作るインフォグラフィック(円/棒グラフ・レーダーチャート)【アニメーションつき】

更新日:2022/06/03

近年では、グラフやチャートといったインフォグラフィックを導入しているウェブサイトが増えてきています。インフォグラフィック化することでデータをよりわかりやすく表示出来たり、重要なポイントを強調したりできる、といったメリットを挙げることができます。

インフォグラフィックをウェブサイトに入れる場合、作成した画像を貼るだけでは問題ないですが、そこにアニメーションをつけるとなるとHTMLやCSS、JavaScriptを用いて作成する必要があります。HTMLやCSSでインフォグラフィックを作ろうとすると、なんだか難しそう…というイメージがあるかもしれませんが、実際には、とてもシンプルに作ることができます。どれくらい簡単か、ぜひ本記事で確認してみてください。

完成のデモはこちら

インフォグラフィックとは

インフォグラフィック(infographics)とは、「info(情報)」を「graphics(図形)」で表すという意味の言葉です。データを視覚的にわかりやすくするために、図やグラフに要素を盛り込んだものです。数値の推移や、文字では説明しづらい情報を簡潔でわかりやすく伝えたいときに便利です。標識や地図、教科書に使われていましたが、近年ではウェブサイトにも取り入れられるようになっています。

以下のようなものがインフォグラフィックに当てはまります。

インフォグラフィックに関するブログ記事は他にもありますので、以下も合わせてご覧ください。

インフォグラフィックとは?ゼロから作成まで徹底解説!

本記事では4種類のインフォグラフィックの作り方を解説します。

円グラフ

まずはこのような円グラフを作っていきます。

円をSVGで作る

まずは円グラフの円を作ります。SVGタグのcircleで円を描きます。

設定項目は以下の通りです。

cx 円のX軸の中心座標
cy 円のY軸の中心座標
r 半径

cxとcyを0にしたとき、円の中心部が0地点に来るイメージです。

svgエリアの中心に円が来るよう、cxとcyを調整しましょう。

次に、SVGのエリアと円の大きさをCSSで調整します。円の半径を70px(直径140px)で設定しましたが、円に10pxの枠線を付けてグラフの線にするため、その太さを考慮しエリアは円の直径よりも少し大きくしています。

circleは以下のような設定です。

設定項目は以下の通りです。

fill 塗りつぶし
stroke-width 線の太さ
stroke 線の色
stroke-dasharray 線の間隔
stroke-dashoffset 線が始まる位置
stroke-linecap パスの端の形を変える(roundは円)

今回は直径140pxの円なので、外周を求めるには140px × π = 439.822…px(四捨五入して440px)となります。そのため、線が始まる位置を0pxにし、線の間隔は開けなくてよいので440pxにしています。これで、グレーの円が出来上がりました。

数値用の円をSVGで作る

次に、数値を表す円を作り、上に重ねます。先ほど作った円に .base というクラスを付け、新しい円に .line というクラスを付けました。

任意の数値までの線にしたい場合、外周 ―(外周 × 入れたい数値) ÷ 100 となります。
今回は入れたい数値を88にしているので、外周の88%の線が引かれます。

文字を入れる

このままでも円グラフとして成り立っていますが、より数値などがわかりやすいようテキスト情報を入れたいと思います。

.number の中に数値とパーセント記号、.text にグラフの名前を入れてみました。

そして、これらを修飾します。
.number は絶対配置で円の中心に移動させ、数字とパーセント記号のジャンプ率を変えます。
グラフの名前は真ん中寄せにしてみました。

すると、このような形になります。

アニメーションを付ける

.line(色のついたほうの線)に対してアニメーションをつけます。1秒で、線の長さが0から440pxになる、というものです。

すると、このように動きます。

円グラフの開始位置を上にする

現在、グラフが右から始まる状態になっています。これでも問題はありませんが、上から始まるグラフのほうが慣れ親しんでいるかと思いますので、グラフを回転して調整します。

このように、上から始まる円グラフになりました。

複製する

色ごとにクラスを変えて複製してみました。

HTMLの全体ソースを表示する

HTML

CSSの全体ソースを表示する

CSS

完成のデモはこちら

棒グラフ

横に伸びる棒グラフを作っていきます。

棒グラフを作る

棒グラフ用の .graph と、その大枠 .bar-graph-wrap 用意します。今は中身が空で大丈夫です。

CSSで、グラフの大枠の高さを固定しました。

グラフは絶対配置にし、表したいパーセンテージをwidthで指定します。今回は88%としたかったので、widthも88%にしています。