rails로 그래프를 표시하기 위해 깨물다
5413 단어 RubyJavaScriptRails
rails로 도표를 표시하는 안내서
근황
테크캠프에 간 지 두 달이 됐고, 코로나의 영향으로 집에서 공부한 지 3주째다.마지막 과제는 인프라의 주요 업무에 종사하면서 헬프데스크와 서버 측의 감각에 힘쓰는 것이다.저는 최종 과제에서 서버 쪽 수라장에서 뚫고 나온 다른 멤버들보다 GEM의 방법과 지식이 적고 서버 쪽 기여도가 낮다는 단점이 있습니다.나는 여기서 멤버들의 수법을 들으면서 이해하고 개인 응용을 통해 반영하고 싶다.반대로 자신이 한 부분은 당연히 상세하고 Qita 글을 활용해 남겼으면 좋겠다.이번 내용과 과제는 전혀 상관없다!!!
메시지
저는 서버 측의 학습 교재로 rails를 사용하고 개인 응용도 배려를 받았지만 한 번은 이런 의문에 얽매였습니다."그림 그림 어떡하지?"
결론은 JS의 쿠카트다.그룹 js가 가장 간단한 것 같습니다.여기서 우리는 실제 개인 응용에 설치된 레이더 그래프를 바탕으로 데이터베이스에 등록된 수치를 호출하여 표시할 것이다.또한 참고한 문장에 다른 도표의 제작 방법을 기재하였으니 반드시 참고하시기 바랍니다!
컨디션
rails 5.2.3
ruby 2.5.1
절차.
1. chart.js 읽기
방법은 jQuery와 마찬가지로 gm를 읽는 방법과 웹에서 끌어오는 방법이 있습니다.
2. 응용 프로그램 시작
3. canvas에 필요한 정보 편집
대충 이런 느낌.
1. chart.js 읽기
gem라면gemfile에'chart-js-rails', bundle install 이후 응용 프로그램을 기술합니다.js에서 사용할 수 있습니다.
끌어오는 방법은 아래에 기재된chart입니다.js의 공식에서github로 넘어가면
ReadMe 파일, Doocumentation의 getting start에 있는 URL을 읽으십시오.
나는 앞으로 차이가 많지 않을 것이라고 생각한다.
2. 애플리케이션 시작 $ rails new
$ rails db:create
$ rails db:migrate
적당히 일어나 루트path를 지정합니다.기술 형식은 참고하여 참고하시오.
index.html.erb <body>
<h1>レーダーチャート</h1>
<canvas id="myRaderChart"></canvas> //ここにグラフが表示
<!-- CDN -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.js"></script> //引用したurl
<link rel="stylesheet" href="style.css">
<script>
// id読み込み
var ctx = document.getElementById("myRaderChart");
// ctx に埋め込むグラフを定義していきます。
var myRadarChart = new Chart(ctx, {
// 型の指定
type: 'radar',
data: {
// 項目の指定 ここを増やすと５角形とかにもなる
labels: ["個性", "香り", "味"],
datasets: [{
label: 'name',
// dataは項目に対応するバリュー，その下はグラフのcss
data: [3, 4, 3, ],
backgroundColor: 'RGBA(225,95,150, 0.5)',
borderColor: 'RGBA(225,95,150, 1)',
borderWidth: 1,
pointBackgroundColor: 'RGB(46,106,177)'
}]
},
options: {
title: {
display: true,
// グラフのタイトル
text: '評価'
},
// グラフの最大値，メモリの刻み方を調整
scale:{
ticks:{
suggestedMin: 0,
suggestedMax: 5,
stepSize: 1,
callback: function(value, index, values){
return value
}
}
}
}
});
</script>
</body>
</html>
에서DB에서 수치를 호출하면 기술이 변경됩니다.↓↓↓
DB 정보를 읽는 차트 표시
하는 일 자체는 변함이 없다.
예를 들어, 위 이미지의 "개성"을 DB에서 호출합니다.
posts표에 individuality 열이 있는 것으로 설정합니다.거기서 show 페이지로 부르는 느낌.
경로를 좋아하지 않습니다.
posts_controller.rbdef show
@post = Post.find(params[:id])
@individuality = @post.individuality
end
개별적으로 실례를 만들지 않으면, 도표에 넣을 값을 읽을 수 없습니다.
그리고 js에서.individuality = <% @individuality %>
~省略~
data: [individuality, 4, 3 ]
하면, 반영된다.individuality 접두사 길이!웃다 웃다
이번 설명은 매우 가볍다. 비록 완결되었지만 실제로는 여분의 파일이기 때문에 js 파일과 분리하는 것이 가장 좋다.만약 당신이 이 글을 읽은 적이 있다면, 개인 응용 프로그램에서 데이터를 나타내는 조미료가 될 수 있다면.마지막 나의 개인 응용 프로그램 show 페이지
컨트롤러 실례를 사용하지 않으면 이동할 수 없는 이유를 알고 있다면, 더 좋은 방법이 있다면 반드시 공유해 주십시오.
참고(두 문장은 2020년 4월 14일까지 잘 운영될 것입니다.) ↓gem를 만드는 방법 https://qiita.com/4EAE_Learner/items/d3a97f1115f5658b4e47
↓ 다른 차트를 만들고 싶은 사람
https://qiita.com/Haruka-Ogawa/items/59facd24f2a8bdb6d369
↓ 공식
https://www.chartjs.org/
Reference
이 문제에 관하여(rails로 그래프를 표시하기 위해 깨물다), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/aaabb6211/items/bbabaf52e9f5b60fdf21
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
$ rails new
$ rails db:create
$ rails db:migrate
<body>
<h1>レーダーチャート</h1>
<canvas id="myRaderChart"></canvas> //ここにグラフが表示
<!-- CDN -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.js"></script> //引用したurl
<link rel="stylesheet" href="style.css">
<script>
// id読み込み
var ctx = document.getElementById("myRaderChart");
// ctx に埋め込むグラフを定義していきます。
var myRadarChart = new Chart(ctx, {
// 型の指定
type: 'radar',
data: {
// 項目の指定 ここを増やすと５角形とかにもなる
labels: ["個性", "香り", "味"],
datasets: [{
label: 'name',
// dataは項目に対応するバリュー，その下はグラフのcss
data: [3, 4, 3, ],
backgroundColor: 'RGBA(225,95,150, 0.5)',
borderColor: 'RGBA(225,95,150, 1)',
borderWidth: 1,
pointBackgroundColor: 'RGB(46,106,177)'
}]
},
options: {
title: {
display: true,
// グラフのタイトル
text: '評価'
},
// グラフの最大値，メモリの刻み方を調整
scale:{
ticks:{
suggestedMin: 0,
suggestedMax: 5,
stepSize: 1,
callback: function(value, index, values){
return value
}
}
}
}
});
</script>
</body>
</html>
def show
@post = Post.find(params[:id])
@individuality = @post.individuality
end
individuality = <% @individuality %>
~省略~
data: [individuality, 4, 3 ]
Reference
이 문제에 관하여(rails로 그래프를 표시하기 위해 깨물다), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/aaabb6211/items/bbabaf52e9f5b60fdf21텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
