[Rails] chart.js를 사용하여 게시물에 연결된 그래프를 만듭니다!
소개
오리지널 앱의 작성으로, 투고에 연동한 그래프를 작성했으므로 작성 방법을 아웃풋!
도입 방법
1 : chart.js를 CDN을 통해 Rails 앱에 도입
2: 그래프 생성의 코드 기술
3 : 조금 코드 재작성하여 투고와 연동시킨다
원래 CDN이란?
CDN(Content Delivery Network)의 약자로,
웹 콘텐츠를 효율적이고 신속하게 전달할 수 있도록 고안된 네트워크인 것 같습니다.
이것에 의해 오리진 서버의 부담을 줄일 수 있는 것 같다.
감각적으로는, 아마존의 창고를 여러가지 장소에 마련해,(도쿄의 사람은 도쿄의 창고로부터 출하!, 오사카의 사람은 오사카의 창고로부터 출하!같은 느낌으로) 부담을 줄이자! 라는 것으로 이해합니다.
그럼, 주제,,,
1 : chart.js를 CDN을 통해 Rails 앱에 도입
아래 링크에서 CDN 만들기!
htps //w w. js에서 ぃvr. 코 m / 파 c 게 / n pm / 짱 rt. js?ゔぇ시온 = 2.8.0
view > layouts > application.html.erb의 head 태그에 스크립트 작성
application.thml.erb
<!DOCTYPE html>
<html>
<head>
<title>Nutrik</title>
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
<script type="text/javascript" src="https://js.pay.jp/v1/"></script>
<%= stylesheet_link_tag 'application', media: 'all'%>
<%= javascript_pack_tag 'application' %>
<script src=”ここに貼り付ける！！！”></script>
</head>
<body>
<%= yield %>
</body>
</html>
2: 그래프 생성의 코드 기술
index.html.erb
<div class="chart">
<canvas id="myChart" ></canvas>
<script>
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'radar',
data: {
labels: ["1群", "２群", "３群", "４群", "5群", "6群"],
datasets:
[
{
label: '６つの基礎食品群',
backgroundColor: 'rgba(255,165,0,0.5)',
borderColor: 'rgba(255,165,0,0.2)',
data: [1,2,3,4,5,6]
},
]
},
options: {
maintainAspectRatio: false,
scale: {
ticks: {
suggestedMin: 0,
suggestedMax: 7
}
}
}
});
</script>
</div>
그렇다면 이런 느낌의 잡을 수 있습니다!
3 : 조금 코드 다시 쓰고 게시물과 연동시킨다
이런 식으로 코드를 조금 다시 써 준다.
index.html.erb
data: [1,2,3,4,5,6]
index.html.erb
data: [<%= @food_group[1] %>, <%= @food_group[2] %>, <%= @food_group[3] %>, <%= @food_group[4] %>, <%= @food_group[5]%>, <%= @food_group[6] %>]
제 경우에는 가져 가고 싶은 데이터가 특수했기 때문에 조금 컨트롤러로 처리하고 인스턴스 변수로 뷰에 전달하고 있습니다.
끝에
결과, 매우 간단하게 그래프를 만들 수 있다! !
참고 기사
Reference
이 문제에 관하여([Rails] chart.js를 사용하여 게시물에 연결된 그래프를 만듭니다!), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/dai4869/items/2e9b160051fc43882f66텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
