【javascript】Chart.js使用で、レビューサイトのようなグラフを表示するページを作ってみる(レーダーチャート)

今回は、かつて取引先に提案したけど(発注ありませんでした笑)、アイデアをご紹介します。内容はjavascriptライブラリでグラフをサクッと作るというもの。レビューサイトのようなページを作る時にも使えそうです。早速内容を確認していきましょう。

Chart.jsとは？公式ドキュメントは？

html5 canvas要素を使って、グラフをかけるようになるライブラリです。レスポンシブ対応や、いろいろなデザイン変更などのパラメータも渡せます。

グラフのタイプも複数対応しており、Bar Charts（棒グラフタイプ）、Line Charts（線グラフタイプ）、Doughnut（円グラフタイプ）などがあります。

Chart.js公式ドキュメント
https://www.chartjs.org

日本語版非公式翻訳
https://misc.0o0o.org/chartjs-doc-ja/

Chart.js　レーダーチャートを表示するページのスクリプト・ポイント

まずChart.jsをCDNで読み込みます。スクリプトバージョンはv4.4.3で、２や３のときとオプションパラメータの書き方が変更になっている様子。canvas部分にはidを『ctmr_00001』のように指定しました。getElementByIdで取っておきます。

あとはnew Chart内の項目で設定していきます。レーダーチャートを使いたいのでtype：radarに。data内のlabelsが項目名で、datasets内のdataが、表示するスコアです。borderWidth（線の太さ）、backgroundColor（塗りつぶし部分背景色）、borderColor（線の色）など、デザインに関する設定もできました。

そのほかoptionsでは、レスポンシブ・項目の最大/最小値・アスペクト比などの設定をしました。 レーダーチャート公式ドキュメントについては以下をご覧ください。

Chart.js　レーダーチャート(公式ドキュメント)
https://www.chartjs.org/docs/latest/charts/radar.html

表示例（ゲームのレビューサイト的な表示）

では、さっそくブラウザで見てみましょう。twitterに、以前steamでプレイしたロマサガのスクリーンショットが残ってたので、適当につけました。 右側のグラフが、Chart.jsで出力した部分。あとはコメント文章をきちんと書けば、ゲームのレビューサイトとしてもそれっぽい感じになりそうですね。

なお、今回の動作サンプルは以下のurlで見ることができます。

chart.jsてすと
https://division-web.atelier-ss-agency.com/test/2024-08chart.html

あとがき・まとめ

まとめると、こんなところでしょうか。ajaxでjsonデータ取ってきてセットとか、サーバーサイドでデータベースから取ってきたデータをセットのような感じで使えそうです。