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

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

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

html

<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);
  }

参考サイト

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

  • コーダーのための計算機