[Rails] Chart.js에서 커피의 맛을 시각화

11548 단어 chart.jsRails

구현하는 것



커피의 맛 데이터를 Taist 테이블에 저장합니다.
Taist 테이블의 「refresh,bitter,body,fruity」의 4개의 컬럼 데이터를 Chart.js를 사용해 렌더링 합니다.
rails 변수는 "gon"이라는 Gem을 사용하여 javascript 내에서도 사용됩니다.

Taist 테이블 정의




열 이름
컬럼 설명
데이터 유형
기본


ID
맛 ID
integer

title
제목
문자열

refresh
깨끗이
integer

bitter
비터
integer

body
코쿠
integer

fruity
과일
integer

created_at
등록일
datetime
NOW

updated_at
갱신일
부울
NOW


완성형 이미지





Gem에 추가



Gemfile.
  gem 'gon'

$ bundle install

Chart.js 로드



Chart.js를 사용하려면 CDN에 게시된 js 파일을 application.html.erb의 head에서 로드합니다.

app/views/layouts/application.html

<head>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.js"></script>
</head>

Chart.js 보기



taists.controller.rb



Taist 테이블의 「refresh,bitter,body,fruity」의 4개의 컬럼 데이터를 가지는 레코드를 gon를 사용한 변수에 대입합니다.
전제로 커피의 맛에 따라 "refresh,bitter,body,fruity"에 들어가는 데이터는 다르다고 합니다.

app/controllers/taists_controller.rb

    def show
        @taist = Taist.find(params[:id])
        #railsの変数をchart.jsに渡す
        gon.taist = @taist
    end

taists/show.html.erb



그래프 그리기 영역을 지정하기 위해 캔버스 요소를 사용합니다.

app/views/taists/show.html

<canvas id="showRaderChart"></canvas>

javascripts/application.js



· 방금 설정한 캔버스 요소(ID: showRaderChart)를 가져와 변수 ctx에 할당합니다.
· var taist = gon.taist 에서 rails의 변수를 gon을 사용하여 javascript 내에서도 사용합니다.
・ type: 'radar' 그리고 그려지는 그래프의 종류를 레이더 차트로 하고 있습니다.

app/assets/javascripts/application.js

var ctx = document.getElementById("showRaderChart");
    var taist = gon.taist
      var showRadarChart = new Chart(ctx, {
          type: 'radar',
          data: {
              labels: ["スッキリ", "ビター", "コク", "フルーティ"],
              datasets: [{
                  label: taist.title,
                  data: [taist.refresh, taist.bitter, taist.body, taist.fruity],
                  backgroundColor: 'RGBA(135, 206, 235, 0.5)',
                  borderColor: 'RGBA(65, 105, 225, 1)',
                  borderWidth: 1,
                  pointBackgroundColor: 'RGB(46,106,177)'
              }]
          },
          options: {
            title: {
                display: true,
                text: ''
            },
            scale:{
                ticks:{
                    suggestedMin: 0,
                    suggestedMax: 3,
                    stepSize: 1,
                    callback: function(value, index, values){
                      if(value == 1){
                          return "やや感じる"
                      }else if(value == 2){
                        return "感じる"
                      }else{
                        return "強く感じる"
                      }
                    }
                  }
                }
            }
        });

차트에 표시되는 항목이지만,suggestedMin: 0 에서 최소를 0, suggestedMax: 3 에서 최대를 3으로,
이 값이 value == 1 그렇다면 "약간 느낀다"라고 표시, 2라면 "느끼다", 3이라면 "강하게 느낀다"라고 표시하도록 하고 있습니다.

application.js
scale:{
    ticks:{
        suggestedMin: 0,
        suggestedMax: 3,
        stepSize: 1,
        callback: function(value, index, values){
            if(value == 1){
                return "やや感じる"
            }else if(value == 2){
                return "感じる"
            }else{
                return "強く感じる"
            }
         }
     }
}

마지막으로



끝까지 봐 주셔서 감사합니다.
초학자이므로 잘못되었거나 이해하기 어려운 부분도 있을까 생각합니다.
뭔가 눈치채는 점이 있으면, 부담없이 코멘트 받을 수 있으면 다행입니다.
트위터 : htps : // 라고 해서 r. 이 m / y와 _ 오ct
참고 : htps : //에서. 이 m / y와 _ 오

참고



공식 문서
h tp // w w. 찬 rtjs. rg/
Chart.js에서 그래프를 그려 보았습니다.
htps : // 코 m / 하루카 - 오가와 /
gon을 사용한 Rails와 Javascript의 연계에 대해
htps : // 이 m/s_나카무라/있어 ms/5d153f7d9db1b1190296
【Chart.js】Rails로 레이더 차트를 간이 표시할 때까지
chart.js의 yAxes

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage