[Rails] 5분 후 ApexChart.js 가져오기 방법
6523 단어 apexchartJavaScriptRubyRails
개시하다
저는 Rails에 Apexchart를 도입해 보았지만 쓰기 좋지만 일본어 보도가 없고 침투되지 않았기 때문에 보급 활동으로 보급했으면 좋겠습니다.
ApexChart.js 소개
그래프 라이브러리.같은 도서관 카트.js 등이 있습니다.
그래프 라이브러리.같은 도서관 카트.js 등이 있습니다.
명령하다
// Rails アプリケーション作成
$ rails _5.2.4_ new five_min_apexchart
$ cd five_min_apexchart
// scaffold で Event モデルを作成
$ rails g scaffold chart
$ rails db:migrate RAILS_ENV=development
GemFile
GemFile
# 今回紹介する apexchart の gem
gem 'apexcharts'
# apexchart とは直接関係はないが、Ruby -> Javascript にデータを渡すときにとても便利な gem
gem 'gon'
$ bundle install
Javascript
다음 내용을 추기하다.
app/assets/javascripts/application.js
//= require apexcharts
View에서 apexchart를 그리는 방법
Rails에 apexchart를 적용하는 두 가지 방법이 있습니다.
용도에 맞는 물건을 사용하세요.
뷰에 직접 쓰기 (반영하는 방법 1)
HTML에 데이터를 제출하면 읽고 그래프를 그립니다.
이번에 참고로 떡그림을 하나 그렸는데 스트라이프, 산도 등이 많이 있으니 문서를 확인해 주세요.
※index.html.erb에 그린 것도 참고일 뿐입니다. 제가 당신이 좋아하는 곳에서 그릴 수 있도록 해 주십시오.
app/view/charts/index.html.erb
<%= pie_chart([
{name: "Series A", data: 25},
{name: "Series B", data: 100},
{name: "Series C", data: 200},
{name: "Series D", data: 125}
], legend: "left") %>
Javascript로 그리는 방법(반영하는 방법2)
HTML에 id의 div 요소를 추가할 준비를 합니다.
app/view/charts/index.html.erb
<div id='chart'></div>
데이터를 Javascript에 전달하여 그리는 id를 지정합니다.options에 상세한 조건을 지정하면 상당히 풍부한 도표를 그릴 수 있습니다.
app/assets/javascripts/application.js
var options = {
chart: {
type: 'pie'
},
series: [25, 100, 200, 125],
labels: ['Series A', 'Series B', 'Series C', 'Series D'],
legend: {
position: 'left'
}
}
var chart = new ApexCharts(document.querySelector('#chart'), options)
chart.render()
총결산
뷰에 apexchart의 그리기 방법으로 두 가지 방법이 실렸지만 개인은 다음과 같이 구분되어 사용되었다.
gon이라는 gem이 있기 때문에 루비->Javascript에 데이터를 보내는 것은 거의 힘들지 않기 때문에 반영하는 방법2를 사용하는 것을 권장합니다.
참고 자료
Reference
이 문제에 관하여([Rails] 5분 후 ApexChart.js 가져오기 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/syukan3/items/aa741df278f628087a3c텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)