ムカデノワラジ

ムカデノワラジ

ガジェット・Webサービス・プログラミング・エンタメについて書く雑記ブログ

MENU

Ruby on Rails を利用したwebアプリにplotly.jsを使いグラフを描画する

rails を使ったweb アプリケーションに plotly.js を使ってグラフを描画する。

plotly.js はグラフ描画に使えるJavaScriptライブラリーの一つ。
ユーザーが操作したり編集したりできるインタラクティブ&レスポンシブなグラフを簡単に描画できる商用利用可能なjsライブラリ。

以下のページからplotly-latest.min.jsをダウンロードし、appのvendor/assets/javascriptsに配置する。(ディレクトリが無ければ作る)
plot.ly

config/initializers/assets.rbに以下を追加することでvender/assets/javascripts/plotly-latest.min.jsをprecompileする。

Rails.application.config.assets.precompile += %w( plotly-latest.min.js )

またapplication.js冒頭に以下を追記する

#= require plotly-latest.min

plotlyでグラフを表示するページの末尾に以下を追加することでprecompileしたplotly-latest.min.jsをincludeする。

= javascript_include_tag 'plotly-latest.min'


なおここまでした手順はRails プロジェクトへその他のjsライブラリを導入する際にも一般的に利用できる。

x,y に関するデータ
(x, y) = (1,2), (2,4),(3,1),(4,2),(5,6),(6,4),(7,1)
をグラフに描画する。

グラフの描画に使うデータはgonというgemを使いJavascriptに渡す。
gonはrequest_storeを利用したgemで、コントローラーで定義した値をjsから直接参照する機能を提供する。

gemfileに

gem 'gon'

を追加し bundle install

controller

def index
  gon.x = [1,2,3,4,5,6,7]
  gon.y = [2,4,1,2,6,4,1]
# javaScriptからはgon.x, gon.y で参照できる
end

application.html.haml

%head
  %meta  #meta
  %meta  #meta
  #=Gon::Base.render_data

index.html.haml

-#略
.div
  #graph
// #graphにグラフを描画する
=javascript_include_tag 'plotly-latest.min'

ここまででrailsのappでplotly.jsを使ってグラフを描画する準備は完了。

次に、グラフを描画するための設定などを書いたJavaScriptファイルを作る。
app/assets/javascripts/graph.js

graph.js

document.addEventListener('DOMContentLoaded', function(){
  graph();
},false);

function graph(){
  var scores={
  x: gon.x, // =>[1,2,3,4,5,6,7]
  y: gon.y, // =>[2,4,1,2,6,4,1]
  type: 'scatter'
  }
// scores2, scores3などデータが複数必要なら上と同様にして用意する
  var data =[scores]
// [scores,scores2,scores3,........] みたいに、データは複数個入れられる
  Plotly.newPlot('graph', data)  // div id ='graph' に描画
// option で第三引数にlayoutを入れられる。 例 plotly.newPlot('id',data,layout)
// 第四引数に{responsive: true}を入れるとレスポンシブ化
// plotly.new と同じネストのところに以下のようにhover eventなどを設定できる
// document.getElementById('graph').on('plotly_hover', function(e){     # plotly_unhover, plotly_clickなどもあり
// 処理内容
// e.pointsでデータを取得できる、インデックスを指定すれば細かい要素も取得できる。詳細は
// console.log(e.points)などで確認
// })
}

レイアウトの詳細
細かい設定は公式ページへ

layout={
  paper_bgcolor:'rgba(0,0,0,0)', plot_bgcolor:'rgba(0,0,0,0)', //=>グラフの背景色を設定する(この場合、透過)
   xaxis: {
     showline: true, // => x軸の線を表示
     showgrid: true, //=> x軸のグリッド線を表示
     zeroline: true, //=>0の線表示
     linecolor: "#fff",  //=>線の色
     gridcolor:"#ff0000", //=>グリッドの色
     dtick:1, //=> 刻み幅
     range: [n,m], //=> x軸の範囲 n からmまで
     //など
     }
}

関連記事

https://xhateblo.hatenablog.com/entry/rails/view/gem/gonxhateblo.hatenablog.com

JavaScript ライブラリ実践活用〔厳選111〕 (Software Design plus)

JavaScript ライブラリ実践活用〔厳選111〕 (Software Design plus)