Railsアプリケーションにレーダーチャート表示を追加してみました。
チャート表示するだけでUXが格段に上がりますね！！
既に作成済みの診断アプリケーションに実装していきます。
9問の質問に回答した診断結果をレーダーチャートにして表示します。
■前提条件
【使用技術】
- Ruby 3.1.4
- Ruby on Rails 7.2.2.1
■ 完成形
■ 使用したライブラリ
- Chrat.js
■ 実装手順
① Chart.jsをインストール
ターミナルで使用しているパッケージマネージャーに合わせて、以下のコマンドを実行します。
【Yarnを使用している場合】
yarn add chart.js
【npmを使用している場合】
npm install chart.js
② Chart.jsを使えるように設定する
今回は少しでも軽量化するために必要なもののみプラグインしました。
（軽量化をしなくてもよい場合は細かく設定せずに'chart.js'をそのままimportしてください）
📝importとregisterの役割の違い
・import：Chart.jsのライブラリの中から必要な機能を読み込む役割
・register：Chart.jsから読み込んだ機能を使えるようにする役割
import {
Chart,
RadarController,
LineElement,
PointElement,
RadialLinearScale,
Filler
} from 'chart.js'
Chart.register(
RadarController,
LineElement,
PointElement,
RadialLinearScale,
Filler
)
| 名前 | 役割 |
|---|---|
| RadarController | レーダーチャートそのものを描画する役割 |
| LineElement | 各点を線で結ぶ役割 |
| PointElement | 各項目の点部分を描写する役割 |
| RadialLinearScale | レーダーチャートの目盛りを描写する役割 |
| Filler | レーダーチャート内を塗りつぶしする役割 |
詳しくは公式ドキュメントを参照してください。
https://www.chartjs.org/docs/latest/charts/radar.html
③ HTMLにレーダーチャート描写部分を用意する
【やること】
- Canvasタグで表示部分を準備
- JS側にDOM操作するためのIDを渡す
- JS側にレーダーチャートで表示するための値を渡す
<!-- レーダーチャート表示 -->
<canvas id="result_chart" data-body-score="<%= @diagnosis_record.body_score %>"
data-mind-score="<%= @diagnosis_record.mind_score %>"
data-emotion-score="<%= @diagnosis_record.emotion_score %>">
</canvas>
①canvasタグ準備
・canvasタグ：Webページ上でグラフィックやアニメーションをプログラムで描画するための機能
②JS側でDOM操作するためIDを設定
id="result_chart"
③レーダーチャートで表示したい値をJSに渡すために変数を定義
私のアプリケーションでは、診断結果を
①身体の疲労（data-body-score）
②脳の疲労（data-mind-score）
③心の疲労（data-emotion-score）
の3つのカテゴリに分けてスコアを集計しているので、3つ変数を定義します。
data-body-score="<%= @diagnosis_record.body_score %>"
data-mind-score="<%= @diagnosis_record.mind_score %>"
data-emotion-score="<%= @diagnosis_record.emotion_score %>">
これで
- Canvasタグで表示部分を準備
- JS側にDOM操作するためのIDを渡す
-
JS側にレーダーチャートで表示するための値を渡す
3つが完了しました。
④ JSでレーダーチャートを描写
【やること】
- HTMLで指定したIDを受け取る
- HTMLで定義したデータを渡すための変数を受け取る
- データセットを作成
- ラベルを表示
- 細かな設定を行う
- レーダーチャートを描写する
①HTMLで指定したIDを受け取り、定数を宣言します
const resultChart = document.getElementById("result_chart");
🌟document.getElementById：指定したIDのタグを取得するメソッド
②HTML定義したデータを渡すための変数を受け取り、定数を宣言します。
const bodyScore = Number(resultChart.dataset.bodyScore);
const mindScore = Number(resultChart.dataset.mindScore);
const emotionScore = Number(resultChart.dataset.emotionScore);
🌟Number：文字列を数値に変換して保存する
🌟resultChart.dataset：resultChart（result_chart）のdata-○○を取得する
③④データセット作成 / ラベル表示
・dataに先ほど宣言した定数を渡しています
・fillで塗りつぶしをTrueにしています
（カラー指定内容）
・backgroundColor：レーダーチャート内部の塗りつぶしのカラー
・borderColor：線のカラー
・pointBackgroundColor：点のカラー
・pointHoverBorderColor：ホバー（マウスを載せた時）の点のカラー
const data = {
labels: [
"身体の疲労",
"脳の疲労",
"心の疲労",
],
datasets: [
{
data: [bodyScore, mindScore, emotionScore],
fill: true,
backgroundColor: 'rgba(255, 99, 132, 0.2)',
borderColor: 'rgb(255, 99, 132)',
pointBackgroundColor: 'rgb(255, 99, 132)',
pointHoverBorderColor: 'rgb(255, 99, 132)'
}
]
};
⑤その他設定を行う
// 設定
const config = {
// レーダーチャートを選択
type: "radar",
// 先ほど宣言したdataを渡す
data: data,
options: {
elements: {
// 線の太さを2に設定
line: {
borderWidth: 2,
},
// 点のサイズを3に設定
point: {
radius: 3,
}
},
// グラフの軸の設定
scales: {
r: {
// メモリを0から開始する
beginAtZero: true,
// メモリの最大値を12に設定する
max: 12,
ticks: {
// メモリの数字を2刻みで表示
stepSize: 2,
// メモリのフォントサイズを10に設定
font: {
size: 10
}
},
// ラベルのフォントサイズを12に設定
pointLabels: {
font: {
size: 12
}
}
}
},
plugins: {
legend: {
display: false
}
}
}
};
⑥レーダーチャートを表示する
・new Chart：Chartクラスからオブジェクトを作成する
・第一引数 resultChart：HTMLのどこに描写するか指定
・第二引数 config：先ほど記述したレーダーチャートの詳細内容を渡す
new Chart(resultChart, config);
【やること】
- HTMLで指定したIDを受け取る
- HTMLで定義したデータを渡すための変数を受け取る
- データセットを作成
- ラベルを表示
- 細かな設定を行う
- レーダーチャートを描写する
記述がすべて完了しました！！