시각화: 막대 그래프 (이미지)

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

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

개요

Google 차트 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:["imagebarchart"]});
      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.ImageBarChart(document.getElementById('chart_div'));

        chart.draw(data, {width: 400, height: 240, min: 0});
      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 400px; height: 240px;"></div>
  </body>
</html>

로드

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

  google.charts.load("current", {packages: [[]"imagebarchart"]});

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

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

데이터 형식

첫 번째 열은 문자열이어야 하며 카테고리 라벨을 포함해야 합니다. 다음에 오는 열의 수에는 제한이 없으며 모두 숫자여야 합니다. 각 열은 막대 집합으로 표시됩니다. 데이터 테이블에 숫자 열이 두 개 이상 있으면 한 행의 값이 누적 막대로 표시됩니다.

구성 옵션

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

메서드

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

이벤트

일반 이미지 차트 페이지에 설명된 이벤트를 듣기 위해 등록할 수 있습니다.

데이터 정책

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