【rails】데이터를 그래프로 표시

전제

gem 추가

gem'lazy_high_charts'

bundle install

javascript 라이브러리로드

//= require highcharts/highcharts

컨트롤러에 그래프를 그리는 액션을 기재

  def index
    ...
    cities = House.pluck(:city).uniq.sort
    people = House.pluck(:num_of_people).uniq.sort
    max_people = people.max
    min_people = people.min

    @chart2 = LazyHighCharts::HighChart.new("graph") do |c|
      c.title(text: "地域毎の世帯あたりの人数(子供なし世帯)")
      #x軸
      c.xAxis(categories: people, title: {text: 'Number of households' } )
      #y軸
      c.yAxis(title: {text: 'count' } )

      cities.each do |city|
        family_has_nochild = []
        for num in min_people..max_people do
          #グラフ化したいデータを条件指定して抽出し、配列に入れる
          family_has_nochild << House.where(city: city).where(num_of_people: num).where(has_child: "No").count
        end
        #グラフ表示したいデータを配列で渡す
        c.series(name: city, data: family_has_nochild )
      end
      #凡例
      c.legend(align: 'right', verticalAlign: 'top', x: -100, y: 180, layout: 'vertical' )
      #グラフ種別を指定（棒グラフ）
      c.chart(type: "column" )
    end
   ...

보기에서 표시할 그래프 로드

.wrapper
  %h1
    = "Houseデータのグラフ"
  .wrapper__guide
    = "インポートしたHouseデータ（csv）のグラフを表示します"

  .wrapper__chart
    .wrapper__chart__first
      # グラフの読み込み
      = high_chart("my_chart2", @chart2)
    .wrapper__chart__second
      # グラフの読み込み
      = high_chart("my_chart3", @chart3)

결과

참고

보충