[Rails] 5분 후 ApexChart.js 가져오기 방법

개시하다

저는 Rails에 Apexchart를 도입해 보았지만 쓰기 좋지만 일본어 보도가 없고 침투되지 않았기 때문에 보급 활동으로 보급했으면 좋겠습니다.

ApexChart.js 소개

그래프 라이브러리.같은 도서관 카트.js 등이 있습니다.

https://apexcharts.com/javascript-chart-demos/

명령하다

// 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

# 今回紹介する 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)

Javascript로 그리는 방법(반영하는 방법2)

뷰에 직접 쓰기 (반영하는 방법 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()