개요
참고: 자바스크립트는 0부터 시작하는 개월 수를 계산합니다. 1월은 0일, 2월은 1월, 12월은 11월입니다. 캘린더 차트에 한 달이 다르게 표시되는 것은 바로 그 때문입니다.
캘린더 차트는 장기간(예: 월 또는 연) 동안의 활동을 표시하는 데 사용되는 시각화 기능입니다. 요일에 따라 수량이 어떻게 달라지는지 또는 시간 경과에 따른 추세를 보여줄 때 가장 적합합니다.
캘린더 차트는 향후 Google 차트 버전에서 상당히 수정될 수 있습니다.
캘린더 차트는 사용자의 브라우저에 적합한 SVG 또는 VML을 사용하여 브라우저에서 렌더링됩니다. 모든 Google 차트와 마찬가지로 캘린더 차트는 사용자가 데이터 위로 마우스를 가져가면 도움말을 표시합니다. 기여도가 인정되어야 할 부분: Google의 캘린더 차트는 3일 캘린더 시각화에서 영감을 얻었습니다.
간단한 예
스포츠팀의 관중 수가 시즌 동안 어떻게 변했는지를 표시하려고 한다고 가정해 보겠습니다. 캘린더 차트를 사용하면 밝기를 사용하여 값을 표시하고 추세를 한눈에 볼 수 있습니다.
개별 날짜 위로 마우스를 가져가면 기본 데이터 값을 볼 수 있습니다.
캘린더 차트를 만들려면 calendar
패키지를 로드한 다음 날짜와 값을 위한 열, 이렇게 두 개의 열을 만듭니다. (맞춤 스타일 지정을 위한 세 번째 열(선택사항)은 향후 Google 차트 출시 버전에서 제공될 예정입니다.)
그런 다음 아래와 같이 행을 날짜-값 쌍으로 채웁니다.
<html> <head> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load("current", {packages:["calendar"]}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var dataTable = new google.visualization.DataTable(); dataTable.addColumn({ type: 'date', id: 'Date' }); dataTable.addColumn({ type: 'number', id: 'Won/Loss' }); dataTable.addRows([ [ new Date(2012, 3, 13), 37032 ], [ new Date(2012, 3, 14), 38024 ], [ new Date(2012, 3, 15), 38024 ], [ new Date(2012, 3, 16), 38108 ], [ new Date(2012, 3, 17), 38229 ], // Many rows omitted for brevity. [ new Date(2013, 9, 4), 38177 ], [ new Date(2013, 9, 5), 38705 ], [ new Date(2013, 9, 12), 38210 ], [ new Date(2013, 9, 13), 38029 ], [ new Date(2013, 9, 19), 38823 ], [ new Date(2013, 9, 23), 38345 ], [ new Date(2013, 9, 24), 38436 ], [ new Date(2013, 9, 30), 38447 ] ]); var chart = new google.visualization.Calendar(document.getElementById('calendar_basic')); var options = { title: "Red Sox Attendance", height: 350, }; chart.draw(dataTable, options); } </script> </head> <body> <div id="calendar_basic" style="width: 1000px; height: 350px;"></div> </body> </html>
일
캘린더 차트의 각 정사각형은 하루를 나타냅니다. 현재는 데이터 셀의 색상을 맞춤설정할 수 없지만 다음 버전의 Google 차트에서 변경될 수 있습니다.
데이터 값이 모두 양수이면 색상 범위는 흰색에서 파란색까지이며 가장 깊은 파란색이 가장 높은 값을 나타냅니다. 음수 데이터 값이 있으면 아래와 같이 주황색으로 표시됩니다.
이 캘린더의 코드는 행이 다음과 같다는 점을 제외하면 첫 번째 코드와 비슷합니다.
[ new Date(2013, 9, 4), 10 ], [ new Date(2013, 9, 5), 3 ], [ new Date(2013, 9, 7), -1 ], [ new Date(2013, 9, 8), 2 ], [ new Date(2013, 9, 12), -1 ], [ new Date(2013, 9, 13), 1 ], [ new Date(2013, 9, 15), 1 ], [ new Date(2013, 9, 16), -4 ],
calendar.cellSize
옵션을 사용하여 일 ('셀')의 크기를 변경할 수 있습니다.
여기에서는 calendar.cellSize
를 10으로 변경하여 일수를 줄여 차트 전체를 줄였습니다.
var options = { title: 'Red Sox Attendance', calendar: { cellSize: 10 }, };
데이터 값이 없는 날짜는 noDataPattern
옵션을 사용하여 맞춤설정할 수 있습니다.
여기서 color
을 연한 파란색으로, backgroundColor
를 약간 더 어두운 음영으로 설정합니다.
var options = { title: "Red Sox Attendance", height: 350, noDataPattern: { backgroundColor: '#76a7fa', color: '#a0c3ff' } };
calendar.cellColor
로 셀 테두리 색상, 테두리 너비, 불투명도를 제어할 수 있습니다.
monthOutlineColor
와 구별되는 획 색상을 선택하거나 불투명도를 낮게 선택해야 합니다. 위 차트의 옵션은 다음과 같습니다.
var options = { title: 'Red Sox Attendance', height: 350, calendar: { cellColor: { stroke: '#76a7fa', strokeOpacity: 0.5, strokeWidth: 1, } } };
위 차트에서 특정 날짜에 초점을 맞추면 테두리가 빨간색으로 강조 표시됩니다. calendar.focusedCellColor
옵션을 사용하여 이 동작을 제어할 수 있습니다.
var options = { title: 'Red Sox Attendance', height: 350, calendar: { focusedCellColor: { stroke: '#d3362d', strokeOpacity: 1, strokeWidth: 1, } } };
주
기본적으로 요일은 일요일부터 토요일까지의 첫 글자로 라벨이 지정됩니다.
날짜의 순서를 변경할 수는 없지만 calendar.daysOfWeek
옵션과 함께 사용되는 문자를 변경할 수 있습니다. 또한 calendar.dayOfWeekRightSpace
로 요일과 차트 사이의 패딩을 제어하고 calendar.dayOfWeekLabel
로 텍스트 스타일을 맞춤설정할 수 있습니다.
여기서는 주 라벨의 글꼴을 변경하고 라벨과 차트 데이터 사이에 10픽셀의 패딩을 넣은 다음 월요일에 주를 시작합니다.
var options = { title: 'Red Sox Attendance', height: 350, calendar: { dayOfWeekLabel: { fontName: 'Times-Roman', fontSize: 12, color: '#1a8763', bold: true, italic: true, }, dayOfWeekRightSpace: 10, daysOfWeek: 'DLMMJVS', } };
개월
기본적으로 월은 진한 회색 선으로 식별됩니다. calendar.monthOutlineColor
옵션을 사용하여 테두리를 제어하고 calendar.monthLabel
를 사용하여 라벨 글꼴을 맞춤설정하며 calendar.underMonthSpace
를 사용하여 라벨 패딩을 조정할 수 있습니다.
라벨 글꼴을 진한 빨간색 12pt Times-Roman 굵은 기울임꼴로 설정하고 윤곽선을 동일한 색상으로 설정하고 16픽셀의 패딩을 입력합니다. 사용하지 않은 달 윤곽선은 같은 색조의 더 희미한 색상으로 설정됩니다.
var options = { title: 'Red Sox Attendance', height: 350, calendar: { monthLabel: { fontName: 'Times-Roman', fontSize: 12, color: '#981b48', bold: true, italic: true }, monthOutlineColor: { stroke: '#981b48', strokeOpacity: 0.8, strokeWidth: 2 }, unusedMonthOutlineColor: { stroke: '#bc5679', strokeOpacity: 0.8, strokeWidth: 1 }, underMonthSpace: 16, } };
연도
캘린더 차트의 연도는 항상 차트의 왼쪽 가장자리에 있으며 calendar.yearLabel
및 calendar.underYearSpace
를 사용하여 맞춤설정할 수 있습니다.
연도 글꼴을 진한 녹색 32pt Times-Roman 굵은 기울임꼴로 설정하고 연도 라벨과 차트 하단 사이에 10 픽셀을 추가합니다.
var options = { title: 'Red Sox Attendance', height: 350, calendar: { underYearSpace: 10, // Bottom padding for the year labels. yearLabel: { fontName: 'Times-Roman', fontSize: 32, color: '#1A8763', bold: true, italic: true } } };
로드
google.charts.load
패키지 이름은 "calendar"
입니다.
google.charts.load("current", {packages: ["calendar"]});
시각화의 클래스 이름은 google.visualization.Calendar
입니다.
var visualization = new google.visualization.Calendar(container);
데이터 형식
행: 표의 각 행은 날짜를 나타냅니다.
열:
열 0 | 열 1 | ... | N열 (선택사항) | |
---|---|---|---|---|
목적: | 날짜 | 값 | ... | 역할(선택사항) |
데이터 유형: | date, datetime 또는 timeofday | 숫자 | ... | |
역할: | 도메인 | 데이터 | ... | |
열 역할(선택사항): | None |
None |
... |
구성 옵션
이름 | |
---|---|
calendar.cellColor |
var options = { calendar: { cellColor: { stroke: 'red', // Color the border of the squares. strokeOpacity: 0.5, // Make the borders half transparent. strokeWidth: 2 // ...and two pixels thick. } } }; 유형: 객체
기본값:
{ stroke: '#fff', strokeOpacity: 1, strokeWidth: 1 } |
calendar.cellSize |
달력 일 정사각형의 크기: var options = { calendar: { cellSize: 10 } }; 유형: 정수
기본값: 16
|
calendar.dayOfWeekLabel |
차트 상단에 있는 주 라벨의 글꼴 스타일을 설정합니다. var options = { calendar: { dayOfWeekLabel: { fontName: 'Times-Roman', fontSize: 12, color: 'black', bold: false, italic: false } } }; 유형: 객체
기본값:
{ fontName: 'sans-serif', color: '#888', bold: false, italic: false }
|
calendar.dayOfWeekRightSpace |
주 라벨의 오른쪽 가장자리와 차트의 날짜 정사각형 왼쪽 가장자리 사이의 거리입니다. 유형: 정수
기본값: 4
|
calendar.daysOfWeek |
일요일부터 토요일까지 사용할 단일 문자 라벨입니다. 유형: 문자열
기본값:
'SMTWTFS' |
calendar.focusedCellColor |
사용자가 일별 정사각형 위로 마우스를 가져가면 캘린더 차트에서 정사각형이 강조 표시됩니다. var options = { calendar: focusedCellColor: { stroke: 'red', strokeOpacity: 0.8, strokeWidth: 3 } } }; 유형: 객체
기본값:
{ stroke: '#000', strokeOpacity: 1, strokeWidth: 2 } |
calendar.monthLabel |
월 라벨의 스타일입니다. 예: var options = { calendar: { monthLabel: { fontName: 'Times-Roman', fontSize: 16, color: 'green', bold: true, italic: false } } }; 유형: 객체
기본값:
{ fontName: 'sans-serif', color: '#888', bold: false, italic: false }
|
calendar.monthOutlineColor |
데이터 값이 있는 월은 이 스타일에서 테두리를 사용하여 다른 월과 구분됩니다. var options = { calendar: { monthOutlineColor: { stroke: 'blue', strokeOpacity: 0.8, strokeWidth: 2 } } };( calendar.unusedMonthOutlineColor 참조)
유형: 객체
기본값:
{ stroke: '#000', strokeOpacity: 1, strokeWidth: 1 } |
calendar.underMonthSpace |
월 하단 라벨과 날짜의 상단 정사각형 사이의 픽셀 수입니다. var options = { calendar: { underMonthSpace: 12 } }; 유형: 정수
기본값: 6
|
calendar.underYearSpace |
맨 아래 연도 라벨과 차트 하단 사이의 픽셀 수입니다. var options = { calendar: { underYearSpace: 2 } }; 유형: 정수
기본값: 0
|
calendar.unusedMonthOutlineColor |
데이터 값이 없는 달은 이 스타일에서 테두리를 사용하여 다른 달과 구분됩니다. var options = { calendar: { unusedMonthOutlineColor: { stroke: 'yellow', strokeOpacity: 0.8, strokeWidth: 2 } } };( calendar.monthOutlineColor 참조)
유형: 객체
기본값:
{ stroke: '#c9c9c9', strokeOpacity: 1, strokeWidth: 1 }
|
colorAxis |
색상 열 값과 색상 또는 그라데이션 스케일 간의 매핑을 지정하는 객체입니다. 이 객체의 속성을 지정하려면 다음과 같이 객체 리터럴 표기법을 사용하면 됩니다. {minValue: 0, colors: ['#FF0000', '#00FF00']} 유형: 객체
기본값: null
|
colorAxis.colors |
시각화의 값에 할당할 색상입니다. 문자열 배열로, 여기서 각 요소는 HTML 색상 문자열입니다(예: Type: 색상 문자열의 배열
기본값: null
|
colorAxis.maxValue |
있는 경우 차트 색상 데이터의 최댓값을 지정합니다. 이 값 이상의 색상 데이터 값은 유형: 숫자
기본값: 차트 데이터의 색상 열의 최댓값
|
colorAxis.minValue |
있는 경우 차트 색상 데이터의 최솟값을 지정합니다. 이 값 이하의 색상 데이터 값은 유형: 숫자
기본값: 차트 데이터에서 색상 열의 최솟값
|
colorAxis.values |
있는 경우 값이 색상과 연결되는 방식을 제어합니다. 각 값은 유형: 숫자 배열
기본값: null
|
forceIFrame |
인라인 프레임 안에 차트를 그립니다. IE8에서는 이 옵션이 무시되며 모든 IE8 차트가 i-프레임으로 그려집니다. 유형: 불리언
기본값: false
|
키 |
차트의 높이입니다(단위: 픽셀). 유형: 숫자
기본값: 포함하는 요소의 높이
|
noDataPattern |
캘린더 차트는 줄무늬 대각선 패턴을 사용하여 특정 날짜에 데이터가 없음을 나타냅니다. noDataPattern: { backgroundColor: '#76a7fa', color: '#a0c3ff' } 유형: 객체
기본값: null
|
tooltip.isHtml |
HTML 렌더링이 아닌 SVG 렌더링된 도움말을 사용하려면 참고: 도움말 열 데이터 역할을 통한 HTML 도움말 콘텐츠의 맞춤설정은 원형 차트 및 풍선형 차트 시각화에서 지원되지 않습니다. 유형: 불리언
기본값: true
|
너비 |
차트의 너비입니다(단위: 픽셀). 유형: 숫자
기본값: 포함하는 요소의 너비
|
메서드
메서드 | |
---|---|
draw(data, options) |
차트를 그립니다. 차트에서는 반환 유형: 없음
|
getBoundingBox(id) |
차트 요소
값은 차트의 컨테이너를 기준으로 합니다. 차트를 그린 후에 이 메서드를 호출합니다. 반환 유형: 객체
|
getSelection() |
선택된 차트 항목의 배열을 반환합니다.
선택 가능한 개체는 막대, 범례 항목 및 카테고리입니다.
막대는 데이터 테이블의 셀, 열의 범례 항목 (행 색인은 null), 행의 카테고리 (열 색인은 null)에 해당합니다.
이 차트에서는 특정 시점에 하나의 항목만 선택할 수 있습니다.
반환 유형: 선택 요소의 배열
|
setSelection() |
지정된 차트 항목을 선택합니다. 이전 선택을 취소합니다.
선택 가능한 개체는 막대, 범례 항목 및 카테고리입니다.
막대는 데이터 테이블의 셀, 열의 범례 항목 (행 색인은 null), 행의 카테고리 (열 색인은 null)에 해당합니다.
이 차트에서는 한 번에 하나의 항목만 선택할 수 있습니다.
반환 유형: 없음
|
clearChart() |
차트를 지우고 할당된 리소스를 모두 해제합니다. 반환 유형: 없음
|
이벤트
이름 | |
---|---|
error |
차트를 렌더링하려고 시도할 때 오류가 발생하면 실행됩니다. 속성: ID, 메시지
|
onmouseover |
사용자가 시각적 항목 위로 마우스를 가져가면 실행됩니다. 항목의 행 색인과 날짜 값을 다시 전달합니다. 항목의 데이터 테이블 요소가 없는 경우 행 색인에 반환되는 값은 속성: 행, 날짜
|
onmouseout |
사용자가 시각적 항목에서 마우스 멀어질 때 실행됩니다. 항목의 행 색인과 날짜 값을 다시 전달합니다. 항목의 데이터 테이블 요소가 없는 경우 행 색인에 반환되는 값은 속성 행, 날짜
|
ready |
차트에서 외부 메서드 호출을 사용할 준비가 되었습니다. 차트와 상호작용하고 차트를 그린 후 메서드를 호출하려면 속성: 없음
|
select |
사용자가 시각적 항목을 클릭하면 실행됩니다. 어떤 항목이 선택되었는지 알아보려면 속성: 없음
|
데이터 정책
브라우저에서 모든 코드와 데이터가 처리되고 렌더링됩니다. 데이터는 서버로 전송되지 않습니다.