[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


    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()
    
  • apexchart(pie chart 문서)
  • https://apexcharts.com/javascript-chart-demos/pie-charts/simple-pie-chart/
  • 총결산


    뷰에 apexchart의 그리기 방법으로 두 가지 방법이 실렸지만 개인은 다음과 같이 구분되어 사용되었다.
    gon이라는 gem이 있기 때문에 루비->Javascript에 데이터를 보내는 것은 거의 힘들지 않기 때문에 반영하는 방법2를 사용하는 것을 권장합니다.
  • View에 직접 쓰기 방법(반영 방법1)
  • 프로토타입을 만들 때 등 짧은 시간에 만들려고 하는 경우.
  • Javascript로 그리는 방법(반영하는 방법2)
  • 자세한 규격 등을 정하는데 시간이 걸리는 경우.
  • 참고 자료

  • ApexCharts (Github)
  • https://github.com/apexcharts
  • apexcharts.rb (Github)
  • https://github.com/styd/apexcharts.rb
  • 좋은 웹페이지 즐겨찾기