chart.js를 사용하여 그래프를 작성해 보았습니다.
Rails로 만든 앱에 그래프를 쉽게 넣는 방법
환경
루비 2.5.0p0
Rails 5.2.4.2
슬림
샘플 이미지
이런 그래프가 간단하게 완성됩니다.
절차
gem 설치
$ gem 'chart-js-rails', '~> 0.1.4'
bundle install
chart.js 설치
package.json{
"name": "hoge",
"private": true,
"dependencies": {
"chart.js": "^2.7.1" ←★追記
}
}
$ yarn install
//= require Chart.min 추가
hoge/app/assets/javascripts/application.js
// = require Chart.min
// = require rails-ujs
// = require activestorage
// = require turbolinks
// = require_tree .
view측
app/views/hoge/index.html.slim<canvas id="myChart" width="400" height="400"></canvas>
javascript:
draw_graph();
hoge/app/assets/javascripts/hoge.coffee
window.draw_graph = ->
ctx = document.getElementById("myChart").getContext('2d')
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: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
}
}
})
동작 확인
$ rails s
아래의 기사를 참고로 자신도 시험해 보았습니다만, 30분 정도로 곧바로 작성할 수 있었습니다. 앱에 그래프를 도입하고 싶은 분에게 추천합니다.
다음은 사용자가 쉽게 볼 수 있도록 사용자 정의합니다.
참고 기사
Reference
이 문제에 관하여(chart.js를 사용하여 그래프를 작성해 보았습니다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/new_engineer/items/96beaec341317a5b87d1
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
$ gem 'chart-js-rails', '~> 0.1.4'
bundle install
{
"name": "hoge",
"private": true,
"dependencies": {
"chart.js": "^2.7.1" ←★追記
}
}
$ yarn install
// = require Chart.min
// = require rails-ujs
// = require activestorage
// = require turbolinks
// = require_tree .
<canvas id="myChart" width="400" height="400"></canvas>
javascript:
draw_graph();
window.draw_graph = ->
ctx = document.getElementById("myChart").getContext('2d')
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: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
}
}
})
$ rails s
Reference
이 문제에 관하여(chart.js를 사용하여 그래프를 작성해 보았습니다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/new_engineer/items/96beaec341317a5b87d1텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)