Chart.jsを使ってコラボフローにグラフを表示してみた

はじめに

こんにちは。
急に暑くなったり寒くなったりでなかなか体がついていかないkonyです😇

さて今回は、申請書にグラフを表示できたら視覚的にわかりやすくなっていいんじゃないか！と思ってコラボフローで実際にやってみたのでご紹介します。

コラボフローって何？って方はこちらをご参照ください！

利用したライブラリ

今回グラフを表示するため、Chart.jsというライブラリを利用しました。
Chart.jsはJavaScriptでグラフを描画するためのライブラリで、データを用意すれば棒グラフや折れ線グラフなど様々のグラフを描画できます。

フォームの作成

月別の販売個数をグラフで表示してみようと思いますので、以下のように月毎の販売数を入力できるフォームを作成します。

パーツ名を非表示にしているため画面上わかりませんが、グラフを表示する領域として、ラベルパーツを配置しています。※ピンクの背景色部分です。

ラベルパーツでは、HTMLを記述することができますので、以下のようにcanvasタグを埋め込んでおきます。

JavaScript カスタマイズコード

続いてグラフを表示するカスタマイズコードを作成します。

申請書を表示した時と月毎の値が入力された際にグラフを描画するための関数に値を渡して、その値を基にChart.jsのインスタンスを生成してグラフを表示しています。

(function () {
  "use strict";

  const graphShowEvents = [
    "request.input.show",
    "request.confirm.show",
    "request.detail.show",
    "request.judgement.show",
    "request.input.fidJanuary.change",
    "request.input.fidFebruary.change",
    "request.input.fidMarch.change",
    "request.input.fidApril.change",
    "request.input.fidMay.change",
    "request.input.fidJune.change",
  ];

  collaboflow.events.on(graphShowEvents, function (e) {
    const partsData = e.parts;

    renderGraph(
      [
        partsData["fidJanuary"].value,
        partsData["fidFebruary"].value,
        partsData["fidMarch"].value,
        partsData["fidApril"].value,
        partsData["fidMay"].value,
        partsData["fidJune"].value,
      ]
    );
  });

  function renderGraph(salesVolume) {
    const ctx = document.getElementById("myChart").getContext("2d");

    // グラフを更新
    if (window.salesChart) {
      window.salesChart.data.datasets[0].data = salesVolume;
      window.salesChart.update();
      return;
    }

    // グラフのインスタンスを生成
    window.salesChart = new Chart(ctx, {
      type: "bar",
      data: {
        labels: ["1月", "2月", "3月", "4月", "5月", "6月"],
        datasets: [
          {
            label: "販売数量",
            hoverBackgroundColor: "rgba(255, 100, 100, 0.2)",
            data: salesVolume,
          }
        ]
      },
      options: {
        plugins: {
          title: {
            display: true,
            text: "月別販売数量"
          }
        },
        scales: {
          y: {
            suggestedMin: 0,
            suggestedMax: 1000,
            ticks: {
              stepSize: 100,
            }
          }
        }
      }
    });
  }
})();

嵌ったポイント

今回各項目に値が入力される度にグラフへ反映したかったので、都度グラフのインスタンスを生成するようにしていたのですが、何故かエラーになって少し嵌りました。。。

公式ドキュメントに記載があり、グラフを再利用する場合は一度インスタンスを破棄するか、更新用のメソッドを使って再レンダリングする必要がありました。
※公式ドキュメントはきちんと読むべし。。。😅

今回はグローバル変数にインスタンスを生成し、インスタンスが存在する場合は更新するようにしました。

    // グラフを更新
    if (window.salesChart) {
      window.salesChart.data.datasets[0].data = salesVolume;
      window.salesChart.update();
      return;
    }

カスタマイズ設定

最後にフォーム設定からカスタマイズ設定をおこないます。

Chart.jsはCDNから読み込むようにしますので、CDNのURLと先ほど作成したカスタマイズコードをアップロードします。

動かしてみた

実際に動かしてみたものがこちらです！

まとめ

Chart.jsは見た目もきれいで描画の動作もスムーズでした！
そして何より簡単に実装できました✨

昨年のデータを引っ張ってきて前年比較のグラフを表示したり、円グラフにして商品ごとの売上の割合を表示するなど、工夫次第で色々できそうです！

他にも色んなグラフやオプションがあるようなので、是非お試しください！