시각화: 원형 차트 (이미지)

중요: 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:["imagepiechart"]});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Task', 'Hours per Day'],
          ['Work',        11],
          ['Eat',         2],
          ['Commute',     2],
          ['Watch TV',    2],
          ['Sleep',       7]
        ]);

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

        chart.draw(data, {width: 430, height: 240, title: 'My Daily Activities'});
      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 400px; height: 240px;"></div>
  </body>
</html>

로드

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

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

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

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

데이터 형식

열 2개 첫 번째 열은 문자열이어야 하며 슬라이스 라벨을 포함해야 합니다. 두 번째 열은 숫자여야 하며 슬라이스 값을 포함해야 합니다.

구성 옵션

시각화의 draw() 메서드에 전달되는 options 객체의 일부로 다음 옵션을 지정할 수 있습니다.

이름 유형 기본값 설명
backgroundColor 문자열 '#FFFFFF' (흰색) Chart API 색상 형식으로 나타낸 차트의 배경색입니다.
색상 문자열 자동 모든 계열에 사용할 기본 색상을 지정합니다. 각 계열은 지정된 색상의 그라데이션으로 표시됩니다. 색상은 Chart API 색상 형식으로 지정됩니다. colors가 지정되면 무시됩니다.
색상 배열<문자열> 자동 이를 사용하여 각 데이터 계열에 특정 색상을 할당합니다. 색상은 Chart API 색상 형식으로 지정됩니다. 색상 i는 데이터 열 i에 사용되며, 색상보다 데이터 열이 많은 경우 시작 부분까지 래핑합니다. 단일 색상의 변형이 모든 계열에서 허용되는 경우 color 옵션을 대신 사용하세요.
enableEvents boolean false 차트에서 클릭 또는 마우스오버와 같은 사용자 트리거 이벤트를 발생시킵니다. 특정 차트 유형에서만 지원됩니다. 아래의 이벤트를 참고하세요.
키 숫자 컨테이너 높이 픽셀 단위의 차트 높이입니다.
3D boolean false true로 설정하면 3차원 차트를 표시합니다.
labels 문자열 '없음'

슬라이스별로 표시할 라벨(있는 경우)입니다. 다음 값 중에서 선택하세요.

  • 'none' - 라벨이 없습니다.
  • 'value' - 슬라이스 값을 라벨로 사용합니다.
  • 'name' - 슬라이스 이름 (열 이름)을 사용합니다.
범례 문자열 '오른쪽' 차트에서 범례의 위치입니다. 'top', 'bottom', 'left', 'right', 'none' 값 중 하나를 선택하세요.
title 문자열 제목 없음 차트 위에 표시할 텍스트입니다.
너비 숫자 컨테이너 너비 픽셀 단위의 차트 너비입니다.

메서드

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

이벤트

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

데이터 정책

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