차트(꺾은선형 차트, 막대형 차트, 레이더 차트 등)를 작성하는 데 뛰어난 루비 라이브러리를 학습했기 때문에 기록을 위해 떠납니다.

공식 문서

Chart.js 공식 사이트

사용법

① rails new하여 앱 작성

% rails new chart

먼저 학습용 파일을 만듭니다.

② controller와 routes 설정

컨트롤러를 만듭니다.

% rails g controller home

그런 다음 컨트롤러에 index 메서드를 만듭니다.

app/controllers/home_controller.rb

class HomeController < ApplicationController
 def index  # 追記
 end
end

컨트롤러 작성이 끝나면 라우팅을 만듭니다.

app/confing/routes.rb

Rails.application.routes.draw do
 root 'home#index'  # 追記
end

이것으로 완료됩니다.
서버를 이동하여 지금까지의 설명이 잘 작동하는지 확인합니다.

% rails s

다음과 같이 되어 있으면 성공입니다.


아래 준비가 완료되었으므로 앞으로 본제로 들어갑니다.

③ chart.js 설치

Chart.js를 설치합니다.

% npm install chart.js

다른 설치 방법도 있습니다.
→ htps //w w. 찬 rtjs. 오 rg / 도 cs / ㅁ st / 껄껄 gs r r d / ㄱ s 탓치 온. HTML

④ 그래프의 정보를 기술

app/views/home/index.html.erb

<canvas id="myChart"></canvas>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
var ctx = document.getElementById('myChart');
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
        datasets: [{
            label: '# of Votes',
            data: [12, 19, 3, 5, 2, 3],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
                'rgba(255, 99, 132, 1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            y: {
                beginAtZero: true
            }
        }
    }
});
</script>

이것으로, chart.js의 기술은 종료입니다.
서버를 움직입니다.

% rails s

제대로 반영되었습니다. 성공입니다! !

그래프의 기술에 대해서는 이 후 해설합니다.

④의 해설

이하의 기술을 1개 1개 봐 갑니다.

app/views/home/index.html.erb

<canvas id="myChart"></canvas>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
var ctx = document.getElementById('myChart');
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
        datasets: [{
            label: '# of Votes',
            data: [12, 19, 3, 5, 2, 3],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
                'rgba(255, 99, 132, 1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            y: {
                beginAtZero: true
            }
        }
    }
});
</script>

우선은 아래의 2행으로부터입니다.

그래프 그리기 영역 설정 · Chart.js 읽기

<canvas id="myChart"></canvas>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

이 2행은 공식 문서대로 그대로 기재합니다.



첫 번째 줄에서 chart.js는 그래프 그리기 영역을 지정하기 위해 canvas 요소를 사용합니다.

두 번째 줄에서는 Chart.js를 사용하기 위해 CDN에 게시 된 js 파일을 읽습니다.

canvas 요소 획득

세 번째 줄에서는 방금 설정한 canvas 요소 (ID : myChart )를 가져 와서 변수 ctx에 입력합니다.

var ctx = document.getElementById('myChart');

Chart 설정

4행째에서는, 묘화 하는 그래프를, 「new Chart(　)」에 의해 설정합니다.

var myLineChart = new Chart(ctx, {
  type: タイプ,
  data: データ,
  options: オプション
}

그래프를 표시하려면 "type", "data", "options"의 3개 항목을 설정해야 합니다.

유형 유형

설정 항목
그래프


바
막대 그래프 　　　　　

line
꺾은선형 차트

pie
원형 차트

doughnut
원형 차트

radar
레이더 차트

polarArea
닭 머리 그림

bubble
버블 차트

scatter
산점도

options의 종류

설정 항목
그래프


바
막대 그래프 　　　　　

line
꺾은선형 차트

pie
원형 차트

doughnut
원형 차트

radar
레이더 차트

polarArea
닭 머리 그림

bubble
버블 차트

scatter
산점도