【개인 앱 작업 ​​메모】1개의 그래프로 막대 그래프와 꺾은선 그래프를 표시하는 방법

이번에 한 일

이미 x축이 날짜, Y축이 칼로리인 막대그래프는 만들고 있으며, 거기에 Y축에 체중의 꺾은선형 차트를 추가해 갑니다.

그래프 구현 전의 아래 준비

체중 입력 양식 추가

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

체중을 저장하는 컬럼 추가

htps : // 코 m/아즈사나카/아 ms/아 2847에4에582b9아627에3아 BF % BD % 5 % 8 A % A 0
이 기사 참고로 하면 바로 할 수 있습니다.

스트롱 파라미터에도 체중 컬럼 추가

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>

완성 된 그래프가 여기

참고한 기사와 완성까지의 프로세스

h tp // w w. d 코 m ぇ b. 이. jp / ぁ b / ゔ ぁ sc pt / d et w
최초로 참고로 한 것이 이 페이지.

갑자기 gon으로 건네주지 않고, 처음에는 상기 기사를 참고로 [60, 70]와 적당히 숫자를 두어 표시되는지 시험했다.

그것이 잘되고, 무사 그래프가 표시되는 것을 확인하면, 어떻게 하면 체중을 컨트롤러로부터 뷰에 건네줄 수 있을까 생각했다.

하루에 하나의 체중을 어떻게 얻는지 어려울 것 같다고 생각했지만, Rails의 group 메소드를 사용하면, 그 그룹 마다 id가 가장 작은 것에 정리해 주는 것을 알았다. 일자마다 group 메소드로 정리하면, 그 날 투고된 posts 중에서 가장 id가 작은 weight를 취득할 수 있다. htps : // 피카와카. 이 m/라이 ls/g 왁스 p#g 왁스 p% 에 3% 83% 에 1% 에 3% 82% BD% 에 3% 83% 83% 에 3% 83% 89% 에 3% 81% 겉% 예 5 % 9F % 예 % 예 6 % 9C % 오 C % 예 7 % 9 아 % 84 % 에 3 % 81 % 아 % 에 4 % BD % BF % 에 3 % 81 % 84 % 에 6 % 96 % B9

그리고는 gon에 대입해 gon으로부터 gon에 건네준다.

마지막에 fill: false, 를 추가해 선의 형태로 해 종료.