サクラマス・アメマスの釣果集計とグラフ表示(Chart.js)

2021(R3)/5/4 (火) PC・スマホ,海のルアー,釣り,アメマス,サクラマス,ブログ 0 comment

サクラチャート

註．この記事の内容は Chart.js のVer2系（当時）で組んでいたのを2024年5月に最新のVer4系に入れ替えたんで、記事中のコードは過去verになっていマス。

自分で決めたコロナ対応ポリシーとして、4月23日の釣行よりあとは、もし仮に（万全の対策をして）釣りに行ったとしても、このブログでの記事公開はしばらくしないことにした。
しょせん自分用の釣り日記だし、このご時世ですぐに公開しても誰にも何もいいことないし、ほとんど行かない（行けない）かもしれないし・・。
とゆーことで、釣りに行ったか行ってないかを含めて、しばらく釣行情報の発信なし！

・・そうは言っても、ブログ記事の毎月投稿が途切れるのは避けたい。
去年の今時期もコロナのせいで途切れそうになって、埋め合わせの記事を書いた。

釣りなしGWのあれこれ

釣り自粛要請が出始めた4/24以降、釣りはお休み状態。…110ヶ月連続投稿！が途切れるのもイヤだなぁ。… ...

https://gontaxx.sakura.ne.jp/blossom/2020/05/13/12756

今回のこの記事も同じく埋め合わせ、でも釣りにも関係する内容。

このブログ、釣りの経過をかなり細かく記載してるので、あとから記録を集計してみたらおもしろいかなと前々から考えてた。
すでにイカについては、種類別のキャッチ数を積み上げた記録をエクセルで付けている。
イカの次に、全キャッチがきっちり記事化されてるショアサクラマスの記録をまとめてみることにした。

まずはエクセルにデータを打ち込み。
【釣った日、時間帯、天気、ポイント、環境（砂浜とか）、河口付近、波の状況、体長、処置、ルアー、色・・】
この元データから体長分布のほか、年別、月別、あるいは釣り場方面別、ヒットルアーランキングなどの切り口でデータを抽出してみた。
エクセルでの作業はここまで。

せっかくだから結果を整理したのをブログで公開して、今後も新規データを追加して、定期的に更新する形まで持っていきたい。
グラフ表示もしたいけど、エクセルのグラフ貼るだけじゃあ芸がなさ過ぎる。
そこそこ見栄えがよくて、作成と更新の手間があんまり掛からない方法を検討・・。

・・以下、釣り人の方々にはどーでもいい内容が延々続くので、すぐに結果の方へどうぞ。
　★ 釣果分析 – サクラマス編
　 ★ 釣果分析 – アメマス編

グラフ表示にはワードプレスのプラグインもいくつかあった。
でもプラグインって結構寿命が短いことが多いし、できればもう増やしたくないし・・。
そこで、無償で汎用的に長く使えて融通も利きそうな「Chart.js」というライブラリを使うことにした。

Chart.js | Open source HTML5 Charts for your website

Simple, clean and engaging HTML5 based JavaScript charts. Chart.js is an easy way to include ani ...

https://www.chartjs.org/

グラフで取り扱うデータ数はそんなに多くないし、一度グラフを作ったら更新は年1回ぐらいでもいいし。
そうなると、データ入力と集計は今後もエクセルで、グラフに渡す集計データは手入力での更新が自分的にトータルコスト最小と判断。

で、色々試行錯誤してだいたい固まった結果を忘れないように整理しておく。

まずは Chart.js と、そのプラグインでグラフ内にラベル（値）を表示する chartjs-plugin-datalabels をロード。

<script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.4/dist/Chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@1"></script>

グラフ表示したいのはごく一部のページだけ、他ページの表示負荷にはしたくないので、該当の固定ページに直接書き込んだ。
私の場合、編集にはクラシックエディターのテキストエディターを使ってて、これだとスクリプトを直接書き込んでも問題ない。
編集中にビジュアルエディターに切り替えたりするとたぶんヤバい（ワードプレスに変に整形・破壊される？）し、ブロックエディター（現在移行の練習中）でもできるのかは試してないので不明（無責任）。

次に個別グラフを設置、以下ではサクラマスの結果の最初のグラフ（年別キャッチ数）で見ていく。
グラフの表示枠になる canvas は、レスポンシブ対応のために div で囲んでスタイル設定。
PCブラウザで表示サイズを色々変えたり、スマホで画面を縦横回転させたりした結果、height は 40vh（ブラウザ表示枠縦方向の40%）がちょうどよかった。
※2025.6現在、一部グラフは60vhに設定

