PHP+MySQLで家計簿システム開発#27【chart.jsで月別金額推移グラフを実装 後編】

<div class="bar-graph" id="barGraph">
  <canvas id="canvas"></canvas>
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js@3.7.1"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.0.0"></script>

<?php
//月配列
$month_list = ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12'];

//データを入れる多次元配列の用意
$data = array();

//1月~12月まですべて0円の初期多次元配列データを生成
//初期化データを用意しないと、データのない月が抽出されずグラフに0円と表示されないため
for ($i = 0; $i < count($month_list); $i++) :
  $data[] = [
    'year_month' => $year . '-' .  $month_list[$i],
    'amount' => '0'
  ];
endfor;

//LEFT(date, 7) as monthでdateカラムの頭から7文字分「YYYY-mm」を切り出した値とamountカラムの合計値を抽出
//・user_idが一致する
//・渡ってきたテーブル情報と同名のrecordsテーブル内カラムが渡ってきた項目idと一致する
//・dateカラムが渡ってきた年の文字列を含む
//上記3点を条件に置く
$sql = "SELECT LEFT(date, 7) as month, SUM(amount)
FROM records
WHERE user_id=? AND {$item_table}=? AND date LIKE ?
//テーブル名と同名のrecordsカラムと年月カラムでグループ化
GROUP BY {$item_table}, month
ORDER BY month ASC";
$stmt = $db->prepare($sql);
$year_param = $year . '%'; //WHERE date LIKE ?の?に入れるワイルドカードを含む文字列生成
$stmt->bind_param('iis', $user_id, $item, $year_param);
$stmt->execute();
$stmt->bind_result($month, $sum);
while ($stmt->fetch()) :
  //データを入れている初期多次元配列から年月「YYYY-mm」が一致する配列番号を取得
  $key = array_search($month, array_column($data, 'year_month'));
  //上記で取得した$data[番目]のkeym名:amountの値を抽出したデータに書き換え
  $data[$key]['amount'] = $sum;
endwhile;

//JSON形式にする配列を用意
$year_month = [];
$sum = [];

//連想配列をfor文で回し、それぞれの配列にセットする
for ($i = 0; $i < count($month_list); $i++) :
  //「YYYY-mm」形式を「YYYY年mm月」形式に変換して配列に追加
  $year_month[] = str_replace('-', '年', $data[$i]['year_month']) . '月';
  //合計金額を配列に追加
  $sum[] = $data[$i]['amount'];
endfor;

//JSONに変換
$json_year_month = json_encode($year_month);
$json_amount = json_encode($sum);
?>

  const canvas = document.getElementById('canvas'); //グラフを描画するcanvasを取得

  window.onload = function() { //画面が読み込まれたら

    //棒グラフを描画
    new Chart(canvas.getContext('2d'), {
      type: 'bar', //グラフのタイプ、bar -> 棒グラフ
      data: {
        labels: <?php echo $json_year_month; ?>, //X軸のラベル、PHPで抽出した年月配列をセット
        datasets: [{
          data: <?php echo $json_amount; ?>, //棒グラフにするデータ、PHPで抽出した金額配列をセット
          backgroundColor: ['#28a7e0'], //棒グラフの色
          datalabels: { //金額データラベル設定
            color: '#28a7e0', //文字色
            font: { //フォント設定
              size: '11px',
              weight: 'bold'
            },
            anchor: 'end', // 金額データラベルの位置（'end' は上端）
            align: 'end', // 金額データラベルの位置('end'は上記アンカーポイントの後ろ)
            formatter: function(value, context) { // 金額データラベルを「,」で区切り「円」を付け足す
              return value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',') + ' 円'; 
            },
          },
        }],
      },

      plugins: [ChartDataLabels], //データラベルのプラグインを読み込む

      options: {
        responsive: false, //レスポンシブOFF
        scales: {
          y: { //y軸の設定
            ticks: {
              callback: function(tick) { //y軸ラベルを「,」で区切り「円」を付け足す
                return tick.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',') + ' 円';
              },
            }
          },
        },
        plugins: {
          legend: { //グラフの凡例OFF
            display: false,
          },
          tooltip: { //ツールチップOFF
            enabled: false,
          },
        },
      },
    })
  }

//canvasの高さと幅指定
const containerWidth = document.getElementById('barGraph').clientWidth; //canvasを囲っているdiv要素の幅を取得
if (window.outerWidth < 600) { //画面幅が600px未満のとき
  canvas.style.width = '850px'; //canvasの幅を850pxに
} else { //それ以外（PCのとき）
  canvas.style.width = containerWidth + 'px'; //取得したdiv要素の幅と同値を幅に設定
}
canvas.style.height = '400px'; //canvasの高さは400pxで固定

//y軸目盛の間隔と最大値計算処理
const aryMax = (a, b) => { //配列の頭から二つずつ比較して最大値を返す関数
  return Math.max(a, b);
}
//金額配列に対して上記関数を実行し最大値を格納
const maxVal = <?php echo $json_amount; ?>.reduce(aryMax);
//y軸目盛間隔、最大値切り上げのための割る数、y軸の最大値変数定義
let stepVal, roundVal, ymax;
//最大値によってy軸目盛間隔、最大値切り上げのための割る数を設定
if (maxVal < 1000) { //0-999円
  stepVal = 100;
  roundVal = 100; //100で割る
} else if (maxVal < 10000) { //1,000-9,999円
  stepVal = 1000;
  roundVal = 1000; //1000で割る 
} else if (maxVal < 50000) { //10,000-49,999円
  stepVal = 5000;
  roundVal = 5000; //5000で割る
} else if (maxVal < 100000) { //50,000-99,999円
  stepVal = 10000;
  roundVal = 10000; //10000で割る
} else { //100,000円以上
  stepVal = 100000;
  roundVal = 100000; //10000で割る
}
//金額の最大値によってy軸の最大値を設定
//一度最大金額を切り上げたい桁数が小数点以下になるように割ってから切り上げ→割った数をかけて桁数を戻す
let ymax = Math.ceil(maxVal / roundVal) * roundVal;
if (maxVal === 0) { //0円のとき
  ymax = 1000; //強制的にy軸の最大値は1000に設定
} else if (maxVal == ymax) { //金額最大値とy軸最大値が同じ場合
  ymax = ymax + stepVal; //y軸最大値に目盛間隔分を足す
}

y: {
   max: ymax, //追加
   ticks: {
    stepSize: stepVal, //追加
    callback: function(tick) {
      return tick.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',') + ' 円';
    },
  }
},

<canvas id="canvas"></canvas>
<span><i class="fa-regular fa-hand-pointer"></i></span> <!--追加-->

//コメントアウト部分
&::before {
  @include m.mq(sp) {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 850px;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 0;
    animation: fade-out 3s;
  }
}
&::after {
  @include m.mq(sp) {
    content: "スクロールして見られます";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: 1.6rem;
    font-weight: bold;
    text-align: center;
    opacity: 0;
    animation: fade-out 3s;
  }
}
span {
  display: none;
  position: absolute;
  top: 60%;
  left: 70%;
  animation: scroll-finger 3s;
  opacity: 0;
  z-index: 10;
  @include m.mq(sp) {
    display: block;
  }
  i {
    color: #fff;
    font-size: 3rem;
  }
}