体調グラフ機能で複数カラムを動的に表示する方法を調べる

アプリ制作

実現したいこと(1)

複数カラムを選択して同時に描画する.

activity, appetite, moodの３カラムのボタンを設置する. ３つのボタンはON/OFFにすることができ、ONの状態にあるカラムをまとめて表示したい。

試したこと

Rails Chart.js Dynamically change columnで調べると、Ajaxを使った方法が多く見られた。

Ajaxを使用したことがないので、学習方法をメンターに質問。(進捗報告も兼ねて)

実現したいこと(2)

Diaryのカラムごとに色分けをしてグラフを表示する

どのように実装するか

Chartjs-ror gem を導入し, グラフのUIをRailsで設定できるようにする。

# example
data = {
  labels: ["January", "February", "March", "April", "May", "June", "July"],
  datasets: [
    {
        label: "My First dataset",
        backgroundColor: "rgba(220,220,220,0.2)",
        borderColor: "rgba(220,220,220,1)",
        data: [65, 59, 80, 81, 56, 55, 40]
    },
    {
        label: "My Second dataset",
        backgroundColor: "rgba(151,187,205,0.2)",
        borderColor: "rgba(151,187,205,1)",
        data: [28, 48, 40, 19, 86, 27, 90]
    }
  ]
}
options = { ... }

<%= line_chart data, options %>

コードを読んでみる。

  • dataハッシュ
    • labelsキー: X軸の値 (Array)
    • datasetsキー:単独または複数の datasetハッシュ (Array)

  • datasetハッシュ (ある期間における1カラムのグラフを表す)

    • labelキー : legend name (String)
    • backgroundcolorキー: グラフの背景色, rgba (String)
    • bordercolorキー: グラフの枠線の色, rgba(String)
    • dataキー: Y軸の値(Array)

  • Viewでline_chartメソッドを呼び出し, 引数にdata, optionを代入する

  • Viewでline_chartメソッドを呼び出し, 引数にdata, optionを代入する

使用したい色

#51a370 rgb(81,162,112)  Green  Mood
#ffeb8a rgb(255,235,138) YELLOW Appetite
#e86c4e rgb(232,108,77)  Orange Activity

その他の作業

  • 期間やカラムの移動に関するリンクをテンプレート化し、app/views/layoutsへ置いた

プロを目指す人のためのRuby入門

  • 10章 Procとラムダ(2時間)