railsにvue-chartsを導入する

railsとVue.chartを利用して、グラフを使ったタイムマネジメントアプリを作成したいと思ったので、後から振り返るためにも、今日から記録していきたいと思います。

タイムマネジメントappのざっくりとしたイメージです。

試行錯誤しながらやっていこうと思っているので、まばらな更新になるかと思います。
今回は、とりあえずrailsで散布図チャートを表示させるところまでやっていきます。

前提条件

Ruby,railsはそれぞれ環境を用意しておいてください。

Vue.jsとRailsでTODOアプリのチュートリアルみたいなものを作ってみたを参考にしながら、環境を用意します。

当方windows環境のため、node.jsのインストールはこちらを参考にしました。
Node.js / npmをインストールする（for Windows）

また、Webpack、およびVue.jsはyarnでインストールされるため、yarnも下記のコマンドでインストールします。

$ npm install -g yarn

私は、下記の環境で実施しています。

Ruby 2.6.0
Ruby on Rails 5.0.7.1
Node.js 6.16.0
yarn 1.13.0
Webpacker 3.0.2
Vue.js 2.9.6

新しいプロジェクトを作成

途中までは、Vue.jsとRailsでTODOアプリのチュートリアルみたいなものを作ってみたの記事と進め方は同じです。

Rails + Vue.jsのプロジェクトを作成する

はじめから--webpackオプションを使用してプロジェクトを作成します。

$ rails new chartapp --webpack=vue

rails sでrailsのデフォルトの画面が表示されます。

Vue.jsの表示確認

以下のファイルを作成、編集し、railsのビューにVue.jsを反映させる。

• app/controllers/home_controller.rb
• config/routes.rb
• app/views/home/index.html.erb

app/controllers/home_controller.rb

class HomeController < ApplicationController
  def index
  end
end

config/routes.rb

Rails.application.routes.draw do
  root to: 'home#index'
end

app/views/home/index.html.erb

<%= javascript_pack_tag 'hello_vue' %>

参考記事から引用しますと、

javascript_pack_tagを使用することで、app/javascript/packs以下にあるJSファイルを探してくれます。
インストール時にhello_vue.jsというファイルが生成されているので、これをindexにて読み込ませます。

rails sをすると、「Hello Vue!」と表示されれば成功です。

※bin/webpackでコンパイルする

Vue.js（というよりWebpack）関連のファイルは変更したらコンパイルする必要があります。
コンパイルには、bin/webpackというコマンドを使用しましょう。ファイルを変更したのに変わってないなという時は、コンパイルし忘れているかもしれません。

Vue.jsを表示する

元となるビューファイルであるRailsのindex.html.erbにVue.jsを載せられるようにします。

app/views/home/index.html.erb

<div id="app">
 <navbar></navbar>
</div>

<%= javascript_pack_tag 'chart' %>

<navbar>というタグがありますが、Vue.js側でこのタグとコンポーネントを紐付け、表示します。

また、新しくchart.jsというファイルをapp/javascript/packsに作成します。

app/javascript/packs/chart.js

import Vue from 'vue/dist/vue.esm.js'
import Index from './components/index.vue' #あとでjavascript/packs/components/index.vueというファイルを作成します。

var app = new Vue({
  el: '#app', 
  components: {
    'navbar': Index,
  }
});

rails側のルーティングも忘れないようにしましょう。

config/routes

Rails.application.routes.draw do
  root to: 'home#index'
end

これでindex.html.erb内のdiv id="app"にマウントされ、表示されます。

vue-chartsを導入

• Vue.jsでカッコいいグラフを手軽に作るChart.jsのラッパー3つ
• github:hchstera/vue-charts
  上記の２つのサイトを参考にグラフを導入していきます。

まず、vueを記述するindex.vueを作成します。
javascriptディレクトリに、packs/componentsディレクトリを作り、index.vueを作成します。

javascript/packs/components/index.vue

# 何も書かないでおく

次に、以下の記述をし、node_modulesからChart.jsライブラリーとhchs-vue-chartsをインポートし、Vue.use(window.VueCharts)によりグローバルに登録しました。グローバルに登録することでコンパイルする必要がなくなるとのこと。（すみません、まだ理由は完全に理解してませんが・・・）

javascript/packs/chart.js

import 'chart.js'
import 'hchs-vue-charts'

Vue.use(window.VueCharts)

では実際に導入していきましょう。

折れ線グラフ
index.vueファイルのtemplateタグ内に、<chartjs-line></chartjs-line>を挿入します。

棒グラフ
index.vueファイルのtemplateタグ内に、<chartjs-bar></chartjs-bar>を挿入します。

レーダーチャート
index.vueファイルのtemplateタグ内に、<chartjs-radar></chartjs-radar>を挿入します。

javascript/packs/components/index.vue

<template>
  <section class="container">
    <h1>Demo examples of vue-charts</h1>
    <div class="columns">
      <div class="column">
        <h3>Line Chart</h3>
        <!--Line Chart Example-->
        <chartjs-line></chartjs-line>
      </div>
      <div class="column">
        <h3>Bar Chart</h3>
        <!--Bar Chart Example-->
        <chartjs-bar></chartjs-bar>
      </div>
    </div>
    <div class="columns">
      <div class="column">
        <h3>Radar Chart</h3>
        <!--Radar Chart Example-->
        <chartjs-radar></chartjs-radar>
      </div>
    </div>
  </section>
</template>

こんな感じでサンプルグラフを表示することができました。数値を自由に変更したいのですがgithubのページをみてもやり方がわからず・・・ただ表示だけはできました。

ここまでやって気づいた・・・vue-chartsには散布図がない( ;∀;)

しまった。一生懸命やっていたら気づきませんでした。
この記事がだれかのお役にたてば嬉しいです。
とりあえず私はchart.jsか何かで対応しようと思います。それはまた別記事で・・・