react下如何用highchart渲染出一个图表?

#container
javascript:
  function chartData(data){
    $("#container").highcharts({
          charts:{
              type:'cloumn'
          },
          title:{
              text:'this is a chart'
          },
          yAxis:{
              title:{
                  text:'something'
              }
          },
          series:data
      })

  }
  $(document).ready(function(){
     $.ajax({
        url:'/mobile/charts/test.json',
        type:'GET',
        async:'json',
        success:function(data){
            chartData(data);
            }
       })
  })

     

正常情况下可以直接 $("#container").highcharts({})这种方式定义表格,从后台获取数据,但是在react情况下,应该怎么定义表格

@Industry = React.createClass
  #静态页面加载完成后调用的方法
  componentDidMount: ->
    this.ajaxGetData()
  #ajax请求数据
  ajaxGetData: ->
    $.ajax
      url:'/mobile/charts/test.json',
      type:'GET',
      async:'json',
    .done @_ajaxSuccess
    .fail @_ajaxFail
  #ajax请求成功
  _ajaxSuccess: (data, textStatus, jqXHR) ->
    @setState
      institution: data
    this.chartData();
  #ajax请求失败
  _ajaxFail: ->
    alert('请求失败！')
  #请求成功后执行的方法
  chartData:(data) ->
    $("#container").highcharts({
          charts:{
              type:'cloumn'
          },
          title:{
              text:'this is a chart'
          },
          yAxis:{
              title:{
                  text:'something'
              }
          },
          series:institution
      })

  render: ->
    <div id="container">
    这里显示图标
    </div>

#test.json
[
  {
    "name":"Amy",
    "data":12
  },
  {
    "name":"Bob",
    "data":13
  },
  {
    "name":"John",
    "data":14
  }
]

不知道上面写的是不是有语法错误,没有报错信息,但是渲染不出来

---

用refs

在div上绑定一个ref,像这样

render: ->
    <div id="container" ref="container">
    这里显示图标
    </div>

之后可以通过@refs.container.getDOMNode()取得这个dom对象

node = @refs.container.getDOMNode()
$(node).highcharts(...)

react文档上有关于refs的具体内容

---

https://github.com/kirjs/react-highcharts，推荐用现成的组件更方便一点。