[컴][자바스크립트] Highchart 를 React 에서 사용하기

reactjs 에서 highchart 사용하기

options: React.PropTypes.object,
modules: React.PropTypes.array,

React 에서 Highchart Component 만들기

Highchart 에서 React 에서 사용하는 법에 대한 post 를 해놨다. 글을 ref. 1 에 있으니 읽도록 하자. 여기서는 ref.1 에서 제공한 code 가 jsx 를 사용하지 않아서, 보기가 불편한 관계로, jsx 와 ES2015 를 사용한 모양으로 수정한 code 를 올려놓는다.

개인적으로 afterMount 가 필요해서 넣어놓는다.

import Highcharts from 'highcharts'

import React from 'react'; // export default ()=>{}
import ReactDOM from 'react-dom';

export class HighchartReact extends React.Component{
    constructor(props){
        super(props)
    }

    //Create the div which the chart will be rendered to.
    render() {
      return <div id={this.props.container}/>;
    }
    
    componentDidMount() {
        // Extend Highcharts with modules
        if (this.props.modules) {
            this.props.modules.forEach(function(module) {
                module(Highcharts);
            });
        }
        // Set container which the chart should render to.

        this.chart = new Highcharts[this.props.type || "Chart"](
            this.props.container,
            this.props.options
        );

        // custom function
        if(this.props.afterMount){
          this.props.afterMount
        }
    }

    //Destroy chart before unmount.
    componentWillUnmount(){
        this.chart.destroy();
    }

}

// static 
HighchartReact.defaultProps = {
    
}
HighchartReact.propTypes = {
    container: React.PropTypes.string.isRequired,
    type: React.PropTypes.string,
    title: React.PropTypes.string,
    options: React.PropTypes.object,
    modules: React.PropTypes.array,
    afterMount: React.PropTypes.func,
}


export class TestComponent extends React.Component{
    constructor(props){
        super(props)
    }

    //Create the div which the chart will be rendered to.
    render() {
      return (
        <HighchartReact container='stockChart' type='stockChart'
            options= {{
                rangeSelector: {
                selected: 0
                },
                title: {
                text: 'USD to EUR exchange rate'
                },
                tooltip: {
                style: {
                    width: '200px'
                },
                valueDecimals: 4,
                shared: true
                },
                yAxis: {
                title: {
                    text: 'Exchange rate'
                }
                },
                series: [{
                name: 'USD to EUR',
                data: usdeur,
                id: 'dataseries'
                // the event marker flags
                }, {
                type: 'flags',
                data: [{
                    x: Date.UTC(2015, 5, 8),
                    title: 'C',
                    text: 'Stocks fall on Greece, rate concerns; US dollar dips'
                }, {
                    x: Date.UTC(2015, 5, 12),
                    title: 'D',
                    text: 'Zimbabwe ditches \'worthless\' currency for the US dollar '
                }, {
                    x: Date.UTC(2015, 5, 19),
                    title: 'E',
                    text: 'US Dollar Declines Over the Week on Rate Timeline'
                }, {
                    x: Date.UTC(2015, 5, 26),
                    title: 'F',
                    text: 'Greek Negotiations Take Sharp Turn for Worse, US Dollar set to Rally '
                }, {
                    x: Date.UTC(2015, 5, 29),
                    title: 'G',
                    text: 'Euro records stunning reversal against dollar'
                }, {
                    x: Date.UTC(2015, 5, 30),
                    title: 'H',
                    text: 'Surging US dollar curbs global IT spend'
                }],
                onSeries: 'dataseries',
                shape: 'circlepin',
                width: 16
                }]
            }}/>
      );
    }
}

Reference

Use Highcharts to create charts in React | Highcharts