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

Question

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

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

Answer 1

用refs

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

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

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

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

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

Answer 2

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

Answer 3

可以参考下 http://www.icafebolger.com/re...

Answer 4

TSX With Hooks

import * as React from "react"; 

import * as Highcharts from "highcharts";

// Props Of <Charts />
export type ChartsProps = {
    renderId: string | number, 
    option: Highcharts.Options
}

// Charts Container 
export function Charts(props: ChartsProps) {
    // Default
    const [renderId, setRenderId] = React.useState(props.renderId);

    // Set New One For Rerender 
    if (props.renderId !== renderId) {
        setRenderId(props.renderId); 
    }

    // Dom Reference 
    const $div = React.useRef(null);
    
    // A Trick To Implement Conditional Rerender 
    React.useEffect(() => {
        const config = getChartsData(items, list);
        config && HightChart.chart($div.current, config);        
    }, [ renderId ])

    return (
        <div ref={ $div } ></div>
    );
}

Usage

import * as React from "react"; 

import { fetchData, processToOption } from "./path/to/utils";

export function App() {
    const [renderId, setRenderId] = React.useState(0);
    const [option, setOption] = React.useState(null);
    
    // Click -> fetchData -> Option -> Set Option -> Rerender  
    const update = () => fecthData()
        .then(processToOption)
        .then(setOption); 
    
    return (
        <div>
            <Charts renderId={ renderId } />
            
            {/* Updating When Clicking */}
            <button onClick={ update }>Fetch New Data</button>
        </div>
    );
}