Logo
  • DoRubyとは
  • お問い合わせ
  • Ruby/Rails
  • Web開発
  • Webマーケティング
  • アピリッツ
  • ライフハック
  • ゲーム制作/開発
  • アプリ開発
  • 新しいカテゴリ
  • Railsの小技
  • Rubyの小技
  • Gemの紹介
  • ActiveRecord
  • 初心者向け
  • Java/Scalaテク
  • Unixのあれこれ
  • データベース
  • スマホ開発
  • HTML/CSS/JavaScript
  • デザイン製作
  • インフラ
  • クラウド
  • セキュリティ
  • エディタ
  • バージョン管理
  • その他
  • python
  • アクセス解析
  • Googleアナリティクス
  • Googleデータスタジオ
  • Web広告
  • SEO
  • UI/UX
  • ソーシャルメディア
  • EC開発
  • Webシステム開発
  • コンサルティング
  • Webデザイン
  • ブロックチェーン
  • ゲーム紹介
  • アプリ紹介
  • ASP
  • 風景
  • パソコン
  • ツール
  • ガジェット
  • 仕事術
  • 健康
  • 生活
  • 書評
  • Excel(エクセル)
  • PowerPoint(パワーポイント)
  • ゲームプランニング
  • SpriteStudio
  • マスターデータ入力/作成
  • Unity
  • キャラクターデザイン
  • ゲームシナリオ
  • レベルデザイン
  • ゲーム分析
  • 3DCG
  • イラスト制作
  • CG/アニメーション
      1. ホーム
      2. Ruby/Rails
      3. Railsの小技
      4. Rails×chart-js-railsで統計を表示する 1.
      • 2017-10-02
        • カテゴリ:
        • Railsの小技
        • タグ:
        • Rails
        • ruby
        • javascript

      Rails×chart-js-railsで統計を表示する 1.

      この記事は公開から1年以上が経過しています。情報が古い可能性がありますのでご注意ください。
      26b059b30923a7d86254c513ab1aada7

      2は多分ある。

       ナポリタンの食品サンプルがデスクに増えました。

      発端

      「Railsでデータベース使って色々やってるんだから、それ使って簡単なグラフとか見れたら面白そうだな.....。Railsでグラフを表示する用のgem、探してみよう」
      「今回はchart-js-railsを使ってみることにしよう。有名どころでも使われているみたいだし、このgem自体はjavascriptのライブラリのchart.jsをRailsで使う為に引っ張って来てるだけのものみたいだし」

      使用方法

      「Gemfileに一行付け足して、bundle installして、使う為には、application.jsに

      //= require Chart.min
      

       を書き込む、と。
       それだけで、他にコマンドとかを打つ必要は全く無し。
       さて、まずは適当に新しいページ作ってchart.jsのサンプルページとか見ながら試してみるか......。
       新しくそれ用のコントローラ作ってroute.rbにルーティング付け加えて、それからviewを作成して」

      Controller
      graph_viewers_controller.rb

      class GraphViewersController < ApplicationController
        def sample
        end
      end
      

      View
      sample.html.erb

      <canvas id="myChart" width="900" height="400"></canvas>
      <script>
      var ctx = document.getElementById("myChart").getContext('2d');
      var myChart = new Chart(ctx, {
          type: 'bar',
          data: {
              labels: [1,2,3,4,5],
              datasets: [{
                  label: "サンプル",
                  data: [1,2,3,4,5],
                  backgroundColor: 'rgba(255, 99, 132, 1.0)',
                  borderColor: 'rgba(255, 50, 132, 1.0)',
                  fill: false
              }]
          },
          options: {
              title:  {
                display: true,
                text: "タイトル"
              }
          }
      });
      </script>
      

      bar graph test
      「お、出来た。
      で、これにデータやラベルを変数として組み込むには、配列部分を弄れば良さそうだな」

      Controller

      def sample
        pivotes = PiVote.pluck(:name, :vote_num)
        @labels = pivotes.map(&:first)
        @datas = pivotes.map(&:second)
        #@labels = ["◯っ◯◯","π","パイナップル", "ニシンパイ", "パイルドライバー"]
        #@datas = [9999, 3141, 2, 8, 1000]
      end
      

      View
      「ラベルとデータ部分をそれぞれ弄って、と」

          data: {
              //文字列の入った配列やハッシュ等はこうしないと正しく表示されない
              labels: <%= @labels.to_json.html_safe %>,
              datasets: [{
                  label: "投票数",
                  data: <%= @datas %>,
                  backgroundColor: 'rgba(255, 99, 132, 1.0)',
                  borderColor: 'rgba(255, 50, 132, 1.0)',
                  fill: false
              }]
          },
      

      enter image description here
      「おお、でけたでけた。
       一つ二つでも弄れば円グラフとか散布図とかも色々作れそうだし、オプション設定も色々あるし、夢が広がるぅ」

      実際の使用感覚

       まあ、そんな感じで使ってみました。実際にデータが視覚化されると、特徴とかが分かりやすくなりますし、そこからプロジェクト等に対する改善策も見やすくなってくると思います。
       このchart-js-railsは実際、chart.jsをRailsで使えるようにしただけのgemみたいなものですが、Javascriptを余り深く知らない自分にとっては、Javascriptの勉強にもなって中々面白い所もあります。
       今もそれに関して主に弄っていて、グラフの色分けや、散布図の点をクリックしたらそのデータに関する画面に遷移したりとか、実際色んな事が出来るようになってきて、実際夢が広がるぅ、感じです。
       でも、一つ、難点として挙げるのならば、データベースから取ってきた値などを、javascriptにrubyとして組み込んでいくので、コードがとても汚くなりがちです。
       散布図を色分けやらしたい、なんて考えた時は、データを与える辺りのコードが以下のようになってしまいました。

        datasets: [
          <% @labels.each_with_index do |label, i| %>
          {
            label: "<%= label.html_safe %>",
            //色の設定。数に応じて変化。
            borderColor: "<%= "##{(16 * i / @labels.length).to_s(16)}f#{(16 * (@labels.length - (i + 1)) / @labels.length).to_s(16)}fff"%>",
            backgroundColor: "<%= "##{(16 * i / @labels.length).to_s(16)}5#{(16 * (@labels.length - (i + 1)) / @labels.length).to_s(16)}5ff"%>",
            pointRadius: <%= 4 + i %>,
            pointStyle: "<%= ['circle', 'triangle', 'rect', 'star', 'cross'][i].html_safe%>",
            showLine: false,
            data: [
            //データの配列。データの一つはx,y座標を格納した配列。
              <% @datas_array[i].each do |data| %>
              {
                x: <%= data[0] %>,
                y: <%= data[1] %>
              },
              <% end %>
            ]
          },
          <% end %>
        ]
      

      enter image description here
      まあ、もっと良いやり方はあると思うので、もっと色々試してみようとは思いますが。


      • 562 views
        • Tweet
        • このエントリーをはてなブックマークに追加

      この記事を書いた人
      F7eb52677a0e9796e154969ea5171e15?default=mm&size=80
      HelloWorld?
      ズボラなのにケーキを作って成功したプログラマ

      「いいね!」するとDoRubyの最新記事を受け取ることができます。

      Facebook

      Twitterから最新記事を受け取るならこちら

      Follow @doruby

      Feedlyから最新記事を受け取るならこちら

      follow us in feedly

      おすすめの記事
      • 502 views
      • 2015-10-01
      RailsのViewを自在にカスタマイズするための「Cosme」gem
      • 1,638 views
      • 2016-07-27
      リニューアルをしたDoRubyの3つの目的
      • 685 views
      • 2016-07-31
      carrierwaveとfogでRiak CSへの画像アップロードを実装する
      • 1,100 views
      • 2017-04-24
      アピリッツの新卒合宿2017

      カテゴリ

      Icon category 1Ruby/RailsList elementRailsの小技List elementRubyの小技List elementGemの紹介List elementActiveRecordList element初心者向けIcon category 4Web開発List elementJava/ScalaテクList elementUnixのあれこれList elementデータベースList elementスマホ開発List elementHTML/CSS/JavaScriptList elementデザイン製作List elementインフラList elementクラウドList elementセキュリティList elementエディタList elementバージョン管理List elementその他List elementpythonIcon category 5WebマーケティングList elementアクセス解析List elementGoogleアナリティクスList elementGoogleデータスタジオList elementWeb広告List elementSEOList elementUI/UXList elementソーシャルメディアIcon category 6アピリッツList elementEC開発List elementWebシステム開発List elementコンサルティングList elementWebデザインList elementブロックチェーンList elementゲーム紹介List elementアプリ紹介List elementASPList element風景Icon category 7ライフハックList elementパソコンList elementツールList elementガジェットList element仕事術List element健康List element生活List element書評List elementExcel(エクセル)List elementPowerPoint(パワーポイント)List elementゲーム制作/開発List elementゲームプランニングList elementSpriteStudioList elementマスターデータ入力/作成List elementUnityList elementキャラクターデザインList elementゲームシナリオList elementレベルデザインList elementゲーム分析List element3DCGList elementイラスト制作List elementCG/アニメーションList elementアプリ開発List element新しいカテゴリ

        人気の記事
        • 26 views
        • 2019-02-12
        カスタマーへの活用促進とヘルススコア
        最近の記事
        • 26 views
        • 2019-02-12
        カスタマーへの活用促進とヘルススコア
        • 108 views
        • 2019-01-08
        日本でもっとカスタマーサクセスを盛り上げよう!!の年末イベント
        • 170 views
        • 2018-12-10
        【Rails】I18nの言語データをDBから取得 / キャッシュ使用【i18n/i18n-active_record】
        • 159 views
        • 2018-12-10
        【Rails】I18nの言語データをDBから取得【i18n/i18n-active_record】
        • 141 views
        • 2018-11-12
        【jQuery】開閉パネルを最初から開いた状態にする
        Facebook

          サイト情報
          • DoRubyとは
          • 株式会社アピリッツ

          企業情報
          • 会社概要
          • 採用情報
          • お問い合わせ

          ソーシャルアカウント
          • Facebook
          • Twitter
          サービス製品
          • コミュニティサイト
          • Android向け ECアプリ制作パッケージ「ポケコマ」
          • レコメンドASP
          • サイト内検索ASP「Advantage Search」
          • オープンソースECサイト構築パッケージ「エレコマ」

          • 受注・在庫・商品情報一元管理「モールコネクター」
          • セキュリティ診断サービス
          • 戦略的EC画面設計・制作サービス
          • Googleアナリティクスセミナー
          • アクセス解析コンサルティング
          • SEOコンサルティング

          Copyright © Appirits All Rights Reserved.