railsでグラフ表示を行うための手引き

近況

　テックキャンプに通って早二ヶ月，コロナの影響で自宅学習になって三週間目となりました。最終課題はと言いますとインフラのメインに携わりながらフロント，サーバーサイドに取り組んできた感じです。最終課題における私のダメなところとしては，サーバーサイドの修羅場をくぐり抜けてきた他のメンバーよりもメソッドなりGEMなりの知識が少なく，サーバーサイドの貢献度が低いことです。ここはメンバーに手法を聞きつつ理解したり，個人アプリで反映させて覚えていこうと思います。逆に自分が行なった部分はもちろんある程度詳しくなったので，Qiitaの記事なり活用して残せたらと。今回の内容は課題と全く関係ないけどね！！！

本題

　私はサーバーサイドの学習教材としてrailsを用い，個人アプリでもお世話になるのですが，ある時このような疑問にかられました。『図示ってどうするんだろう』

結論からいうと，JSのライブラリchart.js（オープンソース）を組み合わせるのが一番手軽みたい。ここでは実際に個人アプリに実装するレーダーチャートを元にデータベースで登録した数値を呼び出して表示するところを連ねていきます。そして参考にした記事に他のグラフの作成方法を記載したので，ぜひ参考にしてください！

環境

rails 5.2.3
ruby 2.5.1

手順

　1. chart.js読み込み
　　方法としてはjQuery同様，gemを読み込む方法とwebから引っ張ってくる方法があります。
　2. アプリケーション立ち上げ
　3. canvasの必要情報の編集
　
　大まかにこんな感じです。

1. chart.js読み込み
gemであれば'chart-js-rails'をgemfileに記述しbundle install そのあと，application.jsで使用を許可する。
引っ張ってくる方法は，下に記載しているchart.jsの公式からgithubに飛んでもらって，
ReadMeファイル，Documentationのgetting startにあるurlを読み込んでください。

以降はほぼ同じだと思います。

2. アプリケーション立ち上げ

 $ rails new
 $ rails db:create
 $ rails db:migrate

と適当に立ち上げて，root_pathを指定。記述形式は参考にしたものを参考に

index.html.erb

  <body>
    <h1>レーダーチャート</h1>
    <canvas id="myRaderChart"></canvas>　//ここにグラフが表示
    <!-- CDN -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.js"></script>　//引用したurl
    <link rel="stylesheet" href="style.css">
    <script>
      // id読み込み
      var ctx = document.getElementById("myRaderChart"); 
      // ctx に埋め込むグラフを定義していきます。
      var myRadarChart = new Chart(ctx, {
　　　 // 型の指定
          type: 'radar', 
        
    data: { 
　　　　　　　// 項目の指定 ここを増やすと５角形とかにもなる
            labels: ["個性", "香り", "味"],
            datasets: [{
                label: 'name',
　　　　　　　// dataは項目に対応するバリュー，その下はグラフのcss
                data: [3, 4, 3, ],
                backgroundColor: 'RGBA(225,95,150, 0.5)',
                borderColor: 'RGBA(225,95,150, 1)',
                borderWidth: 1,
                pointBackgroundColor: 'RGB(46,106,177)'
            }]
          },
          options: {
            title: {
                display: true,
            // グラフのタイトル
                text: '評価'
            },
            // グラフの最大値，メモリの刻み方を調整
            scale:{
                ticks:{
                    suggestedMin: 0,
                    suggestedMax: 5,
                    stepSize: 1,
                    callback: function(value, index, values){
                        return  value 
                    }
                }
            }
        }
    });
    </script>       
</body>
</html>

決まっている値を表示する場合はこんな感じ。もし，DBから数値を呼び込む場合は少し記述が変わります。↓↓↓

DB情報を読み込んだグラフ表示

やること自体はあまり変わらないです（筆者はここの実装で沼にハマりましたw）。
例えば，上の画像の”個性”をDBから呼び出すとします。

設定は　postsテーブルに　individualityのカラムがあるとします。そこからshowページに呼び出す感じで。
ルーティングは割愛します。

posts_controller.rb

def show
  @post = Post.find(params[:id])
  @individuality = @post.individuality 
end

グラフに入れたい値は個別でインスタンスを作成しないと読み込んでくれないようです。
あとはjsのなかで

individuality = <% @individuality %>
~省略~
data: [individuality, 4, 3 ]

としてあげれば反映されます。individuality綴り長い！笑

今回は説明が楽なのでhtmlで完結させましたが，実際は冗長なファイルになるのでjsファイルと分けた方がいいかも。これを読んだあなたの，個人アプリでのデータ表示のスパイスになれば。最後に私の個人アプリのshowページを

なぜコントローラーでインスタンス作成しないと動かないかわかる方，ほかにもっといい方法あるよって方，ぜひ共有お願いします。

参考（２つの記事は2020/4/14現在しっかり動きます。）

↓gemをどうぬーして作成したい方
https://qiita.com/4EAE_Learner/items/d3a97f1115f5658b4e47
↓他のグラフ作成したい方
https://qiita.com/Haruka-Ogawa/items/59facd24f2a8bdb6d369
↓公式
https://www.chartjs.org/