티스토리 뷰
https://www.highcharts.com/demo/column-drilldown 이 예제를 React에서 만들어 보겠습니다.
1. highcharts 설치하기
create-react-app hello-react-hightcharts
cd hello-react-hightcharts
npm install --save react-highcharts highcharts-drilldowncreate-react-app으로 React 프로잭트를 설치하고, react-highcharts와 highcharts-drilldown 두개의 모듈을 설치합니다.
react-highcharts를 설치하면, react-highcharts와 highchart 두개가 설치됩니다. react-highcharts는 React에서 highcharts 사용을 간편하게 만들어줍니다.
hightcharts-drilldown은 위의 예제에서 그래프 클릭시 상세 그래프가 출력되는 부분을 구현하기 위해 설치되어야 합니다.
2. highcharts 그리기
src/HighCharts/HighCharts.js
import React, { Component } from 'react';
import ReactHighcharts from 'react-highcharts';
// Create the chart
const config = {
chart: {
type: 'column'
},
title: {
text: 'Browser market shares. January, 2015 to May, 2015'
},
subtitle: {
text: 'Click the columns to view versions. Source: <a href="http://netmarketshare.com">netmarketshare.com</a>.'
},
xAxis: {
type: 'category'
},
yAxis: {
title: {
text: 'Total percent market share'
}
},
legend: {
enabled: false
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true,
format: '{point.y:.1f}%'
}
}
},
tooltip: {
headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}%</b> of total<br/>'
},
series: [{
name: 'Brands',
colorByPoint: true,
data: [{
name: 'Microsoft Internet Explorer',
y: 56.33,
drilldown: 'Microsoft Internet Explorer'
}, {
name: 'Chrome',
y: 24.03,
drilldown: 'Chrome'
}, {
name: 'Firefox',
y: 10.38,
drilldown: 'Firefox'
}, {
name: 'Safari',
y: 4.77,
drilldown: 'Safari'
}, {
name: 'Opera',
y: 0.91,
drilldown: 'Opera'
}, {
name: 'Proprietary or Undetectable',
y: 0.2,
drilldown: null
}]
}],
drilldown: {
series: [{
name: 'Microsoft Internet Explorer',
id: 'Microsoft Internet Explorer',
data: [
[
'v11.0',
24.13
],
[
'v8.0',
17.2
],
[
'v9.0',
8.11
],
[
'v10.0',
5.33
],
[
'v6.0',
1.06
],
[
'v7.0',
0.5
]
]
}, {
name: 'Chrome',
id: 'Chrome',
data: [
[
'v40.0',
5
],
[
'v41.0',
4.32
],
[
'v42.0',
3.68
],
[
'v39.0',
2.96
],
[
'v36.0',
2.53
],
[
'v43.0',
1.45
],
[
'v31.0',
1.24
],
[
'v35.0',
0.85
],
[
'v38.0',
0.6
],
[
'v32.0',
0.55
],
[
'v37.0',
0.38
],
[
'v33.0',
0.19
],
[
'v34.0',
0.14
],
[
'v30.0',
0.14
]
]
}, {
name: 'Firefox',
id: 'Firefox',
data: [
[
'v35',
2.76
],
[
'v36',
2.32
],
[
'v37',
2.31
],
[
'v34',
1.27
],
[
'v38',
1.02
],
[
'v31',
0.33
],
[
'v33',
0.22
],
[
'v32',
0.15
]
]
}, {
name: 'Safari',
id: 'Safari',
data: [
[
'v8.0',
2.56
],
[
'v7.1',
0.77
],
[
'v5.1',
0.42
],
[
'v5.0',
0.3
],
[
'v6.1',
0.29
],
[
'v7.0',
0.26
],
[
'v6.2',
0.17
]
]
}, {
name: 'Opera',
id: 'Opera',
data: [
[
'v12.x',
0.34
],
[
'v28',
0.24
],
[
'v27',
0.17
],
[
'v29',
0.16
]
]
}]
}
};
class HighCharts extends Component {
render() {
return (
<div>
<ReactHighcharts config={config}></ReactHighcharts>
</div>
);
}
}
export default HighCharts;- 5~255번 줄, config는 https://www.highcharts.com/demo/column-drilldown에서 가져온 정보 입니다.
- 261번 줄, config 정보를 이용하여 highcharts를 그립니다.
src/App.js
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import HighCharts from './HighCharts/HighCharts';
class App extends Component {
render() {
return (
<div className="App">
<HighCharts />
</div>
);
}
}
export default App;3. 상세 그래프 그리기
그래프 클릭시 나타나는 상세 그래프를 제공하기 위해서 drilldown을 사용해야 합니다.
src/HighCharts/HighCharts.js
import React, { Component } from 'react';
import ReactHighcharts from 'react-highcharts';
import Highcharts from 'highcharts';
import Drilldown from 'highcharts-drilldown';
Drilldown(Highcharts);
// Create the chart
const config = {
chart: {
type: 'column'
},
title: {
text: 'Browser market shares. January, 2015 to May, 2015'
},
subtitle: {
text: 'Click the columns to view versions. Source: <a href="http://netmarketshare.com">netmarketshare.com</a>.'
},
xAxis: {
type: 'category'
},
yAxis: {
title: {
text: 'Total percent market share'
}
},
legend: {
enabled: false
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true,
format: '{point.y:.1f}%'
}
}
},
tooltip: {
headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}%</b> of total<br/>'
},
series: [{
name: 'Brands',
colorByPoint: true,
data: [{
name: 'Microsoft Internet Explorer',
y: 56.33,
drilldown: 'Microsoft Internet Explorer'
}, {
name: 'Chrome',
y: 24.03,
drilldown: 'Chrome'
}, {
name: 'Firefox',
y: 10.38,
drilldown: 'Firefox'
}, {
name: 'Safari',
y: 4.77,
drilldown: 'Safari'
}, {
name: 'Opera',
y: 0.91,
drilldown: 'Opera'
}, {
name: 'Proprietary or Undetectable',
y: 0.2,
drilldown: null
}]
}],
drilldown: {
animation: false,
series: [{
name: 'Microsoft Internet Explorer',
id: 'Microsoft Internet Explorer',
data: [
[
'v11.0',
24.13
],
[
'v8.0',
17.2
],
[
'v9.0',
8.11
],
[
'v10.0',
5.33
],
[
'v6.0',
1.06
],
[
'v7.0',
0.5
]
]
}, {
name: 'Chrome',
id: 'Chrome',
data: [
[
'v40.0',
5
],
[
'v41.0',
4.32
],
[
'v42.0',
3.68
],
[
'v39.0',
2.96
],
[
'v36.0',
2.53
],
[
'v43.0',
1.45
],
[
'v31.0',
1.24
],
[
'v35.0',
0.85
],
[
'v38.0',
0.6
],
[
'v32.0',
0.55
],
[
'v37.0',
0.38
],
[
'v33.0',
0.19
],
[
'v34.0',
0.14
],
[
'v30.0',
0.14
]
]
}, {
name: 'Firefox',
id: 'Firefox',
data: [
[
'v35',
2.76
],
[
'v36',
2.32
],
[
'v37',
2.31
],
[
'v34',
1.27
],
[
'v38',
1.02
],
[
'v31',
0.33
],
[
'v33',
0.22
],
[
'v32',
0.15
]
]
}, {
name: 'Safari',
id: 'Safari',
data: [
[
'v8.0',
2.56
],
[
'v7.1',
0.77
],
[
'v5.1',
0.42
],
[
'v5.0',
0.3
],
[
'v6.1',
0.29
],
[
'v7.0',
0.26
],
[
'v6.2',
0.17
]
]
}, {
name: 'Opera',
id: 'Opera',
data: [
[
'v12.x',
0.34
],
[
'v28',
0.24
],
[
'v27',
0.17
],
[
'v29',
0.16
]
]
}]
}
};
class HighCharts extends Component {
render() {
return (
<div>
<ReactHighcharts config={config}></ReactHighcharts>
</div>
);
}
}
export default HighCharts;- 3~5번 줄, drilldown을 import 하여 highcharts에 drilldown을 적용합니다.
- 75번 줄, 상세 그래프 화면 전환 애니메이션을 제거합니다.
75번 줄과 같이 animation: false로 애니메이션을 제거하지 않으면, 아래 그림과 같이 이전 그래프의 잔제가 나오는 버그가 있어 애니메이션을 제거해야 합니다.
4. 코드 확인
위의 코드는 https://github.com/beomy/hello-react-highcharts에서 확인 할 수 있습니다.
'React.JS' 카테고리의 다른 글
| [React.JS] AJAX 비동기 작업 처리(axios) & Express 서버 연동 (0) | 2017.05.09 |
|---|---|
| [React.JS] Redux 예제로 살펴보기 (12) | 2017.05.04 |
| [React.JS] Redux 소개 (0) | 2017.05.03 |
| [React.JS] 리액트 라우터(react-router v4) (2) | 2017.04.28 |
| [React.JS] Composition VS Inheritance (0) | 2017.04.25 |
댓글
공지사항
최근에 올라온 글