캘린더 차트

  1. 개요
  2. 간단한 예
  3. 일
  4. 주
  5. 개월
  6. 연도
  7. 로드
  8. 데이터 형식
  9. 구성 옵션
  10. 메서드
  11. 이벤트
  12. 데이터 정책

개요

참고: 자바스크립트는 0에서 시작되는 월을 계산합니다. 1월은 0, 2월은 1, 12월은 11을 의미합니다. 캘린더 차트가 한 달씩 벗어나는 것은 이러한 이유 때문입니다.

캘린더 차트는 월 또는 연도와 같은 장기간에 걸친 활동을 표시하는 데 사용되는 시각화입니다. 요일에 따라 일부 수량이 어떻게 달라지는지 또는 시간에 따른 추세를 설명하려는 경우에 가장 적합합니다.

향후 Google 차트 출시에서 캘린더 차트에 대한 다양한 업데이트가 진행될 수 있습니다.

캘린더 차트는 SVG 또는 VML을 사용하여 브라우저에서 렌더링되며 이때 사용자의 브라우저에 적합합니다. 모든 Google 차트와 마찬가지로 캘린더 차트에는 사용자가 데이터 위로 마우스를 가져가면 도움말이 표시됩니다. 기여도 부여: Google의 캘린더 차트는 D3 캘린더 시각화에서 영감을 받았습니다.

간단한 예

한 시즌 동안 스포츠팀의 출석률이 어떻게 달라졌는지 표시하려고 한다고 가정하겠습니다. 캘린더 차트를 사용하면 밝기를 사용하여 값을 표시하고 추세를 한눈에 볼 수 있습니다.

개별 날짜 위에 마우스를 가져가면 기본 데이터 값을 확인할 수 있습니다.

캘린더 차트를 만들려면 calendar 패키지를 로드한 다음 날짜 및 값 등 2개의 열을 만듭니다. 맞춤설정된 스타일 지정을 위한 세 번째 열은 선택사항입니다. 향후 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 숫자 ...
역할: 나만의 데이터 ...
열 역할(선택사항):

없음

없음

 ...

 

구성 옵션

이름
calendar.cellColor

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 }
캘린더.요일

주 라벨의 오른쪽 가장자리와 차트 일 정사각형의 왼쪽 가장자리 사이의 거리입니다.

유형: 정수
기본값: 4
calendar.daysOfWeek

일요일부터 토요일까지 사용할 단일 문자 라벨입니다.

유형: 문자열
기본값: 'SMTWTFS'
calendar.focusCellColor

사용자가 하루 종일 정사각형 위에 마우스를 가져가면 (예: 마우스 오버) 캘린더 차트에서 정사각형을 강조표시합니다. 

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.unusedMonthOutline색상

데이터 값이 없는 월은 이 스타일에서 테두리를 사용하여 다른 월과 구분됩니다. 

var options = {
  calendar: {
    unusedMonthOutlineColor: {
      stroke: 'yellow',
      strokeOpacity: 0.8,
      strokeWidth: 2
    }
  }
};
(calendar.monthOutlineColor도 참고하세요.)
유형: 객체
기본값: { stroke: '#c9c9c9', strokeOpacity: 1, strokeWidth: 1 }
색상 축

색상 열 값과 색상 또는 그라데이션 스케일 간의 매핑을 지정하는 객체입니다. 이 객체의 속성을 지정하려면 다음과 같이 객체 리터럴 표기법을 사용하면 됩니다. 

 {minValue: 0,  colors: ['#FF0000', '#00FF00']}
유형: 객체
기본값: null
colorAxis.colors

시각화의 값에 할당할 색상입니다. 문자열 배열입니다. 여기서 각 요소는 HTML 색상 문자열입니다(예: colorAxis: {colors:['red','#004411']}). 값이 2개 이상 있어야 합니다. 경사에는 모든 값과 계산된 중간 값이 포함되며, 첫 번째 색상은 가장 작은 값이고 마지막 색상은 가장 높은 값을 포함합니다.

유형: 색상 문자열 배열
기본값: null
colorAxis.maxValue

있는 경우 차트 색상 데이터의 최댓값을 지정합니다. 이 값 이상의 색상 데이터 값은 colorAxis.colors 범위의 마지막 색상으로 렌더링됩니다.

유형: 숫자
기본값: 차트 데이터의 색상 열 최댓값
colorAxis.minValue

있는 경우 차트 색상 데이터의 최솟값을 지정합니다. 이 값 이하의 색상 데이터 값은 colorAxis.colors 범위의 첫 번째 색상으로 렌더링됩니다.

유형: 숫자
기본값: 차트 데이터의 색상 열 최솟값입니다.
colorAxis.values

있는 경우 값이 색상과 연결되는 방식을 제어합니다. 각 값은 colorAxis.colors 배열의 해당 색상과 연결됩니다. 이 값은 차트 색상 데이터에 적용됩니다. 색상은 여기에 지정된 값의 경사에 따라 수행됩니다. 이 옵션의 값을 지정하지 않는 것은 [minValue, maxValue]를 지정하는 것과 같습니다.

