시각화: 영역 차트 (이미지)

중요: Google Chart Tools의 이미지 차트 부분은 2012년 4월 20일부로 공식적으로 지원 중단되었습니다. Google의 지원 중단 정책에 따라 계속 사용할 수 있습니다.

  1. 개요
  2. 예
  3. 로드 중
  4. 데이터 형식
  5. 구성 옵션
  6. 메서드
  7. 이벤트
  8. 데이터 정책

개요

Google Charts API를 사용하여 이미지로 렌더링된 영역 차트

예

 
<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load("current", {packages:["imageareachart"]});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {

        var data = google.visualization.arrayToDataTable([
          ['Year', 'Sales', 'Expenses'],
          ['2004',  1000,      400],
          ['2005',  1170,      460],
          ['2006',  660,       1120],
          ['2007',  1030,      540]
        ]);

        var chart = new google.visualization.ImageAreaChart(document.getElementById('chart_div'));

        chart.draw(data, {width: 400, height: 240, min: 300, max: 1400, title: 'Yearly Expenses and Sales'});
      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 400px; height: 240px;"></div>
  </body>
</html>

로드

google.charts.load 패키지 이름은 "imageareachart"입니다. 

  google.charts.load('current', {packages: ['imageareachart']});

시각화의 클래스 이름은 google.visualization.ImageAreaChart입니다. 

  var visualization = new google.visualization.ImageAreaChart(container);

데이터 형식

각 열은 차트의 선을 나타냅니다. 각 항목은 동일한 X축 지점의 Y축 값이며 시각화는 이를 직선으로 연결한 후 선 아래 영역을 채웁니다.

데이터는 0열에서 시작하여 열별로 처리됩니다. 낮은 선을 먼저 그리면 높은 선을 칠하고 아래쪽 선을 숨길 것이기 때문에 가장 높은 선을 먼저 쓴 다음 낮은 선을 작성해야 합니다. 따라서 열 1의 포인트가 열 2보다 높게, 열 2가 열 3보다 높게 만드는 식입니다. 왼쪽 열보다 오른쪽 열의 포인트가 1~2개 더 높으면 아래쪽 선이 부분적으로 가려질 수 있지만 그래도 표시되어야 합니다.

첫 번째 데이터(숫자 또는 문자열일 수 있음)를 제외한 모든 데이터는 숫자 유형이어야 합니다. 첫 번째 열이 문자열 유형이면 첫 번째 열 항목이 X에 라벨로 표시됩니다. 첫 번째 열이 숫자이면 X축 라벨이 표시되지 않습니다. 첫 번째 열을 제외한 모든 열은 숫자여야 합니다. 열 수에는 제한이 없습니다.

구성 옵션

이름 유형 기본값 설명
backgroundColor 문자열 '#FFFFFF' (흰색) Chart API 색상 형식으로 나타낸 차트의 배경색입니다.
색상 배열<문자열> 자동 이를 사용하여 각 데이터 계열에 특정 색상을 할당합니다. 색상은 Chart API 색상 형식으로 지정됩니다. 색상 i는 데이터 열 i에 사용되며, 색상보다 데이터 열이 많은 경우 시작 부분까지 래핑합니다. 단일 색상의 변형이 모든 계열에서 허용되는 경우 color 옵션을 대신 사용하세요.
enableEvents boolean false 차트에서 클릭 또는 마우스오버와 같은 사용자 트리거 이벤트를 발생시킵니다. 특정 차트 유형에서만 지원됩니다. 아래의 이벤트를 참고하세요.
키 숫자 컨테이너 높이 픽셀 단위의 차트 높이입니다.
범례 문자열 '오른쪽' 범례의 위치 및 유형입니다. 상태는 다음 중 하나일 수 있습니다.
  • 'right' - 차트의 오른쪽에 위치.
  • 'left' - 차트의 왼쪽에 있습니다.
  • 'top' - 차트 위
  • 'bottom' - 차트 아래.
  • '없음' - 범례가 표시되지 않습니다.
max 숫자 자동 Y축에 표시할 최댓값입니다.
분 숫자 자동 Y축에 표시할 최소값입니다.
showCategoryLabels boolean true false로 설정하면 카테고리의 라벨 (X축 라벨)이 제거됩니다.
showValueLabels boolean true false로 설정하면 값의 라벨 (Y축 라벨)이 삭제됩니다.
title 문자열 제목 없음 차트 위에 표시할 텍스트입니다.
valueLabelsInterval 숫자 자동 값 축 라벨을 표시할 간격입니다. 예를 들어 min이 0, max이 100, valueLabelsInterval가 20이면 차트는 (0, 20, 40, 60, 80 100)에 축 라벨을 표시합니다.
너비 숫자 컨테이너 너비 픽셀 단위의 차트 너비입니다.

메서드

메서드 반환 유형 설명
draw(data, options) 없음 차트를 그립니다.

이벤트

등록하면 일반 이미지 차트 페이지에 설명된 이벤트를 들을 수 있습니다.

데이터 정책

Chart API 로깅 정책을 참고하세요.