HTML で半円や扇形のゲージを描画する方法

ども、@kimihom です。

f:id:cevid_cpp:20190511205736j:plain

今回は扇形のゲージを実装したので、その記録を記す。

完成イメージ

先日、応答率シミュレーターというのを公開した。人数や通話時間から、どのくらいの電話対応ができるのかを計算してくれるツールだ。

www.callconnect.jp

この計算結果にある % の表示が今回のテーマだ。以下のようなゲージが表示される。

f:id:cevid_cpp:20190511203126p:plain

CSS でなんとかする

最初、CSS でできるだろうということで設計をしてみた。そして、扇形の表記は CSS で実装することができた。

まず、円を描くには border-radius: 50%; を指定することで実現可能だ。そして width や height でその円の大きさをよしなに調整することができる。最終的にborder: 1px solid black などと指定すれば、円の線を描くことができるようになる。

続いて、扇形を表示するために、一部のエリアを重ねて非表示にすることで対応した。そのために、円を描いた div を position: absolute にして、同じエリアに <div class="hidezone"> を用意した。

f:id:cevid_cpp:20190511203804p:plain

<div class="result-wrapper">
  <div class="border-wrapper"></div>
  <div class="hidezone"></div>
</div>

.result-wrapper {
  width: 160px;
  position: relative;
  .border-wrapper {
    width: 160px;
    height: 160px;
    position: absolute;
    top: 0;
    border: 4px solid #CCCCCC;
    border-radius: 50%;
  }
  .hidezone {
    position: absolute;
    width: 100%;
    background-color: white;
    top: 108px;
    height: 52px;
  }
}

よしよし、順調に扇形を描くところまではできた。これはいけるな・・・誰もがそう思った次の瞬間。

扇形ゲージ表示

今回の実装では、途中までの線を描く必要がある。50% なら扇形の半分のところまで線を引くという具合だ。この実装を DIV と CSS だけで実現するのは不可能だと判断した。何かしらの描画ツールを利用して、途中までの半円を描く実装をしなければならなくなった。

そこで、今回はこの実装のためにわざわざ canvas を利用して、弧を描くことにした。

<div class="result-wrapper">
  <div class="border-wrapper"></div>
  <canvas class="border-inner"></canvas>
  <div class="hidezone"></div>
</div>

  .border-inner {
    position: absolute;
    top: 0;
  }

    var canvas = $(".border-inner")[0];
    var ctx = canvas.getContext('2d');
    ctx.clearRect(0, 0, 200, 200);  // 以前描画したcanvasがあればクリア。

    ctx.beginPath();
    ctx.lineWidth = 4;
    ctx.strokeStyle = "red";

    // min -200, max 20
    var result = 60;   // 60%の表記
    var startPoint = -200 + 220 * result / 100;
    ctx.arc(80, 80, 78, startPoint * Math.PI / 180, 160 * Math.PI / 180, true);
    ctx.stroke();

とりわけ重要なのが、Canvas の arc メソッドだ。第1,2 引数でまず中心のポイントを指定する。今回は width. height を 160px に固定したので、真ん中はそれぞれ 80 だ。第3引数は、開始地点となる。0 の場合、これは座標のように中心から真右の方向になる。真左から円の描画を開始したい場合には-180となる。ここでstartPoint で -200 とかあるのは、今回の円が半円でもなく、ものすごい中途半端な円を描画しているための値となっている。もはやここら辺の数字は楕円なのか、半円なのかとかによって変わってくるので色々変えていただければ幸いだ。

最終的に、canvas を利用することで見事扇型のゲージを表示することができるようになった。めでたしめでたし。