【rails×js】chart.js의 구현

15235 단어 chart.js자바스크립트Rails

구현하는 것


  • chart.js를 사용하여 뷰에 원형 차트를 설치합니다.
  • 인스턴트 변수를 사용하여 데이터에 따라 표시 내용을 변경합니다.

    • chart.js 공식 : htps //w w. 찬 rtjs. 오 rg / cs / st /
    github : htps : // 기주 b. 이 m/짱rtjs/짱rt. js

    기본적으로 공식을 보고 구현했습니다.

    완성형


  • 사용자 상세 화면에 원형 차트가 표시됩니다.
  • 커서를 맞추면 원 그래프로 나타내고 싶은 값이 표시되고 있다.
    (이번에는 사용자가 게시 한 수/답변 한 수)


    • 전제



    아래의 기능 구현 완료.
    · devise (이번에는 멤버 모델)
    · 투고 기능 (이번에는 question 모델)

    schema.rb
    ActiveRecord::Schema.define(version: 2021_05_05_122222) do

  create_table "members", force: :cascade do |t|
    t.string "email", default: "", null: false
    t.string "encrypted_password", default: "", null: false
    t.datetime "remember_created_at"
    t.string "name", default: "", null: false
    t.text "introduction"
    t.string "image_id"
    t.datetime "created_at", null: false
    t.datetime "updated_at", null: false
    t.index ["email"], name: "index_members_on_email", unique: true"index_members_on_reset_password_token", unique: true
  end

  create_table "questions", force: :cascade do |t|
    t.integer "member_id", null: false
    t.string "title", default: "", null: false
    t.text "content", null: false
    t.datetime "created_at", null: false
    t.datetime "updated_at", null: false
    t.index ["member_id"], name: "index_questions_on_member_id"
  end
end

    절차



    ① CDN 설치
    ② assets의 css/scss + js 파일에 추가
    ③ view에의 기재
    ④ SNS 버튼의 사이즈 변경

    구현



    1. CDN 설치



    참고 : htps //w w. 찬 rtjs. 오 rg / 도 cs / ㅁ st / 껄껄 g ㄴ r d / ㄱ s 탓 치온. HTML
    아래 코드는 application.html.erb의 js 아래에 나열되어 있습니다.

    views/layouts/application.html.erb
    <!DOCTYPE html>
<html>
  <head>
    <title>Answer.ly</title>
    <%= favicon_link_tag ("favicon.ico")%>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>
    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/Chart.min.js"></script>
  </head>

    CDN이란

    2. view에의 기재



    다음은 뷰에 원형 차트를 표시하는 코드를 설명합니다.
    아래의 사이트에 기재된 코드를 참고로 하고 있습니다.
    creating a chart: htps //w w. 찬 rtjs. 오 rg / cs / st / # c Reachin g-a rt

    views/members/show.html.erb
    <canvas id="myPieChart"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.js"></script>
<script>
  var ctx = document.getElementById("myPieChart");
  var myPieChart = new Chart(ctx, {
    type: 'doughnut',
    data: {
        labels: ["質問","回答"],
        datasets: [{
           backgroundColor: [
               "#a8dba8",
               "#4ea1d3",
           ],
           data: [ <%= @member.questions.count%>, <%= @member.answers.count%> ]
        }]
     },
     options: {
       title: {
         display: true,
         text: 'Q＆A 活動割合'
       }
     }
   });
</script>

    각각 간단히 설명하면,
    * 1행째의 캔버스는 그래프를 표시하는 장소가 됩니다.

    views/members/show.html.erb
    <canvas id="myPieChart"></canvas>
  • 네 번째 줄의 document.getElementById("myPieChart"); 에서 캔버스의 ID를 지정합니다.
    이것에 의해, 지정된 id로 js 사용합니다. 됩니다. (class로 지정하는 방법도 있을까 생각합니다.)

    • views/members/show.html.erb
    var ctx = document.getElementById("myPieChart");

    다섯 번째 줄은 그래프를 설정하는 코드입니다.
    type은 그래프 유형입니다. 원형 차트는 doughnut입니다.
    htps //w w. 찬 rtjs. 오 rg/도 cs/아 st/짱 rts/어디 gh 누 t. HTML

    views/members/show.html.erb
    var myPieChart = new Chart(ctx, {
 type: 'doughnut',

    6행째는, 표시하고 싶은 값(그래프로 하고 싶은 값)등의 설정을 씁니다.
    라벨이나 칼라등은 괴롭혀 받아 이해하는 것이 빠릅니다.

    중요한 것은 마지막으로 date입니다.
    여기에 인스턴스 변수를 사용하여 값을 표시합니다.
    erb 파일 내에서 쓰고 있기 때문에 rails를 쓰는 방법으로 괜찮습니다.

    views/members/show.html.erb
        data: {
        labels: ["質問","回答"],
        datasets: [{
           backgroundColor: [
               "#a8dba8",
               "#4ea1d3",
           ],
           data: [ <%= @member.questions.count%>, <%= @member.answers.count%> ]
        }]
     },

    마지막으로 options에 대해.
    그래프에는 영향을 미치지 않지만 제목이있는 편이 누가 봐도 알기 쉽습니다.
  • display는 표시하거나 하지 않습니다.
  • text는 제목을 씁니다.

    • views/members/show.html.erb
         options: {
       title: {
         display: true,
         text: 'Q＆A 活動割合'
       }
     }
   });
</script>

    이것으로 문제없이 표시 할 수 있을까 생각합니다.
    그렇지 않다면 turbolinks가 방해받을 수 있으므로 turbolinks를 비활성화하거나 제거하십시오.

    이상입니다.
    [Rails] chart.js에서 Rails 앱에 게시물 추이 그래프 그리기 [chart.js]
    React에서 chart.js

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

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