[Rails]C3.js × goo에 도표 보이기

나는 가능한 한 간단하고 질이 높은 도표를 보여 주고 싶다.
그런 너에게추천
또한 데이터베이스나 컨트롤러에 있는 데이터를 표시하려면gemgon을 사용하면 편리하다.
이번에는 C3입니다.다음은 js와gon을 사용하여 기둥그림을 그리는 방법을 소개합니다.

컨디션

릴리즈

$ ruby -v
ruby 2.5.1p57 (2018-03-29 revision 63029) [x86_64-darwin18]
$ rails -v
Rails 5.2.3

gem 가져오기

gon.

gem 'gon'
gem 'haml-rails'

보기는haml을 채택했다.

라이브러리 및 gon 불러오기

C3.js는 D3입니다.js의 나팔통이기 때문에 C3입니다.js와 함께 D3.js를 읽습니다.
이번에는 CDN으로 읽기로 했습니다.(물론,gem로도 읽을 수 있습니다.Rails C3에 있습니다.js 사용
또한 gon을 적용하기 위해 헤드 탭에는 다음과 같은 내용이 추가됩니다.
application.html.haml

    # jsファイルよりも前に読み込む
    = Gon::Base.render_data
    %link{ href: "https://cdnjs.cloudflare.com/ajax/libs/c3/0.6.7/c3.css", rel: "stylesheet"}
    %script{src: "https://d3js.org/d3.v4.min.js", type: "text/javascript"}
    %script{src: "https://cdnjs.cloudflare.com/ajax/libs/c3/0.6.7/c3.js", type: "text/javascript"}

뷰

차트를 삽입할 요소에 ID를 지정합니다.
html.haml

.container
  #bar
  / ここにチャートを挿入

컨트롤러

값을 gon.◯◯ 변수에 대입하면 js 파일에서 호출할 수 있습니다.
controller.rb

    gon.x = ["x","07/13","07/14","07/15","07/16","07/17","07/18","07/19"]
    gon.cash = ["現金",2000000,1000000,1000000,1000000,1000000,1000000,1000000]
    gon.crypto = ["仮想通貨",8000000,9000000,10000000,8000000,6000000,4000000,2000000]

이해하기 편리하도록 직접 수치를 대입하였다
컨트롤러로 DB의 정보를 얻고 변수를 js에 건네주고 싶을 때 사용하면 편리합니다.

파일 형식

마찬가지로 gon.◯◯ 컨트롤러가 정의한 변수를 꺼낼 수 있습니다.

window.onload = function() {
// 棒グラフを挿入
  var barGraph = c3.generate({
    bindto: '#bar', // 挿入する要素のIDを指定（デフォルトは#chart）
    data: {
      x : 'x',
      columns: [
        // コントローラーで定義した変数の呼び出し
        gon.x, //x軸のメモリに表示する文字列
        gon.cash, // 値1
        gon.crypto, // 値2
      ],
      groups: [
          // 値1と値2を連結させた棒グラフを表示
          ['現金', '仮想通貨']
      ],
      type: 'bar' // チャートタイプを指定（今回は棒グラフ）
    },
    axis: {
      x: {
        type: 'category' // x軸のメモリ（今回は日付）を読み込むために必要
      },
      y: {
        label: {
          // y軸のラベルを追加
          text: '価格 / 円',
          position: 'outer-middle'
        },
        tick: {
          // 3桁ずつ「,」を挿入
          format: d3.format(",")
        }
      }
    },
    // チャートの余白を指定できる
    padding: {
      top: 10,
      bottom: 0
    }
  });
}

지정 가능한 도표 유형이나 다른 설정은 공식 참고를 이해하기 쉽다.C3.js

gon의 구조

application.html.햄의 헤드 탭Gon::Base.render_data에 기술된 부분이 어떻게 표시되는지 확인하세요.
html

<script>
  //<![CDATA[
  window.gon={};
  gon.x=["x","07/13","07/14","07/15","07/16","07/17","07/18","07/19"];
  gon.cash=["現金",2000000,1000000,1000000,1000000,1000000,1000000,1000000];
  gon.crypto=["仮想通貨",8000000,9000000,10000000,8000000,6000000,4000000,2000000];
  //]]>
</script>

window.gon={}는 전역 변수gon를 정의하여 빈 대상을 대입하고 초기화합니다.(글로벌 변수는 창 객체 속성)
그리고 컨트롤러가 지정한 값을 gon 속성으로 대입합니다. (window를 생략할 수 있습니다.)
이렇게 하면 js 파일에서 변수를 읽을 수 있습니다.

참고 자료

C3.js
gon
Rails C3에 있습니다.js 사용