구글 차트 만들어보기
잠든여우
2022. 8. 14. 23:02
 URL 복사

안녕하세요 요즘 통계 부분 개발을 맡아서 하고 있고

차트 라이브러리는 구글 차트를 이용하여 개발하고 있습니다.

 

이 글에서는 중점적으로 다룰 내용은 제가 통계 부분을 개발하면서 알게 된 점,

느낀 점과 간단한 예제를 다뤄보겠습니다.

 

구글 차트에는 여러 가지 차트를 제공해 주고 있는데요.

여러 가지 차트 중에 파이 차트(Pie Chart)를 다뤄볼게요.

 

사실 사이트에 보면 바로 사용할 수 있도록

예제 코드가 많이 있으니 참고하면 좋을 것 같아요.

https://developers.google.com/chart

 

그럼 예제 코드를 살펴볼게요.

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {
        /* 2차원 배열로 만들어서 데이터를 넣어도 됩니다. (아래 주석처리된부분) */
        // var data = google.visualization.arrayToDataTable(data);
        var data = google.visualization.arrayToDataTable([
          ['Task', 'Hours per Day'],
          ['Work',     11],
          ['Eat',      2],
          ['Commute',  2],
          ['Watch TV', 2],
          ['Sleep',    7]
        ]);
        // 'titlt'뿐만 아니라 더 많은 option이 있습니다.
        // 저는 여기서 엄청 고생을했습니다.
        var options = {
          title: 'My Daily Activities'
        };

        /* 
            차트가 그려질 요소에 id값을 정확하게 적어주세요
            HTML에서 유일한 요소에 차트가 그려져야 되니깐 id로 지정하는게 좋아요
        */
        var chart = new google.visualization.PieChart(document.getElementById('piechart'));
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="piechart" style="width: 900px; height: 500px;"></div>
  </body>
</html>

https://jsfiddle.net/api/post/library/pure/

 

위 예제는 구글 차트 사이트에서 제공하는 예제입니다.

option에 들어갈 내용들은 나중에 정리해서 올리도록 하겠습니다.

 

위에 링크를 통해서 실행을 시키면 아래에 사진처럼 차트가 예쁘게 그려집니다.

Pie Chart

나중에 설명하겠지만 차트에 보이는 모든 건 option에서 컨트롤할 수 있어요.

간단하게 오른쪽에 있는 범례를 왼쪽으로 보내려면 legend: 'right'를 추가해 주면 됩니다.

legend에 값은 'bottom', 'labeled', 'left', 'none', 'right', 'top'

legend.position bottom 범례의 위치가 차트 아래쪽으로 배치됩니다.
labeled 조각 데이터 값에 연결하는 선을 그립니다.
left 범례의 위치가 차트 왼쪽으로 배치됩니다.
none 범례가 보이지 않습니다.
right 범례의 위치가 차트 오른쪽에 배치됩니다.
top 범례의 위치가 차트 위쪽에 배치됩니다.

정석으로 범례의 위치를 지정하면 legend: {position: 'right'} 이렇게 작성하면 되고

legend: {position: 'labeled'} 설명은 조금 생소할 수 있어요.

legend: {position: 'labeled'}

위에 사진처럼 각 조각에 연결되는 선이 그려지고, 이것도 css나 js로 충분히 제어가 가능합니다.

(역시 갓 Stack Overflow)

 

제가 구글 차트를 이용하여 개발하면서 느낀 점이 여기서 나옵니다.

구글 차트 옵션을 잘만 사용하면 원하는 차트를 쉽게 그릴 수 있겠다.

라는 생각을 하게 되었습니다.

 

* 구글 차트를 그릴 때 그려질 요소가 완전히 그려지고 그려야 예제에 보이는 예쁜 차트가 그려집니다.

(차트를 그릴 때 요소가 그려지지 않은 상태이면 한쪽이 찌그러진 파이를 볼 수 있습니다..)

저작자표시 변경금지 (새창열림)
유닉스 타임 스탬프 변환하기
잠든여우
2021. 11. 3. 18:27
 URL 복사

날짜 형식으로 많이 사용하는게 많이 있어요.

그 중에 유닉스 타임 스탬프에 대해서 적어봅니다.

유닉스 타임 스탬프란? - 위키백과

1970년 1월 1일 00:00:00부터 현재까지 초로 환산한 수

오늘은 자바스크립트로 유닉스 타임 스탬프으로 변환하고

다시 날짜로 변환하는 코드를 작성할거에요.

 

먼저 간단하게 HTML코드를 작성해줍니다.

 

index.html

<!DOCTYPE html>
<html lang="ko">
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
		<title>유닉스 타임스탬프변환</title>
        
		<!-- jQuery CDN -->
		<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
        
		<!-- CSS -->
		<link href="./assets/css/index.css" rel="stylesheet" />

		<!-- Javascript -->
		<script src="./assets/js/index.js"></script>
	</head>
	<body>
		<div>현재시간: <span id="time_now"></span></div>
		<div>현재 -> 타임스탬프: <span id="conv_timestamp"></span></div>
		<div>타임스탬프 -> 현재: <span id="conv_times"></span></div>
	</body>
</html>

 

Javascript를 좀 더 간편하게 사용하기 위하여

jQuery라는 Javascript 라이브러리를 사용합니다.

 

오늘 글의 핵심!! index.js를 볼게요.

 

index.js

"use strict";
$(function(){
    const today = new Date();

    // 현재시간을 구하는 함수
    const time_now = () => {
        // 년, 월, 일
        let year = today.getFullYear();
        let month = ( '0' + ( today.getMonth() + 1 ) ).slice(-2);
        let day = ( '0' + today.getDate() ).slice(-2);

        // 시, 분, 초
        let hour = ( '0' + today.getHours() ).slice(-2);
        let minutes = ( '0' + today.getMinutes() ).slice(-2);
        let seconds = ( '0' + today.getSeconds() ).slice(-2);

        // 결과값 합치기
        let merge = ''.concat(year, '-', month, '-', day, ' ',
                    hour, ':', minutes , ':', seconds );
        
        // 결과값 리턴
        return merge;
    };

    // 타임스탬프를 구하는 함수
    const timestamp_conv = (time) => {
        let timestamp = new Date(time);
        
        // 결과값 리턴
        return timestamp / 1000;
    };

    // 타임스탬프를 현재시간으로 바꾸는 함수
    const times_conv = (time) => {
        time = new Date( time * 1000 );

        // 년, 월, 일
        let year = time.getFullYear();
        let month = ( '0' + ( time.getMonth() + 1 ) ).slice(-2);
        let day = ( '0' + time.getDate() ).slice(-2);

        // 시, 분, 초
        let hour = ( '0' + time.getHours() ).slice(-2);
        let minutes = ( '0' + time.getMinutes() ).slice(-2);
        let seconds = ( '0' + time.getSeconds() ).slice(-2);        

        // 결과값 합치기
        let merge = ''.concat(year, '-', month, '-', day, ' ',
                    hour, ':', minutes , ':', seconds );
        
        // 결과값 리턴
        return merge;
    };

    let timenow = time_now();
    let timestampconv = timestamp_conv( timenow );
    let timesconv = times_conv( timestampconv );

    $( '#time_now' ).text( timenow );
    $( '#conv_timestamp' ).text( timestampconv );
    $( '#conv_times' ).text( timesconv );
    
});

 

주석과 함께 코드를 보면 좀 더 쉽게 이해할 수 있어요!

코드를 작성한 후 브라우저에서 index.html를 봅니다.

 

아래 사진처럼 화면에 보여요.

위에 HTML 코드만 작성 했을땐 시간이 보이지 않아요.

하지만 index.js에서 시간을 처리한 후 보여줘요.

 

대략적인 코드를 설명해 드릴게요.

위에 "const" 이 부분을  익명 함수 라고합니다.

(const대신 let / var을 사용할 수 있음)

 

먼저 현재 시간을 구합니다. (new Date를 사용)

slice라는 함수를 사용 하는데요

slice을 너무 잘 정리해주신 곳이 있었어요!

(아래에 참고 자료를 참고하세요)

 

현재 시간에 사용될 텍스트를 전부 합칩니다.

합칠때는 concat 이라는 함수를 사용했어요.

 

그리고 리턴값으로 합친 텍스트를 넘겨줍니다.

 

이번에는 타임스탬프를 구하는 함수를 만들게요.

new Date(time)을 이용하여 아까 Date형식으로 바뀌요.

 

그리고 나누기 1000을 하고 몫만 취합니다.

(그럼 초만 남기고 밀리초는 지워짐)

 

이제는 이 타임스탬프 값을 시간으로 바꿔줄게요.

 

이 타임스탬프 데이터를 날짜 형식으로 바꾸는데

여기에 아까 나눈 1000을 곱해줍니다.

(원래 데이터가 되기위하여)

 

그러면 아까 현재 시간을 구할때 썼던 방식으로

똑같이 진행하고 결과값을 리턴해주면 끝!

 

이번 글은 생각보다 짧게 작성 되었네요.

이것으로 이번 글을 마치도록 할게요.

 

참고

1. 자바스크립트 익명 함수 알아보기

2. silce함수 알아보기

게으른여우가 운영중인 웹 개발 커뮤니티 오픈채팅방!

누구나 들어올수 있고 채팅에 제한은 따로없다!

개발자를 준비중인 예비 개발자, 현직 개발자, 개발이 궁금한 사람 등등

웹 개발 커뮤니티 링크를 통해서 쉽게 참여할 수 있어요!

 

저작자표시 변경금지 (새창열림)

+ Recent posts

티스토리툴바