페이지를 구현하다 보면, 개발한 기술과 노력에 대비하여 큰 응답을 못 받는 경우가 종종 있다.

이러한 경우 주로 구현의 결과물을 ‘잘 보여주지 않는’ 경우가 대다수이다.
이번 구현기에서는 결과물을 ‘잘 보여줄 수 있는’ 방법인 시각화 중 간단하고 효과가 좋은 그래프(chart)를 구현해보기로 한다.

 

 

Chart 구현해보기

 

 

그래프를 그릴 수 있는 flowcharts, google charts 등의 다양한 api 중 highcharts를 이용하여 구현을 해보았다.

Highcharts의 차트 종류는 Highcharts 데모에서 확인이 가능하다.

https://www.highcharts.com/demo

 

원하는 모양의 차트를 클릭한 후 EDIT IN JSFIDDLE을 클릭하게 되면
HTML, CSS, JAVASCRIPT의 선언 방법을 알 수 있다.

 

본 구현기에서는 Basic Line을 구현해보기로 한다.

 

Highcharts를 사용하기 위해서는 highchart.js Install이 필요하다.

1.  사이트에 설치 후 사용

1) https://www.highcharts.com/download에서 Highcharts를 다운로드를 진행한다.
2) HTML

<script type="다운로드디렉토리/highcharts-4.2.5/js/highcharts.js"></script>
<script type="다운로드디렉토리/highcharts-4.2.5/js/modules/exporting.js"></script>

 

2. HIGHCHART CDN 사용 방식

 

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src=" https://code.highcharts.com/modules/exporting.js"></script>

 

3. API 사용 방식

 

HTML 내에 차트 컨테이너를 선언한다. (차트가 렌더링 되는 위치이다.)

<!-- JSP에서는 차트가 그려질 div를 선언한다. -->
<div id="container"></div>

 

CSS에서는 차트의 스타일을 선언한다.

#container {
    min-width: 310px;
    max-width: 800px;
    height: 400px;
    margin: 0 auto
}

 

JAVASCRIPIT에는 div에 그려질 차트를 구현한다.

Highcharts.chart('container', {

    title: {
        text: 'Solar Employment Growth by Sector, 2010-2016'
    },

    subtitle: {
        text: 'Source: thesolarfoundation.com'
    },

    yAxis: {
        title: {
            text: 'Number of Employees'
        }
    },
    legend: {
        layout: 'vertical',
        align: 'right',
        verticalAlign: 'middle'
    },

    plotOptions: {
        series: {
            pointStart: 2010
        }
    },

    series: [{
        name: 'Installation',
        data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
    }, {
        name: 'Manufacturing',
        data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]
    }, {
        name: 'Sales & Distribution',
        data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]
    }, {
        name: 'Project Development',
        data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227]
    }, {
        name: 'Other',
        data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]
    }]
});

 

EDIT IN JSFIDDLE에 설명 되어있는 방식대로 진행하게 되면
 
원하는 차트를 구할 수 있고,
자신이 원하는 차트를 그리기 위해서는 JAVASCRIPT의 option들을 수정하여 그릴 수 있다.

 

 

위와 같이 간단한 시각화를 이용하여 자신의 개발 결과물이 좋은 응답을 받을 수 있길 바란다.