【JavaScript】 Chart.js를 사용하여 꺾은 선형 차트를 표시하는 방법

18775 단어 HTMLchart.js자바스크립트

대상자


  • 앱에 그래프를 구현하고 싶은 분

    • 목적


  • 그래프 표시를 해, 수치를 알기 쉽게 한다
  • 완성 이미지는 아래와 같이



    ※화상의 한가운데의 검색 기능에 관해서는 아래 기사로 쓰고 있습니다.

    실제 절차와 예



    1. 전제



    *본의 투고수를 유저의 마이 페이지(상세 화면)로 집계하고 있어 그 수치를 꺾은선 그래프화합니다. 집계 방법은 아래 기사에서

  • 공식 홈페이지


    • 2.지난 7일간의 투고수를 취득



    사용자 내 페이지에 게시물 수를 표시합니다.

    book.rb
      scope :created_today, -> { where(created_at: Time.zone.now.all_day) } # 今日
  scope :created_yesterday, -> { where(created_at: 1.day.ago.all_day) } # 前日
  scope :created_two_days_ago, -> { where(created_at: 2.day.ago.all_day) } #2日前
  scope :created_three_days_ago, -> { where(created_at: 3.day.ago.all_day) } #3日前
  scope :created_four_days_ago, -> { where(created_at: 4.day.ago.all_day) } #4日前
  scope :created_five_days_ago, -> { where(created_at: 5.day.ago.all_day) } #5日前
  scope :created_six_days_ago, -> { where(created_at: 6.day.ago.all_day) } #6日前

    책의 투고수이므로, book 모델에 정의 붙이고 있습니다.

    users_controller.rb
     def show
    @user = User.find(params[:id])
    @books = @user.books
    #過去７日分
    @today_book = @books.created_today
    @yesterday_book = @books.created_yesterday
    @two_days_ago_book = @books.created_two_days_ago
    @three_days_ago_book = @books.created_three_days_ago
    @four_days_ago_book = @books.created_four_days_ago
    @five_days_ago_book = @books.created_five_days_ago
    @six_days_ago_book = @books.created_six_days_ago
end

    book 모델에 정의한 액션을 User 컨트롤러에서 사용합니다 (연결을 짜고 있기 때문에).

    views/users/show.html.erb
    
```` <!--過去７日間の投稿-->
  <div class="user_show_margin">
   <h3>過去７日分の投稿数</h3>
   <table class="table table-bordered table_width">
     <thead>
       <tr>
         <th>６日前</th>
         <th>５日前</th>
         <th>４日前</th>
         <th>３日前</th>
         <th>２日前</th>
         <th>１日前</th>
         <th>今日</th>
       </tr>
     </thead>
     <tbody>
       <tr>
        <td><%=@six_days_ago_book.count %></td>
        <td><%=@five_days_ago_book.count %></td>
        <td><%=@four_days_ago_book.count %></td>
        <td><%=@three_days_ago_book.count %></td>
        <td><%=@two_days_ago_book.count %></td>
        <td><%=@yesterday_book.count %></td>
        <td><%=@today_book.count %></td>
       </tr>
     </tbody>
   </table>

   <!--折れ線グラフ-->
     <div class="user_show_margin">
       <%= render "users/graph" %>
     </div>

    이제 지난 7일간 분의 책의 투고수가 표시되게 되었습니다.
    또한 view 하단에 그래프 표시할 수 있도록 부분 템플릿화한 코드를 작성하고 있습니다.

    3. 꺾은선형 차트 설정



    그래프는 아래와 같이

    views/users/_graph.html.erb
    <!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="utf-8">
　<title>グラフ</title> 
</head>

