이 페이지는 Cloud Translation API를 통해 번역되었습니다.

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

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

개요
예
로드 중
데이터 형식
구성 옵션
메서드
이벤트
데이터 정책

개요

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 로깅 정책을 참고하세요.