canvasで作るドーナツグラフと円グラフ

canvasでドーナツグラフと円グラフを作りました。
複数必要だったので、何個も置けるようにしました。

See the Pen 180930_canvasで作るドーナツグラフと円グラフ by nekuta (@nekuta) on CodePen.

<div class="demo">
  <p>ドーナツグラフ</p>
  <ul class="demo_list">
    <li>
      <div class="graph_box">
        <div class="graph_box_wrap white"> <canvas width="100" height="100" id="" class="match_graph" data-percent="15"></canvas>
          <div class="graph_box_percent"><span></span>%</div>
        </div>
      </div>
    </li>
    <li>
      <div class="graph_box">
        <div class="graph_box_wrap white"> <canvas width="100" height="100" id="" class="match_graph" data-percent="40"></canvas>
          <div class="graph_box_percent"><span></span>%</div>
        </div>
      </div>
    </li>
    <!--中略-->
  </ul>
</div>
<div class="demo">
  <p>円グラフ</p>
  <ul class="demo_list">
    <li>
      <div class="graph_box">
        <div class="graph_box_wrap"> <canvas width="100" height="100" id="" class="match_graph" data-percent="15"></canvas>
          <div class="graph_box_percent block"><span></span>%</div>
        </div>
      </div>
    </li>
    <li>
      <div class="graph_box">
        <div class="graph_box_wrap"> <canvas width="100" height="100" id="" class="match_graph" data-percent="40"></canvas>
          <div class="graph_box_percent block"><span></span>%</div>
        </div>
      </div>
    </li>
    <!--中略-->
  </ul>
</div>

SCSS

  html {
    font-size: 62.5%;
    color: #333;
  }

  p {
    font-size: 1.6rem;
  }

  .demo_list {
    list-style-type: none;
    margin: 0;
    padding: 0;

    >li {
      display: inline-block;
      margin: 0 20px;
    }
  }

  //seeker-match
  .graph_box {
    padding: 5px;
    box-sizing: border-box;
  }

  .graph_box_wrap {
    position: relative;
    width: 100px;
    height: 100px;
    margin: 0 auto;

    &.white {
      &:after {
        content: "";
        position: absolute;
        display: block;
        width: 70px;
        height: 70px;
        background: #fff;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        margin: auto;
        border-radius: 50% 50%;
      }
    }
  }

  .graph_box_percent {
    position: absolute;
    display: inline-block;
    width: 100%;
    top: 50%;
    left: 0;
    text-align: center;
    font-size: 1rem;
    font-weight: bold;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    z-index: 1;

    &.block {
      display: block;
      position: static;
      margin-top: 20px;
    }

    span {
      font-size: 2rem;
      font-weight: bold;
    }
  }

javascript

  var cleate_graph = function(name, percent) {
    var element = document.getElementById(name);
    var context = element.getContext("2d");

    context.beginPath();

    var angleA = 360 * (percent / 100);
    var angleB = 360 * ((100 - percent) / 100);

    context.beginPath();
    context.arc(50, 50, 50, (0 - 90) * Math.PI / 180, (angleA - 90) * Math.PI / 180, false);
    context.lineTo(50, 50);
    context.fillStyle = "#16a4b4";
    context.fill();

    context.beginPath();
    context.arc(50, 50, 50, (angleA - 90) * Math.PI / 180, ((angleA + angleB) - 90) * Math.PI / 180, false);
    context.lineTo(50, 50);
    context.fillStyle = "#EBEBEB";
    context.fill();
  };

  var match_graph = document.getElementsByClassName('match_graph');
  for (var i = 0; i < match_graph.length; i++) {
    match_graph[i].setAttribute('id', 'graph_' + i);
    var name = match_graph[i].getAttribute('id');
    var percent = match_graph[i].getAttribute('data-percent');
    var percent_num = match_graph[i].nextElementSibling.getElementsByTagName('span');
    percent_num[0].textContent = percent;
    cleate_graph(name, percent);
  }

canvasで円グラフを作る

canvasで円グラフを作るのはこちらのサイトさんを参考にしました。というよりほぼコピペです。

Canvasで円グラフを描く方法 | syncer
https://lab.syncer.jp/Web/JavaScript/Canvas/12/

複数あるのでcanvasにそれぞれidを振る

match_graphというclassを持つものを探してその個数分forで回しています。
そこにsetAttributeでそれぞれidを振っていきます。

  var cleate_graph = function(name, percent) {
    //中略
  };
  var match_graph = document.getElementsByClassName('match_graph');
  for (var i = 0; i < match_graph.length; i++) { //match_graphのにそれぞれidを振っていく 
    match_graph[i].setAttribute('id', 'graph_' + i);
    var name = match_graph[i].getAttribute('id') //data-percentを取得 
    var percent = match_graph[i].getAttribute('data-percent'); //match_graphの次の要素(graph_box_percent)からspanを探す 
    var percent_num = match_graph[i].nextElementSibling.getElementsByTagName('span'); //spanにdata-percentの値を入れる 
    percent_num[0].textContent = percent; //グラフを描画 
    cleate_graph(name, percent);
  }