[Chart.js]セッションストレージを用いて、ボタンクリックでグラフ種類を切り替える方法

はじめに

Chart.jsを用いてグラフを作成する機会がありましたので、備忘録がてら記載します。
初投稿になるため、見苦しい部分が多々あると思います。
何卒よろしくお願いします。
※4/19追記　コメントにてご指摘がございましたので、一部編集いたしました。
コメント頂いた方、ありがとうございます。

使用するライブラリ

• Chart.js

目次

1. ボタンの設置
2. ボタンクリックによるイベント実行
3. セッションストレージを使う理由
4. 実際に完成したもの
5. 参考文献

ボタンの設置

html上に切り替えに使用するボタンを配置
この際、idにグラフ種類をつけておく
※line=折れ線グラフ、bar=棒グラフ、pie=円グラフ

<button id="line" onclick=tpchange(this.id) >折れ線</button>
<button id="bar" onclick=tpchange(this.id) >棒</button>
<button id="pie" onclick=tpchange(this.id) >円</button>

ボタンクリックによるイベント実行

まず、グラフ種類の初期値を最初に決めておかないと上手く表示されません

var Change_G_type = sessionStorage.getItem('gtype') ?? 'line';

そして、onClickで実行 クリックしたボタンのidをセッション変数に格納して取得。

function tpchange(clicked_id) {
  window.sessionStorage.setItem('gtype',clicked_id);
    var Change_G_type = window.sessionStorage.getItem('gtype');

セッションストレージを使う理由

実際、そのままid取ってきて変更すれば良くね？と思うかもしれませんがこれだと動的に数値とかを変えてグラフを更新する際、
毎回グラフの種類がリセットされてしまいます。
グラフを更新しないよ！って人はそのままidから取ってきても大丈夫です。

実際に完成したもの

See the Pen eYgKzgm by NNNN (@NoNameNewNoise) on CodePen.

後、グラフ種類を切り替える際にキャンバスを一旦リセットしないと前のグラフが残ってチラチラ映ります。 なので種類を切り替える度にキャンバスを綺麗にしておきましょう

    try {
        myChart.destroy();//キャンバスをリセット
    }
    catch {
      //万が一イベント実行時にグラフが存在しなかった場合
    }

質問等ございましたら気軽にどうぞ

参考文献

• Chart.js · Chart.js 日本語ドキュメント