まだまだプログラミングを学び始めたばかりなので拙い記事になってしまうかもしれませんが自分への備忘録＆練習としてこういう記事を書いてきたいなと思います。よろしくおねがいします。

#LazyHighChartとは
簡単に言うとグラフを表示するgemです。
HighChartsというJavaScript製グラフライブラリをRubyで使えるようにしたよって感じのgemみたい
早めに書いておきますがグラフ自体の表示方法を変えたりするのはまだよくわかっていないので今回は実装までしか書きません。

#Gemの導入

gem 'lazy_high_charts'

まずはGemfileにこれを書いてあげてbundle install

これに加えてapplication.jsに

//= require highcharts/highcharts
//= require highcharts/highcharts-more
//= require highcharts/highstock

と加えてあげましょう。
これで準備はできました。

#Viewでグラフを表示する

まずView側の記述です。

<%= high_chart('my-first-chart', @chart) %>

この記述をしたところにグラフが描画されます。

#Controller側の設定

ここでグラフの種類を決めたり（棒グラフ、円グラフ、折れ線グラフなど）を決めていくわけですがまだ先述にもある通り細かいところがわかってないのでとりあえず私が実装させた記述を書きます。

  def create
    @post = Post.new(post_params)

    if @post.save
-----------------------------------------------------#グラフを表示するための記述
    @chart = LazyHighCharts::HighChart.new('graph') do |f|
      f.title(text: @post.select.name)
      f.xAxis(categories: ["Soldier", "Wizard", "Monk", "Fighter", "Gunner"])
      f.series(name: "", yAxis: 1, data: [@post.vs_soldier_id,@post.vs_wizard_id,@post.vs_monk_id,@post.vs_fighter_id,@post.vs_gunner_id])
      f.yAxis [
        {title: {text: "", margin: 0} },
        {title: {text: ""}, opposite: true},
      ]
      f.legend(align: 'none')
      f.chart({defaultSeriesType: "column"})
    end
-------------------------------------------------------------------------

    else
      render "new"
    end
  end

newアクションからストロングパラメーターで取得した値をcreateアクションで表示した時の記述です。

今回のは棒グラフが表示されます。
f.yAxis
f.legend
f.series
この3つは今回の実装でいらなかったんでよくわかってないです（すいません）

f.title
書いてあるとおり、ここに入れた値がグラフのタイトルになります。

f.xAxis
グラフの横軸の値です。今回はここは決まっていたんで文字列を入れてますね。

そしてf.seriesのなかにある
data: []
ここにデータを入れていきます。（ここに値を入れるために変数をあれこれしたんですが初心者にはここが辛かった…）

f.chart({defaultSeriesType: "column"})
ここの"column"がグラフの種類になるみたいですね。

以上です。

まだまだわかってないことがたくさんあってガバガバな記事なってしまいましたが少しずついいものが書けるよう頑張っていきたいです。では〜