캘린더 차트

개요

참고: 자바스크립트는 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.yearLabelcalendar.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

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 색상 문자열입니다(예: colorAxis: {colors:['red','#004411']}). 2개 이상의 값이 있어야 합니다. 그라데이션에는 모든 값과 계산된 중간 값이 포함되며, 첫 번째 색상이 가장 작은 값, 마지막 색상이 가장 높은 값입니다.

Type: 색상 문자열의 배열
기본값: null
colorAxis.maxValue

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

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

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

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

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

유형: 숫자 배열
기본값: null
forceIFrame

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

유형: 불리언
기본값: false

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

유형: 숫자
기본값: 포함하는 요소의 높이
noDataPattern

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

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

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

참고: 도움말 열 데이터 역할을 통한 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()를 호출하세요.

속성: 없음

데이터 정책

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