📊Chart.jsを使ってコラボフローにグラフを表示してみたkony・2023/04/27に公開ツイートChart.js#コラボフローtechはじめにこんにちは。急に暑くなったり寒くなったりでなかなか体がついていかないkonyです😇さて今回は、申請書にグラフを表示できたら視覚的にわかりやすくなっていいんじゃないか!と思ってコラボフローで実際にやってみたのでご紹介します。コラボフローって何?って方はこちらをご参照ください!利用したライブラリ今回グラフを表示するため、Chart.jsというライブラリを利用しました。Chart.jsはJavaScriptでグラフを描画するためのライブラリで、データを用意すれば棒グラフや折れ線グラフなど様々のグラフを描画できます。月別の販売個数をグラフで表示してみようと思いますので、以下のように月毎の販売数を入力できるフォームを作成します。パーツ名を非表示にしているため画面上わかりませんが、グラフを表示する領域として、ラベルパーツを配置しています。※ピンクの背景色部分です。ラベルパーツでは、HTMLを記述することができますので、以下のようにcanvasタグを埋め込んでおきます。カスタマイズコード続いてグラフを表示するカスタマイズコードを作成します。申請書を表示した時と月毎の値が入力された際にグラフを描画するための関数に値を渡して、その値を基にChart.jsのインスタンスを生成してグラフを表示しています。}})();嵌ったポイント今回各項目に値が入力される度にグラフへ反映したかったので、都度グラフのインスタンスを生成するようにしていたのですが、何故かエラーになって少し嵌りました。公式ドキュメントに記載があり、グラフを再利用する場合は一度インスタンスを破棄するか、更新用のメソッドを使って再レンダリングする必要がありました。※公式ドキュメントはきちんと読むべし。今回はグローバル変数にインスタンスを生成し、インスタンスが存在する場合は更新するようにしました。最後にフォーム設定からカスタマイズ設定をおこないます。Chart.jsはCDNから読み込むようにしますので、CDNのURLと先ほど作成したカスタマイズコードをアップロードします。株式会社コラボスタイルは、『ワークスタイルの未来を切り拓く』を理念に掲げ、ワークスタイルのちいさなチャレンジがライフスタイルをより良くすると考えております。働く人と働く場所の未来を作っていく会社です。社内のワークフローを整備することで、働く人の業務ストレスを軽減しみんなが働きやすい環境を実現するため、ソフトウエアエンジニアを募集しています。DevelopersPublication私達は『ワークスタイルの未来を切り拓く』という理念のもとワークフローの本質を追求し、新しいワークスタイルを提案するとともに、コラボスタイルが率先して時代に適したワークスタイルを常にバージョンアップし発信していきます。動かしてみたまとめZennエンジニアのための情報共有コミュニティAboutZennについて運営会社お知らせ・リリースGuides使い方Publicationよくある質問LinksTwitterGitHubメディアキットLegal利用規約プライバシーポリシ。