경위

Chart.js를 React.js의 부품으로 사용하는 간단한 래퍼 클래스를 만들어 보았습니다. 이전에는 "React.js + Chart.js에서 대화형 그래프 작성"에서 시행 착오 한 결과를 리팩토링하여 만든 것입니다. 잘 되었으므로, 꼭 소개하겠습니다.
CoffeeScript 에서 JSX 을 사용하지 않고 썼습니다.

예를 들어, 여러 개의 간단한 그래프가 있고, 사용자가 데이터를 추가·업데이트할 수 있는 어플리케이션에서의 인터랙티브한 그래프에 활용할 수 있다고 생각합니다.

환경

react-js

chart-js

CustomChart 메서드

이 메소드에 그래프의 처리를 정리했습니다.
Chart.js의 그래프 유형 이름을 인수로 전달하면 지정된 그래프 유형의 React.js 파트를 만들 수 있습니다. 예를 들어, "Bar" , "Pie" , "PolarArea" 등이 있습니다. 사용 가능한 그래프 유형에 대해서는 Chart.js 문서을 참조하십시오.

custom_chart.js.coffee

@CustomChart = (chartType) ->

  React.createClass
    getInitialState: ->
      chartInstance: null

    # グラフを書くキャンバスを作る。
    render: ->
      React.DOM.canvas
        ref:   @props.name
        style: { height: @props.height, width: @props.width }

    # 部品がDOMに搭載されたら、グラフを初期化。
    componentDidMount: ->
      @initializeChart()

    # 部品がDOMから外されたら、古いグラフを破壊。
    componentWillUnmount: ->
      @state.chartInstance.destroy() if @state.chartInstance

    # 初期化の処理
    initializeChart: ->
      canvas = React.findDOMNode(@refs[@props.name])
      ctx    = canvas.getContext("2d")
      chart  = new Chart(ctx)[chartType](@props.data, @props.options || {})
      @setState.chartInstance = chart

장점

쉽게 Chart.js 그래프를 React.js에서 사용할 수 있습니다.

부모 파트에서 CustomChart 메서드로 만든 파트에 새 데이터가 전달되면 해당 데이터를 기반으로 그래프가 자동으로 업데이트됩니다.

CustomChart 메소드만으로, 복수의 다른 타입의 그래프 파트를 드라이에 만들 수가 있습니다.

사용 예

부모 부품의 render 메소드 중에서 React.createElement 를 이용해 오브젝트화합니다. props 로 네 항목을 전달해야 합니다.

name : 나중에 캔버스를 찾는 단서가 되므로, 고유의 이름을 붙인다.

data : 그래프용 데이터.

height : 캔버스 높이.

width : 캔버스의 폭.

CustomChart 메서드 사용 예

# "Bar"を引数とすると、Bar Chartを作ります。
React.createElement CustomChart("Bar"),
  name: "barChart"         # 固有の名前
  data: @dataForBarChart() # グラフタイプに対応したデータ構造であること
  height: 200
  width:  400

# "Pie"を引数とすると、Pie Chartを作ります。
React.createElement CustomChart("Pie"),          
  name: "pieChart"
  data: @dataForPieChart()           
  height: 200            
  width:  200

그래프에 전달하는 데이터는 그래프 유형에 따라 데이터 구조가 다릅니다. 예를 들어 "Bar"이면 다음 데이터 구조입니다. 그 외의 그래프 타입의 데이터 구조에 대해서는 Chart.js 문서 를 참조해 주세요.

막대 그래프의 데이터 구조

    labels: ["January", "February", "March", "April", "May", "June", "July"]
    datasets: [
      {
        label:           "My First dataset"
        fillColor:       "rgba(220,220,220,0.5)"
        strokeColor:     "rgba(220,220,220,0.8)"
        highlightFill:   "rgba(220,220,220,0.75)"
        highlightStroke: "rgba(220,220,220,1)"
        data: [65, 59, 80, 81, 56, 55, 40]
      }
      {
        label:           "My Second dataset"
        fillColor:       "rgba(151,187,205,0.5)"
        strokeColor:     "rgba(151,187,205,0.8)"
        highlightFill:   "rgba(151,187,205,0.75)"
        highlightStroke: "rgba(151,187,205,1)"
        data: [28, 48, 40, 19, 86, 27, 90]
      }
    ]

옵션 설정을 세밀하게 하고 싶은 경우에는 다음과 같이 필요한 항목을 설정할 수 있습니다. 그래프 종류에 따라 설정 항목이 다릅니다. 옵션 설정 항목 자세한 내용은 Chart.js 문서을 참조하십시오.

옵션 설정 예

React.createElement CustomChart("Bar"),
  name: "barChart"
  data: @dataForBarChart()
  height: 200
  width:  400
  options: {
    scaleBeginAtZero:         true
    scaleShowGridLines:       true
    scaleGridLineColor:       "rgba(0,0,0,.05)"
    scaleGridLineWidth:       1
    scaleShowHorizontalLines: true
    scaleShowVerticalLines:   true
    barShowStroke:            true
    barStrokeWidth:           2
    barValueSpacing:          5
    barDatasetSpacing:        1
  }

요약

간단하게 동적인 Chart.js 그래프를 React.js 안에서 사용할 수 있다 CustomChart 메소드를 쉐어 했습니다. 이 방법론은 여러가지 그 밖에도 응용할 수 있다고 생각합니다. 이번에 배운 것을 바탕으로 여러가지 부품을 만들어 가려고 생각합니다.

Github

이상입니다.