개요
참고: 자바스크립트는 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 |
사용자가 시각적 항목을 클릭하면 실행됩니다. 어떤 항목이 선택되었는지 알아보려면 속성: 없음
|
데이터 정책
브라우저에서 모든 코드와 데이터가 처리되고 렌더링됩니다. 데이터는 서버로 전송되지 않습니다.