Google Chart

Index

• 구글차트 라이브러리
• 그래프 생성
• 기본 생성 템플릿
• 색상 변경 옵션
• 라인 굵기 조절
• 상품 타이틀 위치 변경
• 세로 축 최대 값 정하기
• 가로 축 타이틀 값 임의로 구성하기
• 세로 축 값 양쪽으로 보여주기
• 차트 반응형으로 만들기

---

구글차트 라이브러리

• < script type="text/javascript" src="https://www.gstatic.com/charts/loader.js">

그래프 생성 html

• < div id="chart_div">

기본 생성 템플릿

• addColumn 는 그래프에 표시하고자 하는 항목 명입니다.
• addColumn 개수와 push의 인자 개수가 일치해야 합니다.

        google.charts.load('current', {packages: ['corechart', 'line']});
        google.charts.setOnLoadCallback(drawBasic);
    
        function drawBasic() {

        var data = new google.visualization.DataTable();

        data.addColumn('number', '날짜');
        data.addColumn('number', '상품1');
        data.addColumn('number', '상품2');
        data.addColumn('number', '상품3');
        data.addColumn('number', '상품4');
        data.addColumn('number', '상품5');

        var datas = [];
        for (var i = 0; i < 10; i++) {
            datas.push([i, i * 100, i * 10, i * 20, i * 30, i * 40]);
        }

        data.addRows(datas);

        var options = {


            hAxis: {
                title: '날짜'
            },
            vAxis: {
                title: '금액'
            }
        };

        var chart = new google.visualization.LineChart(document.getElementById('chart_div'));

        chart.draw(data, options);
    }
        

색상 변경 옵션

• 각 라인 마다 색상을 변경할 수 있습니다.

          var options = {
          series: {
            0: { color: '#e2431e' },
            1: { color: '#e7711b' },
            2: { color: '#f1ca3a' },
            3: { color: '#6f9654' },
            4: { color: '#1c91c0' },
            5: { color: '#43459d' },
          }
        };
        

라인 굵기 조절

• lineWidth의 값으로 각 라인의 굵기를 조절할 수 있습니다.

        var options = {
          legend: 'none',
          hAxis: { maxValue: 7 },
          vAxis: { maxValue: 13 },
          series: {
            0: { lineWidth: 1 },
            1: { lineWidth: 2 },
            2: { lineWidth: 4 },
            3: { lineWidth: 8 },
            4: { lineWidth: 16 },
            5: { lineWidth: 24 }
          },
          colors: ['#e2431e', '#d3362d', '#e7711b',
                   '#e49307', '#e49307', '#b9c246']
        };

상품 타이틀 위치 변경

• 상품의 타이틀 명을 위쪽으로 옮깁니다. ( default는 오른쪽 )

        'legend': 'top'

참고자료 : ( Dual-Y Charts ) - classic version

세로 축 최대 값 정하기

• 세로 축 값의 최대치를 지정합니다.

        vAxis: {
                    viewWindow: {
                        max: 30
                    }
                }

가로 축 타이틀 값 임의로 구성하기

• 가로 축 라벨을 임의로 지정할 수 있습니다.
• 기본 설정으로는 짝수 단위로 짤리게 됩니다.

        hAxis: {
            ticks: [new Date(2014, 0), new Date(2014, 1), new Date(2014, 2), new Date(2014, 3),
                new Date(2014, 4),  new Date(2014, 5), new Date(2014, 6), new Date(2014, 7),
                new Date(2014, 8), new Date(2014, 9), new Date(2014, 10), new Date(2014, 11)
            ]
        },
        
        ticks: [0,1,2,3,4,5,6,7,8,9,10,11,12,13,
        14,15,16,17,18,19,20,21,22,23,24]

세로 축 값 양쪽으로 보여주기

• 세로 축의 값을 왼쪽 뿐만 아니라 오른쪽도 보여줍니다.
• X 축 라벨은 개수 가 많아지면 자동으로 모양을 조절합니다. (글자 수가 많아서 넘어가는 것은 숨길 수는 있습니다.)

        series: {
                            0: {targetAxisIndex: 0}
                            1: {targetAxisIndex: 1}
                        },

차트 반응형으로 만들기

            .chart {
              width: 100%; 
              min-height: 450px;
            }
            .row {
              margin:0 !important;
            }                
            
            형태로 div의 width 를 100% 로 변경해준 후
            
            $(window).resize(function(){
              drawChart1();
              drawChart2();
            });
            
            로 resize를 맨끝에 추가해줘야 합니다.