<div class="chart-container" style="position: relative; width:100%; height:40vh;">
<canvas id="MasuChart_nen"></canvas>
</div>

そしてグラフの設定。
グラフの種類はここでは棒グラフ（bar）を選択、ほかに横棒グラフ（horizontalBar）とドーナツ（doughnut）も使った。
細かい設定はドキュメントの日本語翻訳版などを参考にさせていただいた。

<script>
Chart.plugins.register(ChartDataLabels);    //プラグインのver1以降のみ記載要（複数グラフでも最初だけでOK）
var ctx = document.getElementById('MasuChart_nen').getContext('2d');
var myChart = new Chart(ctx, {
  type: 'bar',    //グラフの種類=縦棒グラフ
  data: {
    labels: ['2011','2012','2013','2014','2015','2016','2017','2018','2019','2020','2021'],    //横軸ラベル=年
    datasets:[{
      label: 'キャッチ数',    //データラベル
      data: [1,3,1,4,2,3,3,2,5,7,8],    //データ=年別キャッチ数
      borderColor: 'rgba(200,50,200,0.6)',    //棒グラフ要素の外枠線の色（なしでもOK）
      backgroundColor: 'rgba(222,50,222,0.5)',    //棒グラフ要素の色、透明度
      barPercentage: 0.8    // 棒グラフ要素の太さ
    }]
  },
  options: {
    maintainAspectRatio: false,    //レスポンシブ対応用の設定
    legend: {    //凡例設定
      display: false    //凡例を表示しない
    },
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true,    //Y軸をゼロから始める
          fontSize: 14
        }
      }],
      xAxes: [{
        ticks: {
          fontSize: 16
        }
      }]
    },
    plugins: {
      datalabels: {    //グラフ上のデータラベルの設定
        color: '#000',
        font: {
          weight: 'bold',
          size: 20
        }
      }
    }
  }
});
</script>

グラフを設定してサクラデータを入れるとこうなった。

棒グラフ

まぁまぁいい感じのグラフができたかな。
他の種類のグラフも使用、まず横棒グラフは「ヒットルアーランキング」で使用、設定は縦棒グラフと基本的に同じなので割愛。

ドーナツ型グラフ（円グラフ）は各要素の全体に対する比率が直感的に分かりやすい。
ただ、データラベルをグラフ上に表示する関係で、割合の小さい要素が多いとラベルが重なって見にくくなる。
そこは適宜、棒グラフと使い分けた。

以下ドーナツ型「月別キャッチ割合」のコード。
canvas の幅、配置は表示のバランスを見て微調整した。

<div class="chart-container" style="position: relative; width: 90%; height: 40vh;">
<canvas id="MasuChart_tsukiPie" style="padding-left: 16px;"></canvas>
</div>

type は doughnut を指定、ここを pie にすれば、ドーナツの穴がふさがって円グラフになる。
ドーナツかパイか、好みで選んでオッケー。

<script>
Chart.plugins.register(ChartDataLabels);    //プラグインのver1以降のみ記載要（複数グラフでも最初だけでOK）
var ctx = document.getElementById('MasuChart_tsukiPie').getContext('2d');
var myChart = new Chart(ctx, {
  type: 'doughnut',    //グラフの種類=ドーナツ
  data: {
    labels: ['3月','4月','5月','6月'],    //要素ラベル=月
    datasets:[{
      label: 'キャッチ割合(％)',    //データラベル
      data: [5.1,51.3,30.8,12.8],    //データ=月別キャッチ割合(％値)
      backgroundColor: [    //各要素の色設定
        'rgb(255, 99, 132)',
        'rgb(54, 162, 235)',
        'rgb(255, 205, 86)',
        'rgb(86, 235, 86)'    //要素の数に合わせて別の色を設定
      ]
    }]
  },
  options: {
    maintainAspectRatio: false,    //レスポンシブ対応用の設定
    legend: {    //凡例設定
      display: false    //凡例を表示しない
    },
    plugins: {
      datalabels: {    //グラフ上のデータラベルの設定
        color: '#000',
        font: {
          weight: 'bold',
          size: 20
        },
        formatter: function(value, ctx) {    //ラベル値に%を付加
          let label = ctx.chart.data.labels[ctx.dataIndex];
          return label + '\n' + value + '%';
        }
      }
    }
  }
});
</script>

できたドーナツはこれ。