円グラフのプラグイン Circliful：ボタンで1%ずつ増やす | 動かして学ぶ PHP・jQuery 入門サンプル帳

解説コードを読んでみよう

このサンプルでわかること

jQuery プラグイン「Circliful」で円グラフを表示する方法
プラグインが作った SVG の線を、あとから自分で動かす方法
同じ処理を関数にまとめて使い回す書き方

使っているファイル

add-one.phpデモのページ
js/jquery.circliful.jsCircliful 本体（配布されているものをそのまま使用）
css/jquery.circliful.cssCircliful 用の CSS

1. プラグインを読み込み、グラフの場所を用意する

CSS と JavaScript を head で読み込み、グラフを描きたい場所に空の div を置きます。グラフの大きさは、この div の幅で決まります。

add-one.php（9〜11行目） PHP

    <!-- このサンプルで使うプラグイン -->
    <link rel="stylesheet" href="css/jquery.circliful.css">
    <script src="js/jquery.circliful.js"></script>

add-one.php（17〜19行目） PHP

<button type="button" class="btn btn-primary" id="add-one">＋1 増やす</button>
<button type="button" class="btn" id="reset">0 に戻す</button>
<div id="graph" style="width:280px; max-width:100%;"></div>

2. 円グラフを作る

$("#graph").circliful({ percent: 0 }) で、#graph の中に円グラフが描かれます。percent は最初に表示するパーセントです。

add-one.php（25〜28行目） PHP

  // ① 円グラフを作る（最初は 0%）
  $("#graph").circliful({
    percent: num
  });

3. グラフの正体は SVG の「線」

Circliful は、グラフを SVG（図形を描くための HTML の仲間）で作ります。中には次のような円が入っていて、class="circle" の円の線の長さを変えることで、グラフの量を表しています。

Circliful が作る SVG（ブラウザの開発者ツールで見た形） HTML

<svg viewBox="0 0 194 186">
  <circle class="border" cx="100" cy="100" r="57" … />            <!-- 背景のグレーの輪 -->
  <circle class="circle" cx="100" cy="100" r="57"
          stroke-dasharray="0,20000" … />                      <!-- 色のついた輪（ここを伸ばす） -->
  <text><tspan class="number">0</tspan><tspan class="percent">%</tspan></text>
</svg>

stroke-dasharray="線の長さ, すき間の長さ" は、線を点線にするための指定です。「線の長さ」だけを伸ばし、すき間をとても長く（20000）しておくと、線が途中まで描かれた輪になります。この円は1周がおよそ360なので、1% あたり 3.6 伸ばせばちょうど 100% で1周します。

4. 線を伸ばす処理を関数にする

add-one.php（30〜35行目） PHP

  // ② グラフの見た目を、指定したパーセントに変える
  function setGraph(percent) {
    var angle = percent * 3.6;   // 100% = 360度 なので、1% = 3.6
    $("#graph .circle").attr("stroke-dasharray", angle + ", 20000");
    $("#graph .number").text(percent);
  }

setGraph(50) と呼ぶと、線の長さを 180（＝ 50 × 3.6）にし、真ん中の数字を 50 にします。「＋1」と「0 に戻す」の両方で同じ処理を使うので、関数にまとめておくと書く量が減り、直すときも1か所で済みます。

5. ボタンを押したときの処理

add-one.php（37〜49行目） PHP

  // ③ 「＋1」ボタン
  $("#add-one").on("click", function(){
    if (num < 100) {
      num = num + 1;
      setGraph(num);
    }
  });

  // ④ 「0 に戻す」ボタン
  $("#reset").on("click", function(){
    num = 0;
    setGraph(num);
  });

以前のバージョンでは $("button").click(…) と書いていたため、ページ内のすべてのボタンに反応していました。今のページには目次ボタンやコピーボタンもあるので、#add-one のように id で対象をしぼっています。

num + 1 を num + 10 に変えたり、circliful({ … }) に foregroundColor: '#e8590c' を足して色を変えたりしてみましょう。