グラフ

グラフ

次の例は、canvasを使って棒グラフを描画する。

会員数の推移
西暦	2018年	2019年	2020年	2021年	2022年	2023年	2024年
会員数	230	360	459	654	714	756	685

ソースコード（開く）

[HTML]
<canvas id="graph" width="480" height="360"></canvas>
<table id="tbl">
  <caption>会員数の推移</caption>
  <thead>
    <tr>
      <th>西暦</th>
      <th>2018年</th>
      <th>2019年</th>
      <th>2020年</th>
      <th>2021年</th>
      <th>2022年</th>
      <th>2023年</th>
      <th>2024年</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>会員数</th>
      <td>230</td>
      <td>360</td>
      <td>459</td>
      <td>654</td>
      <td>714</td>
      <td>756</td>
      <td>685</td>
    </tr>
  </tbody>
</table>

[JavaScript"]
// canvas要素のノードオブジェクト
var canvas = null;
// canvasの2Dコンテキスト
var ctx = null;
document.addEventListener("DOMContentLoaded",init,false);
function init(){
  // canvas要素のノードオブジェクト
  canvas = document.querySelector("#graph");
  // table要素のノードオブジェクト
  var tbl = document.querySelector("#tbl");
  // グラフを描画
  draw_graph(tbl);
}
/*  グラフ描画  */
function draw_graph(tbl){
  // canvasの2Dコンテキスト
  ctx = canvas.getContext("2d");
  // 横幅の表示文字列を取得
  var head_cells = tbl.tHead.rows[0].cells;
  var heads = [];
  for(var i=1; i<head_cells.length; i++){
    heads.push(head_cells[i].innerHTML);
  }
  //   値を取得、最大値も特定
  var max = 0;
  var value_cells = tbl.tBodies[0].rows[0].cells;
  var values = [];
  for(var i=1; i<head_cells.length; i++){
    var v = value_cells[i].innerHTML;
    v = parseInt(v.replace(/[^\d]/g,""));
    values.push(v);
    if(v > max){ max = v;}
  }
  // グラフ原点の定義
  var basex = parseInt(canvas.width * 0.1);
  var basey = parseInt(canvas.height * 0.8);
  // グラフの幅と高さ
  var gw = parseInt(canvas.width * 0.8);
  var gh = parseInt(canvas.height * 0.7);
  // グラフ領域の背景を描画
  ctx.fillStyle = "#eeeeee";
  ctx.fillRect(basex,basey-gh,gw,gh);
  // 軸を表示
  ctx.beginPath();
  ctx.moveTo(basex,basey-gh);
  ctx.lineTo(basex,basey);
  ctx.lineTo(basex+gw,basey);
  ctx.strokeStyle ="#666666";
  ctx.stroke();
  // 文字フォントを定義
  ctx.font = "12px 'MS ゴシック'";
  // グラフを描画
  for(var i=0; i<heads.length; i++){
    // グラフの値
    var v = values[i];
    // 棒の中心のx座標
    var x = basex + (gw/heads.length) * i + ((gw/heads.length)/2);
    // 棒の幅を定義
    var barw = (gw/heads.length) * 0.7;
    // 棒の高さを算出
    var barh = gh * 0.9 * (v/max);
    // 棒を描画
    ctx.fillStyle = "green";
    ctx.fillRect(x-barw/2,basey-barh,barw,barh);
    // fillText()メソッドの実装を評価
    if(!ctx.fillText){ continue }
    // 目盛と値の表示幅の許容値
    var tw = (gw/heads.length) * 0.9;
    // テキストの座標の基準を中心にセット
    ctx.textAlign = "center";
    // x軸の目盛を描画
    ctx.textBaseline = "top";
    ctx.fillStyle = "black";
    ctx.fillText(heads[i],x,basey+3,tw);
    // 値を描画
    ctx.textBaseline = "ideographic";
    ctx.fillStyle = "black";
    ctx.fillText(v,x,basey-barh-3,tw);
  }
}