React.js - 使い回し可能なChart.jsラッパークラス ref: http://qiita.com/mnishiguchi/items/aeb6231b405051aba85c

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

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

file2.coffee

    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]
      }
    ]

オプション設定例

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
  }

使用例.js.coffee

# "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

棒グラフのデータ構造

    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]
      }
    ]