타임라인 js 사용하기

하단의 날짜에 맞게 JSON 형태로 데이터를 담아 나타내는 타임라인을 사용하기 위해

아래의 참고 사이트에서 'timeline-2.9.1.zip' 을 다운받는다.

'timeline-2.9.1.zip' 안에는 타임라인 js 를 사용하기위해 필요한 이미지와, js 파일들이 들어있다. 

예제 :

 http://almende.github.io/chap-links-library/js/timeline/examples/example27_jquery_themeroller.html

참고 사이트 : http://almende.github.io/chap-links-library/timeline.html

'timeline-2.9.1.zip' 에서 내가 필요한 파일들만 골라낸 목록 + image 만 있으면 잘돌아간다!

소스는 예제 페이지에서 '소스 보기'를 이용한다.

간단한 설명을 덧붙이면,, drawVisualization() 라는 함수를 통해 타임라인에 표시할

데이터를 JSON 형태로 담아 보낸다.

* 데이터를 담아 보낼 형식 지정

data = new google.visualization.DataTable();
data.addColumn('datetime', 'start');
data.addColumn('datetime', 'end');
data.addColumn('string', 'content');

​

위에서 정한 형식에 맞게 담으면 끝!

data.addRows([

['시작날짜', '끝난날짜', '컨텐츠'],

.

.

.

]);

끝난 날짜는 공백으로 두면 하루로 설정.

컨텐츠 부분에는 박스의 사이즈나 타이틀, 사용할 이미지 소스가 포함된다.