유형: 숫자 배열
기본값: null
강제 IFrame

인라인 프레임 내에 차트를 그립니다. IE8에서는 이 옵션이 무시되며 모든 IE8 차트는 i-frame에 그려집니다.

유형: 부울
기본값: false
높이

차트의 높이(픽셀)입니다.

유형: 숫자
기본값: 값을 포함하는 요소의 높이
데이터 패턴 없음

캘린더 차트는 줄무늬 대각선 패턴을 사용하여 특정 날짜에 관한 데이터가 없음을 나타냅니다. noDataPattern.backgroundColor 및 noDataPattern.color 옵션을 사용하여 그레이 스케일 기본값을 재정의합니다. 예: 

noDataPattern: {
  backgroundColor: '#76a7fa',
  color: '#a0c3ff'
}
유형: 객체
기본값: null
tooltip.isHtml

false로 설정하여 HTML 렌더링이 아닌 SVG 렌더링 도움말을 사용합니다. 자세한 내용은 도움말 콘텐츠 맞춤설정을 참조하세요.

참고: 도움말 열 데이터 역할을 통한 HTML 도움말 콘텐츠 맞춤설정은 원형 차트 및 풍선형 차트 시각화에서 지원되지 않습니다.

유형: 부울
기본값: true
너비

차트의 너비(픽셀)입니다.

유형: 숫자
기본값: 포함하는 요소의 너비

방법

메서드
draw(data, options)

차트를 그립니다. 차트는 ready 이벤트가 실행된 후에만 추가 메서드 호출을 허용합니다. Extended description

반환 유형: 없음
getBoundingBox(id)

차트 요소 id의 왼쪽, 상단, 너비, 높이를 포함하는 객체를 반환합니다. id의 형식은 아직 문서화되지 않았지만 (이벤트 핸들러의 반환 값임), 다음은 몇 가지 예입니다.

var cli = chart.getChartLayoutInterface();

차트 영역의 높이
cli.getBoundingBox('chartarea').height
막대 그래프 또는 열 차트의 첫 번째 계열에 있는 세 번째 막대의 너비
cli.getBoundingBox('bar#0#2').width
원형 차트의 다섯 번째 웨지 경계 상자
cli.getBoundingBox('slice#4')
세로 (예: 열) 차트의 차트 데이터 경계 상자:
cli.getBoundingBox('vAxis#0#gridline')
가로 (예: 막대) 차트의 차트 데이터 경계 상자:
cli.getBoundingBox('hAxis#0#gridline')

값은 차트의 컨테이너를 기준으로 합니다. 차트를 그린 후에 이 메서드를 호출하세요.

반환 유형: 객체
getSelection()

선택한 차트 항목의 배열을 반환합니다. 선택 가능한 항목은 막대, 범례 항목, 카테고리입니다. 막대는 데이터 테이블의 셀, 열에 대한 범례 항목 (행 색인은 null), 행의 카테고리 (열 색인은 null)에 해당합니다. 이 차트에서는 특정 시점에 하나의 항목만 선택할 수 있습니다. Extended description

반환 유형: 선택 요소의 배열
setSelection()

지정된 차트 항목을 선택합니다. 이전 선택을 취소합니다. 선택 가능한 항목은 막대, 범례 항목, 카테고리입니다. 막대는 데이터 테이블의 셀, 열에 대한 범례 항목 (행 색인은 null), 행의 카테고리 (열 색인은 null)에 해당합니다. 이 차트에서는 한 번에 하나의 항목만 선택할 수 있습니다. Extended description

반환 유형: 없음
clearChart()

차트를 삭제하고 할당된 모든 리소스를 해제합니다.

반환 유형: 없음

이벤트

이름
error

차트를 렌더링하려고 할 때 오류가 발생하면 실행됩니다.

속성: ID, 메시지
onmouseover

사용자가 시각적 개체 위로 마우스를 가져가면 시작됩니다. 항목의 행 색인 및 날짜 값을 다시 전달합니다. 항목에 데이터 테이블 요소가 없으면 행 색인에 반환되는 값은 undefined입니다.

속성: 행, 날짜
onmouseout

사용자가 시각적 항목에서 마우스를 치우면 실행됩니다. 항목의 행 색인과 날짜 값을 다시 전달합니다. 항목에 데이터 테이블 요소가 없으면 행 색인에 반환되는 값은 undefined입니다.

속성 행, 날짜
ready

차트에서 외부 메서드 호출을 사용할 수 있습니다. 차트와 상호작용하고 차트를 그린 후 메서드를 호출하려면 draw 메서드를 호출하기 전에 이 이벤트에 대한 리스너를 설정하고 이벤트가 시작된 후에만 호출해야 합니다.

속성: 없음
select

사용자가 시각적 항목을 클릭하면 시작됩니다. 어떤 항목이 선택되었는지 알아보려면 getSelection()를 호출하세요.

속성: 없음

데이터 정책

모든 코드와 데이터가 브라우저에서 처리되고 렌더링됩니다. 데이터는 서버로 전송되지 않습니다.