今回やったこと

すでにx軸が日付、Y軸がカロリーの棒グラフは作ってあり、そこにY軸に体重の折れ線グラフを追加していきます。

グラフ実装前の下準備

体重入力フォームを追加

.weight
  体重
  = f.number_field :weight, step: '0.1', placeholder: '例）70'
  kg

体重を保存するためのカラムを追加

https://qiita.com/azusanakano/items/a2847e4e582b9a627e3a#%E3%82%AB%E3%83%A9%E3%83%A0%E8%BF%BD%E5%8A%A0
この記事参考にすればすぐできます。

ストロングパラメーターにも体重カラムを追加

posts_controller.rb

private
  def post_params
    params.require(:post).permit(:food, :calorie, :protein, :fat, :carbo, :text, :image, :weight).merge(user_id: current_user.id)
  end

体重を表示

_post.html.haml

.weight
- if post.weight.present?
  = post.weight
  kg

実際のページ（表示されるとこうなる）

いよいよグラフに体重を追加していく!!

さて、ここからグラフにどうやってこの追加した体重を載せていくか？

現状のグラフはどうなっているかというと、こんな感じ。

現状ではヨコに体重、タテにカロリーだけ。
ここにタテに体重の折れ線グラフも追加して、カロリーと体重の相関を見れるようにしたい。

↓
わりとすぐに参考記事が見つかって意外と1時間でできました。

完成コードはこちら

app/controllers/charts_controller.rb

class ChartsController < ApplicationController

  def index
    # カロリー
    # 日付ごとで分けてカロリー合計を算出
    sum_calorie = current_user.posts.group("date(created_at)").sum(:calorie)
    # 日付ごとのカロリー合計がハッシュの形なので値を取得して配列に入れて変数に代入
    array_calorie = sum_calorie.values

    # gonを使ってデータをjs側に渡す
    gon.data = []
    # mapメソッドで日付ごとのカロリー合計を1つずつ取り出す
    # mapメソッドの使い方 → 配列変数.map {|変数名| 具体的な処理 }
    gon.data = array_calorie.map{ |calorie| calorie}

    # 日付ごとにまとめてそのうちcreated_atカラムだけ取得。配列の形で格納されている
    dates_calorie = current_user.posts.group("date(created_at)").select(:created_at)

    gon.date = []
    @dates = dates_calorie.map{ |dates| dates.created_at}
    # each文で日付の表記を1つずつ取り出して変える
    @dates.each do |a|
      gon.date << a.strftime("%Y年%m月%d日")
    end


    # 体重 ☆今回この部分を追加しました☆
    gon.weight = current_user.posts.group("date(created_at)").select(:weight).map{ |weight| weight[:weight]}
  end
end

app/view/charts/index.html.erb

<%# canvasタグ内にグラフを描く  %>
<div class="chart-container" style="position: relative; height:50vh; width:50vw">
    <canvas id="myChart"width="400" height="400"></canvas>
</div>

<%# htmlのscriptタグ内にjsを書いていく %>
<script>
# グラフ部分のDOMを取得しgetContextメソッドでグラフを描く
var ctx = document.getElementById("myChart").getContext('2d');

var myChart = new Chart(ctx, {
    
    type: 'bar',
    data: {
        # labelsでX軸を指定
        labels: gon.date,
        datasets: [{
            type: 'bar', # カロリーは棒グラフ
            label: "1日のカロリー合計",
            # dataでY軸を指定
            data: gon.data,
            backgroundColor: 'rgba(75, 192, 192, 0.2)',
            borderColor: 'rgba(75, 192, 192, 1)',
            borderWidth: 1,
            fill: false
        },
    #今回はこの部分を追加しました----------------------------
        {
            type: 'line', #体重は折れ線グラフ
            label: "体重",
            # dataでY軸を指定
            data: gon.weight,
            backgroundColor: 'rgba(255, 99, 132, 0.2)',
            borderColor: 'rgb(255, 99, 132)',
            borderWidth: 1.2,
            #これを書かないと棒線の下の部分が塗られてしまう
            fill: false,
        }]
    #------------------------------------------------------
    },
    options: {
        title:  {
            display: true,
            text: "カロリーグラフ"
        },
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero:true
                },
                id: 'y左軸'
            }]
        }
    }
});

</script>

<div class="home">
    <%= link_to 'ホームに戻る', root_path %>
</div>

出来上がったグラフがこちら

参考にした記事と完成までのプロセス

http://www.dcom-web.co.jp/lab/javascript/draw_multi_axis_graph_using_chartjs
最初に参考にしたのがこのページ。

いきなりgonで渡さず、最初は上記記事を参考に[60, 70]と適当に数字を置いて表示されるか試した。
それがうまくいって、無事グラフが表示されることを確認したら、どうしたら体重をコントローラーからビューに受け渡せるか考えた。
1日で1つの体重をどうやって取得するか難しそうだなと思っていたが、Railsのgroupメソッドを使うと、そのグループごとにidが最も小さいものにまとめてくれることがわかった。日付ごとにgroupメソッドでまとめれば、その日投稿されたpostsの中で最もidが小さいweightを取得できる。https://pikawaka.com/rails/group#group%E3%83%A1%E3%82%BD%E3%83%83%E3%83%89%E3%81%AE%E5%9F%BA%E6%9C%AC%E7%9A%84%E3%81%AA%E4%BD%BF%E3%81%84%E6%96%B9
あとはgonに代入してgonからgonへ受け渡す。
最後にfill: false,を追加して線の形にして終了。