[데이터 시각화] HighCharts를 이용한 서울지역 총 매출금액 총 매출금액(2016-11 ~ 2017-08)

오늘 R Shiny 라이브러리를 사용하다가 여러개의 차트를 띄우려면 많은 작업을 해야 한다는 것을 알고 좌절했는데


HighCharts라는 신기한 jQuery용 차트만드는 라이브러리가 있어서 바로 사용하였다.




=========================CDN=========================

<script src="http://code.highcharts.com/highcharts.js"></script>

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

=========================CDN=========================



=========================jQuery=========================

$(function () { 

    var myChart = Highcharts.chart('container1', {

        chart: {

            type: 'line'

        },

        title: {

            text: '서울지역 총 매출금액(월별)[금액:억원]'

        },

        subtitle: {

            text: 'Modified by 심심한 내일',

            x: -20

        },

        xAxis: {

        title: {

                text: '연도-월'

            },

            categories: ['2016-11', '2016-12', '2017-01', '2017-02', '2017-03', '2017-04', '2017-05', '2017-06', '2017-07', '2017-08']

        },

        yAxis: {

            title: {

                text: '총 매출 금액'

            },

            plotLines: [{

                value: 0,

                width: 1,

                color: '#808080'

            }]

        },

        series: [{

            name: '서울전체',

            data: [14481,15652,17197,16785,14224,16642,16262,16424,16176,14945]

        }],

        

        legend: {

            layout: 'vertical',

            align: 'right',

            verticalAlign: 'middle',

            borderWidth: 0

        },

        tooltip: {

            valueSuffix: '억원'

        }

    });

});

=========================jQuery=========================




=========================JSP, HTML=========================

<body>

<div class="data" id="container1" style="width:1000px; height:100%;"></div>

</body>

=========================JSP, HTML=========================





링크로 들어가면 실제로 어떻게 보이는지 알 수 있다.


https://codepen.io/iesilder/pen/PepvxM


+ Recent posts