개요

가계부 WEB 앱 그리고 월별 및 카테고리별로 지출을 시각화하고 싶습니다!
→ 그래프를 간단하게 도입하고 싶다!
→chart.js라는 것이 있는 것 같다!
→하지만 기본적인 사용법 이외의 기사가 적지…

그래서, 나름대로 시행착오한 내용을 기사로 해 보았습니다.

덧붙여 도입이나 기본 기능에 대해서는 이하 기사를 참조해 주세요.
공식 github
도입 방법과 기본 기능

개발 환경

Ruby 2.7.4/Ruby on Rails 6.1.4/RSpec
Docker/Docker-compode/CircleCI(CI/CD)/Heroku/SendGrid(mailer)

완성된 이미지

다음 모델의 연관에서,


다음과 같은 그래프를 만들고 싶다.
Post(지출) 모델원에 카테고리와 월별로 정리한 데이터를 가시화한다.
그래프를 탭하면 카테고리 이름과 지출 소계가 표시됩니다.



즉 필요한 것은 Category.name, Post.price의 합계, Category.color 당.
Category와 Post의 2 모델에 걸쳐 있기 때문에, 귀찮을 것 같은….

만들고 싶은 데이터의 형태

일부 기사를 보면,
다음과 같은 하나의 모델에서 2 개의 컬럼을 꺼내는 형태의 취급이 많다.

<%= pie_chart RugbyWorldCupHostCountry.pluck(:held_at, :total_attendance) %>

2모델에 걸쳐 있는 경우는 어떻게 하면…?
… 조사해 보면
index(이번에 말하는 "category.name")와 value(이번에 말하는 곳의 "post.price") 배열이 되어 있다고 한다.

[[data1_index, data1_value], [data2_index, data2_value], … ]

여기까지 알면 후에는 간단할 것!

구현

이렇게 하면 적당히 @month 의 값을 바꾸어 전월의 그래프 등도 낼 수 있습니다.

controller/hoge.rb

  def month
    family_category_ids = @relationship.category_ids
    # 今月の１日を取得
    @month = Time.zone.now.beginning_of_month

    # 空の配列を用意
    @pie_chart = []

    # カテゴリ毎にループを回す
    family_category_ids.each do |c_id|
      @pie_chart.push(
        [Category.find_by(id: c_id).name, 
          Post.where(category_id: c_id, payment_at: @month.all_month).sum(:price)]
      )
    end

    # @pie_chartとは別にcolorsの配列も用意
    @pie_chart_colors = Category.where(id: family_category_ids).map(&:color)
  end

아래에서는 조금 스타일을 괴롭히고 있습니다.

legend : {display : false}에서 범례 지우기

donut : true로 중간에 구멍

views/hoge.html.erb

  <%= pie_chart @pie_chart,legend: {display: false}, donut: true, width: "200px", height: "200px", colors: @pie_chart_colors %>

사이고에게

이상입니다.
질문이나, 「그 밖에도 이런 실장 방법이 있어!」등 코멘트 받을 수 있으면 다행입니다.
누군가를 위해서라면 기쁩니다.