High Chart

What is High Chart?

• 자바스크립트 기반으로 웹/앱에서 그래프를 지원해주는 라이브러리
• 코드에 직접 넣은 경우 jQuery를 먼저 import 해준 후, high chart 관련 코드를 import 한다.
• npm으로 모듈 설치 가능

High Chart in React

npm install --save highcharts

// in component
import  Highchart  from  'highcharts/highcharts';

componentDidMount() {
 renderChart();
}

renderChart() {
 this.chart = HighChart.chart({
  // 원하는 대로 옵션을 설정하면 된다.
  exporting: {
   enabled: false
  },
  ...
 });
}

render() {
 return(
  <div onClick={this.showData}>
   ...
  </div>
 )

Demo / Practice

high-chart 사이트에 가면 Demo와 JSFIDDLE과 CODEPEN으로 연습할 수 있도록 제공해준다.
옵션이 많다… 아주 많다…
참고로 내가 연습해 본 high-chart
https://codepen.io/anon/pen/YdowOe?editors=0010

reference

• high-chart