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

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

중요: Google 차트 도구의 이미지 차트 부분은 2012년 4월 20일부로 공식적으로 지원 중단되었습니다. Google의 지원 중단 정책에 따라 계속 작동합니다.

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

개요

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:["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 색상 형식으로 차트의 배경 색상입니다.
색상	문자열	Auto	모든 계열에 사용할 기본 색상을 지정합니다. 각 계열은 지정된 색상의 그라데이션이 됩니다. 색상은 Chart API 색상 형식으로 지정됩니다. `colors`가 지정되면 무시됩니다.
색상	배열<string>	Auto	각 데이터 계열에 특정 색상을 할당하려면 이 속성을 사용합니다. 색상은 Chart API 색상 형식으로 지정됩니다. 색상 i는 데이터 열 i에 사용되며, 색상보다 데이터 열이 많은 경우 처음으로 래핑됩니다. 모든 계열에 단일 색상 변형이 허용되는 경우 `color` 옵션을 대신 사용하세요.
이벤트 사용 설정	boolean	false	차트에서 클릭 또는 마우스오버와 같은 사용자 트리거 이벤트를 발생시킵니다. 특정 차트 유형에만 지원됩니다. 아래의 이벤트를 참고하세요.
높이	숫자	컨테이너 높이	차트의 높이(픽셀)입니다.
is3D	boolean	false	true로 설정하면 3차원 차트가 표시됩니다.
labels	문자열	'없음'	각 슬라이스에 표시할 라벨입니다(있는 경우). 다음 값 중에서 선택하세요. 'none' - 라벨이 없습니다. 'value' - 슬라이스 값을 라벨로 사용합니다. 'name' - 슬라이스 이름 (열 이름)을 사용합니다.
전설	문자열	'오른쪽'	차트에서 범례의 위치입니다. '상단', '하단', '왼쪽', '오른쪽', '없음' 값 중 하나를 선택하세요.
title	문자열	제목 없음	차트 위에 표시할 텍스트입니다.
너비	숫자	컨테이너 너비	차트의 너비(픽셀)입니다.

방법

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

이벤트

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

데이터 정책

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