<body>
  <h3>折れ線グラフ</h3>
  <canvas id="myLineChart"></canvas>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.js"></script>

  <script>
  var ctx = document.getElementById("myLineChart");
  var myLineChart = new Chart(ctx, {
    // グラフタイプを設定する項目
    type: 'line', 

    // データをセットする項目
    data: {
      labels: ['6日前', '５日前', '４日前', '３日前', '２日前', '１日前', '今日'],
      datasets: [
        {
          label: '投稿した本の数',
          data:
          [<%=@six_days_ago_book.count %>,　
          <%=@five_days_ago_book.count %> ,
          <%=@four_days_ago_book.count %>,
          <%=@three_days_ago_book.count %>,
          <%=@two_days_ago_book.count %>,
          <%=@yesterday_book.count %>,
          <%=@today_book.count %>
          ],
          borderColor: "rgba(50,255,0,1",
          backgroundColor: "rgba(0,0,0,0)"
        },
      ],
    },

    // グラフのオプションをつける設定
    options: {
      title: {
        display: true,
        text: '７日間の本の投稿数'
      },
      scales: {
        yAxes: [{
          ticks: {
            suggestedMax: 10,
            suggestedMin: 0,
            stepSize: 1,
            callback: function(value, index, values){
              return  value
            }
          }
        }]
      },
    }
  });
  </script>
</body>

</html>

    해설

    어떤 종류의 그래프를 설정합니다.
    아래에서는 “line”을 하는 것으로 꺾은선 그래프를 나타내고 있습니다.
        type: 'line',

    다음에 그래프에 표시하는 데이터를 설정해 갑니다.
        data: {
      labels: ['6日前', '５日前', '４日前', '３日前', '２日前', '１日前', '今日'],
      datasets: [
        {
          label: '投稿した本の数',
          data:
          [<%=@six_days_ago_book.count %>,　
          <%=@five_days_ago_book.count %> ,
          <%=@four_days_ago_book.count %>,
          <%=@three_days_ago_book.count %>,
          <%=@two_days_ago_book.count %>,
          <%=@yesterday_book.count %>,
          <%=@today_book.count %>
          ],
　　　　　　　　　　　　　　　　　　　　　#線の色
          borderColor: "rgba(50,255,0,1",　
　　　　　　　　　　　　　　　　　　　　　#線の下の塗りつぶしの色
          backgroundColor: "rgba(0,0,0,0)"　
        },
      ],
    },
  • label은 데이터의 축 레이블을 표시합니다.
  • datasets는 데이터를 각각 나타내며 숫자와 배경색을 설정합니다.

    • 마지막은 데이터의 옵션 설정입니다.
        options: {
      #グラフのタイトル
      title: {
        display: true, #タイトル表示するかどうか
        text: '７日間の本の投稿数' #タイトル名
      },
      #グラフの軸にかんして
      scales: {
        #Y軸
        yAxes: [{
          ticks: {
            suggestedMax: 10,　#軸の最大値
            suggestedMin: 0, #軸の最小値
            stepSize: 1, #軸の刻み幅
            callback: function(value, index, values){
              return  value #軸のラベル
            }
          }
        }]
      },
    }
  });

    이것으로 구현 완료입니다! !

    참조



    Chart.js에서 그래프를 그려 보았습니다.

    작성자 코멘트



    조금 전에 구현해 보았습니다만,
    생각보다 쉽게 ​​할 수 있었으므로, 기사로 해 분해해 생각해 보았습니다.

    내 프로필



    프로그래밍 학습 경력 3개월째의 계정입니다!
    프로그래밍 스쿨에서 배운 내용이나 자신이 망설인 부분 등의 출력을 위해 발신하고 있습니다.
    또, 프로그래밍 초학자에게 알기 쉽고, 간결하게 정리해 정보 공유할 수 있으면 좋다고 생각하고 있습니다.
    만약, 투고한 기사안에 잘못등 있으면, 코멘트란에서 교수 받을 수 있으면 다행입니다.　
    그래프 표시 넣은 gem은 Chartkick입니다만, 그래프 그리기는 chart.js로 쓰고 있습니다.
    chartckick에서 원형 차트 구현(2개의 모델에 걸쳐 있는 데이터)

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

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