시각화: 원형 차트

개요

SVG 또는 VML을 사용하여 브라우저 내에서 렌더링되는 원형 차트입니다. 슬라이스에 마우스를 가져가면 도움말을 표시합니다.

예

 
<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['corechart']});
      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 options = {
          title: 'My Daily Activities'
        };

        var chart = new google.visualization.PieChart(document.getElementById('piechart'));

        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="piechart" style="width: 900px; height: 500px;"></div>
  </body>
</html>

3D 원형 차트 만들기

is3D 옵션을 true로 설정하면 원형 차트에는 3차원이 있는 것처럼 그려집니다.

is3D는 기본적으로 false이므로 여기서는 true로 명시적으로 설정합니다. 

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load("current", {packages:["corechart"]});
      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 options = {
          title: 'My Daily Activities',
          is3D: true,
        };

        var chart = new google.visualization.PieChart(document.getElementById('piechart_3d'));
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="piechart_3d" style="width: 900px; height: 500px;"></div>
  </body>
</html>

도넛 차트 만들기

도넛 차트는 가운데에 구멍이 있는 원형 차트입니다. pieHole 옵션을 사용하여 도넛 차트를 만들 수 있습니다.

pieHole 옵션은 구멍과 차트 사이의 반경에 해당하는 0과 1 사이의 숫자로 설정해야 합니다. 0.4와 0.6 사이의 숫자는 대부분의 차트에서 가장 잘 표시됩니다. 1 이상의 값은 무시되며, 0으로 설정하면 문제가 발생하지 않습니다.

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load("current", {packages:["corechart"]});
      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 options = {
          title: 'My Daily Activities',
          pieHole: 0.4,
        };

        var chart = new google.visualization.PieChart(document.getElementById('donutchart'));
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="donutchart" style="width: 900px; height: 500px;"></div>
  </body>
</html>

pieHole와 is3D 옵션을 결합할 수 없습니다. 그러면 pieHole가 무시됩니다.

Google 차트에서는 라벨을 슬라이스의 중앙에 최대한 가깝게 배치하려고 합니다. 슬라이스가 하나뿐인 도넛 차트가 있으면 슬라이스의 중심이 도넛 구멍에 들어갈 수 있습니다. 이 경우 라벨의 색상을 변경하세요.
옵션
        var options = {
          pieHole: 0.5,
          pieSliceTextStyle: {
            color: 'black',
          },
          legend: 'none'
        };
전체 HTML
<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {

        var data = google.visualization.arrayToDataTable([
          ['Effort', 'Amount given'],
          ['My all',     100],
        ]);

        var options = {
          pieHole: 0.5,
          pieSliceTextStyle: {
            color: 'black',
          },
          legend: 'none'
        };

        var chart = new google.visualization.PieChart(document.getElementById('donut_single'));
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="donut_single" style="width: 900px; height: 500px;"></div>
  </body>
</html>

원형 차트 회전

기본적으로 원형 차트는 수직을 가리키는 첫 번째 슬라이스의 왼쪽 가장자리로 시작합니다. pieStartAngle 옵션을 사용하여 이를 변경할 수 있습니다.

여기서는 pieStartAngle: 100 옵션을 사용하여 차트를 시계 방향으로 100도 회전합니다. (이는 '이탈리아' 라벨이 슬라이스에 딱 맞게 들어가기 때문입니다.)

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load("current", {packages:["corechart"]});
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Language', 'Speakers (in millions)'],
          ['German',  5.85],
          ['French',  1.66],
          ['Italian', 0.316],
          ['Romansh', 0.0791]
        ]);

      var options = {
        legend: 'none',
        pieSliceText: 'label',
        title: 'Swiss Language Use (100 degree rotation)',
        pieStartAngle: 100,
      };

        var chart = new google.visualization.PieChart(document.getElementById('piechart'));
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="piechart" style="width: 900px; height: 500px;"></div>
  </body>
</html>

슬라이스 폭발

slices 옵션의 offset 속성을 사용하여 원형 차트 조각을 나머지 차트와 구분할 수 있습니다.

슬라이스를 분리하려면 slices 객체를 만들고 0과 1 사이의 적절한 슬라이스 번호를 offset에 할당합니다. 아래에서는 슬라이스 4(구자라트), 12 (마라타), 14 (오리야어), 15 (펀자브)에 점진적으로 더 큰 오프셋을 할당합니다. 

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load("current", {packages:["corechart"]});
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Language', 'Speakers (in millions)'],
          ['Assamese', 13], ['Bengali', 83], ['Bodo', 1.4],
          ['Dogri', 2.3], ['Gujarati', 46], ['Hindi', 300],
          ['Kannada', 38], ['Kashmiri', 5.5], ['Konkani', 5],
          ['Maithili', 20], ['Malayalam', 33], ['Manipuri', 1.5],
          ['Marathi', 72], ['Nepali', 2.9], ['Oriya', 33],
          ['Punjabi', 29], ['Sanskrit', 0.01], ['Santhali', 6.5],
          ['Sindhi', 2.5], ['Tamil', 61], ['Telugu', 74], ['Urdu', 52]
        ]);

        var options = {
          title: 'Indian Language Use',
          legend: 'none',
          pieSliceText: 'label',
          slices: {  4: {offset: 0.2},
                    12: {offset: 0.3},
                    14: {offset: 0.4},
                    15: {offset: 0.5},
          },
        };

        var chart = new google.visualization.PieChart(document.getElementById('piechart'));
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="piechart" style="width: 900px; height: 500px;"></div>
  </body>
</html>

슬라이스 삭제

슬라이스를 생략하려면 색상을 'transparent'로 변경합니다.

또한 pieStartAngle를 사용하여 차트를 135도 회전하고 pieSliceText을 사용하여 슬라이스에서 텍스트를 삭제했으며 tooltip.trigger를 사용하여 도움말을 사용 중지했습니다.

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load("current", {packages:["corechart"]});
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Pac Man', 'Percentage'],
          ['', 75],
          ['', 25]
        ]);

        var options = {
          legend: 'none',
          pieSliceText: 'none',
          pieStartAngle: 135,
          tooltip: { trigger: 'none' },
          slices: {
            0: { color: 'yellow' },
            1: { color: 'transparent' }
          }
        };

        var chart = new google.visualization.PieChart(document.getElementById('pacman'));
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="pacman" style="width: 900px; height: 500px;"></div>
  </body>
</html>

슬라이스 공개 상태 기준

값을 원형 차트 슬라이스의 임곗값으로 개별적으로 렌더링할 수 있습니다. 이 값은 차트의 비율에 해당합니다 (전체 차트가 값 1임). 이 임곗값을 전체의 백분율로 설정하려면 원하는 백분율을 100으로 나눕니다. 임곗값이 20%인 경우 값은 0.2입니다. 

sliceVisibilityThreshold: 5/8 // This is equivalent to 0.625 or 62.5% of the chart.

이 임곗값보다 작은 모든 슬라이스는 단일 '기타' 슬라이스로 결합되고 기준 아래의 모든 슬라이스의 값이 합산됩니다. 

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

    function drawChart() {

      var data = new google.visualization.DataTable();
      data.addColumn('string', 'Pizza');
      data.addColumn('number', 'Populartiy');
      data.addRows([
        ['Pepperoni', 33],
        ['Hawaiian', 26],
        ['Mushroom', 22],
        ['Sausage', 10], // Below limit.
        ['Anchovies', 9] // Below limit.
      ]);

      var options = {
        title: 'Popularity of Types of Pizza',
        sliceVisibilityThreshold: .2
      };

      var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
      chart.draw(data, options);
    }

로드 중

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

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

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

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

데이터 형식

행: 표의 각 행은 슬라이스를 나타냅니다.

열:

  열 0 열 1 ... N열 (선택사항)
목적: 슬라이스 라벨 슬라이스 값 ... 선택적 역할
데이터 유형: 문자열 숫자 ...
역할: 나만의 데이터 ...
열 역할(선택사항): 없음 없음 ...

구성 옵션

이름
backgroundColor

차트의 기본 영역 배경색입니다. 단순 HTML 색상 문자열(예: 'red' 또는 '#00cc00')이거나 다음 속성이 있는 객체일 수 있습니다.

유형: 문자열 또는 객체
기본값: 'white'
배경 색상.획

차트 테두리의 색상으로, HTML 색상 문자열입니다.

유형: 문자열
기본값: '#666'
배경 색상.획 너비

테두리 너비(픽셀)입니다.

유형: 숫자
기본값: 0
배경 색상.채우기

차트 채우기 색상이 HTML 색상 문자열로 표시됩니다.

유형: 문자열
기본값: 'white'
차트 영역

차트 영역의 위치와 크기를 구성하기 위한 구성원이 있는 객체입니다 (축과 범례를 제외하고 차트 자체가 그려짐). 숫자 또는 숫자 다음에 %가 오는 두 가지 형식이 지원됩니다. 간단한 숫자는 픽셀 단위 값, 숫자 다음에 % 가 백분율로 표시됩니다. 예: chartArea:{left:20,top:0,width:'50%',height:'75%'}

유형: 객체
기본값: null
차트 영역 배경 색상
차트 영역 배경 색상입니다. 문자열은 16진수 문자열(예: '#fdc') 또는 영어 색상 이름이어야 합니다. 객체가 사용될 때 다음 속성을 제공할 수 있습니다.
  • stroke: 16진수 문자열 또는 영어 색상 이름으로 제공되는 색상입니다.
  • strokeWidth: 제공되는 경우 지정된 너비의 차트 영역 주위에 테두리를 그립니다 (stroke의 색상도 사용).
유형: 문자열 또는 객체
기본값: 'white'
차트 영역

왼쪽 테두리에서 차트를 그리는 거리

유형: 숫자 또는 문자열
기본값: 자동
차트 영역.top

위쪽 테두리에서 차트를 그리는 거리

유형: 숫자 또는 문자열
기본값: 자동
차트 영역 너비

차트 영역 너비

유형: 숫자 또는 문자열
기본값: 자동
차트 영역

차트 영역 높이를 나타냅니다.

유형: 숫자 또는 문자열
기본값: 자동
색상

차트 요소에 사용할 색상입니다. 문자열 배열입니다. 여기서 각 요소는 HTML 색상 문자열입니다(예: colors:['red','#004411']).

유형: 문자열 배열
기본값: 기본 색상
enableInteractivity

차트에서 사용자 기반 이벤트를 발생시키는지 또는 사용자 상호작용에 반응하는지 여부 false인 경우 차트에서 '선택' 또는 다른 상호작용 기반 이벤트가 발생하지는 않지만 (준비 또는 오류 이벤트는 발생함) 마우스 오버 텍스트가 표시되거나 사용자 입력에 따라 변경되지 않습니다.

유형: 부울
기본값: true
fontSize

차트에 있는 모든 텍스트의 기본 글꼴 크기(픽셀)입니다. 특정 차트 요소의 속성을 사용하여 재정의할 수 있습니다.

유형: 숫자
기본값: 자동
글꼴 이름

차트의 모든 텍스트의 기본 글꼴입니다. 특정 차트 요소의 속성을 사용하여 재정의할 수 있습니다.

유형: 문자열
기본값: 'Arial'
강제 IFrame

인라인 프레임 내에 차트를 그립니다. IE8에서는 이 옵션이 무시되며 모든 IE8 차트는 i-frame에 그려집니다.

유형: 부울
기본값: false
높이

차트의 높이(픽셀)입니다.

유형: 숫자
기본값: 값을 포함하는 요소의 높이
is3D

true인 경우 3차원 차트를 표시합니다.

유형: 부울
기본값: false
전설

범례의 다양한 측면을 구성하는 구성원이 있는 객체입니다. 이 객체의 속성을 지정하려면 다음과 같이 객체 리터럴 표기법을 사용하면 됩니다. 

{position: 'top', textStyle: {color: 'blue', fontSize: 16}}
유형: 객체
기본값: null
범례.alignment

범례의 정렬 다음 중 하나일 수 있습니다.

  • 'start' - 범례에 할당된 영역의 시작 부분에 맞춰 정렬됩니다.
  • 'center' - 범례에 할당된 영역을 중심으로 합니다.
  • 'end' - 범례에 할당된 영역의 끝 부분에 맞춰 정렬됩니다.

시작, 가운데, 끝은 범례의 스타일(세로 또는 가로)을 기준으로 합니다. 예를 들어 '오른쪽' 범례에서 '시작'과 '종료'는 각각 상단과 하단에 있고, '상단' 범례의 경우 '시작'과 '종료'는 영역의 왼쪽과 오른쪽에 있습니다.

기본값은 범례의 위치에 따라 다릅니다. '하단' 범례의 기본값은 '가운데'이고 다른 범례의 기본값은 '시작'입니다.

유형: 문자열
기본값: 자동
범례.position

범례의 위치입니다. 다음 중 하나일 수 있습니다.

  • '하단' - 차트 아래에 범례를 표시합니다.
  • 'labeled' - 슬라이스를 데이터 값에 연결하는 선을 그립니다.
  • 'left' - 차트의 왼쪽 범례를 표시합니다.
  • 'none' - 범례를 표시하지 않습니다.
  • 'right' - 차트의 오른쪽 범례를 표시합니다.
  • 'top' - 차트 위에 범례를 표시합니다.
유형: 문자열
기본값: '오른쪽'
범례.maxLines

범례의 최대 행 수입니다. 범례에 선을 추가하려면 이 값을 1보다 큰 수로 설정하세요. 참고: 렌더링된 실제 선 수를 결정하는 데 사용되는 정확한 로직은 여전히 유동적입니다.

이 옵션은 현재 범례가 '위'에 있는 경우에만 작동합니다.

유형: 숫자
기본값: 1
범례.textStyle

범례 텍스트 스타일을 지정하는 객체입니다. 객체의 형식은 다음과 같습니다.

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }

color는 HTML 색상 문자열(예: 'red' 또는 '#00cc00')이 될 수 있습니다. fontName 및 fontSize도 참고하세요.

유형: 객체
기본값: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
파이 홀

0에서 1 사이의 값인 경우 도넛 차트를 표시합니다. 구멍 반지름이 차트 반경의 number와 같게 됩니다.

유형: 숫자
기본값: 0
원형 원형 슬라이스 테두리 색상

슬라이스 테두리의 색상입니다. 차트가 2차원인 경우에만 적용됩니다.

유형: 문자열
기본값: 'white'
파이 슬라이스 텍스트

슬라이스에 표시되는 텍스트 콘텐츠입니다. 다음 중 하나일 수 있습니다.

  • 'percentage' - 전체 크기 대비 슬라이스 크기의 비율입니다.
  • 'value' - slice의 양적 값
  • 'label' - 슬라이스의 이름입니다.
  • 'none' - 텍스트가 표시되지 않습니다.
유형: 문자열
기본값: 'percentage'
파이 슬라이스 텍스트 스타일

슬라이스 텍스트 스타일을 지정하는 객체입니다. 객체의 형식은 다음과 같습니다.

{color: <string>, fontName: <string>, fontSize: <number>}

color는 HTML 색상 문자열(예: 'red' 또는 '#00cc00')이 될 수 있습니다. fontName 및 fontSize도 참고하세요.

유형: 객체
기본값: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
파이 시작각

차트를 회전할 각도입니다. 기본값인 0를 사용하면 첫 번째 슬라이스의 가장 왼쪽 가장자리가 바로 위쪽을 향합니다.

유형: 숫자
기본값: 0
역카테고리

true인 경우 슬라이스를 시계 반대 방향으로 그립니다. 기본값은 시계 방향으로 그리는 것입니다.

유형: 부울
기본값: false
파이 레지듀스 슬라이스 색상

sliceVisibilityThreshold 아래의 모든 슬라이스를 포함하는 조합 슬라이스의 색상입니다.

유형: 문자열
기본값: '#ccc'
pieResidueSliceLabel

sliceVisibilityThreshold 아래의 모든 슬라이스를 포함하는 조합 슬라이스의 라벨입니다.

유형: 문자열
기본값: '기타'
슬라이스

객체의 배열로, 각각은 원형에서 해당하는 슬라이스의 형식을 설명합니다. 슬라이스의 기본값을 사용하려면 빈 객체 (예: {}). 슬라이스 또는 값이 지정되지 않은 경우 전역 값이 사용됩니다. 각 객체는 다음 속성을 지원합니다.

  • color - 이 슬라이스에 사용할 색상입니다. 유효한 HTML 색상 문자열을 지정하세요.
  • offset - 슬라이스를 원형의 나머지 부분과 구분하는 정도이며 0.0(전혀 아님)에서 1.0 (파이의 반경)까지입니다.
  • textStyle - 이 슬라이스의 전역 pieSliceTextStyle를 재정의합니다.

객체의 배열을 각 조각에 지정된 순서대로 적용할 수도 있고, 각 하위 항목에 적용할 슬라이스를 나타내는 숫자 키를 지정할 수도 있습니다. 예를 들어 다음 두 선언은 동일하며 첫 번째 슬라이스는 검은색으로 선언하고 네 번째 슬라이스는 빨간색으로 선언합니다. 

slices: [{color: 'black'}, {}, {}, {color: 'red'}]
slices: {0: {color: 'black'}, 3: {color: 'red'}}
유형: 객체 배열 또는 중첩된 객체가 있는 객체
기본값: {}
sliceVisibilityThreshold

파이의 분수 값으로, 슬라이스가 개별적으로 표시되지 않습니다. 이 임곗값을 통과하지 못한 모든 슬라이스는 단일 '기타' 슬라이스로 결합되고 크기는 모든 크기의 합계입니다. 기본적으로 0.5도보다 작은 슬라이스는 개별적으로 표시되지 않습니다. 

// Slices less than 25% of the pie will be
// combined into an "Other" slice.
sliceVisibilityThreshold: .25
유형: 숫자
기본값: 0.5/360, 1/720 또는 .0014
title

차트 위에 표시할 텍스트입니다.

유형: 문자열
기본값: 제목 없음
제목 텍스트 스타일

제목 텍스트 스타일을 지정하는 객체입니다. 객체의 형식은 다음과 같습니다.

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }

color는 HTML 색상 문자열(예: 'red' 또는 '#00cc00')이 될 수 있습니다. fontName 및 fontSize도 참고하세요.

유형: 객체
기본값: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
도움말

다양한 도움말 요소를 구성하기 위한 구성원이 있는 객체입니다. 이 객체의 속성을 지정하려면 다음과 같이 객체 리터럴 표기법을 사용하면 됩니다. 

{textStyle: {color: '#FF0000'}, showColorCode: true}
유형: 객체
기본값: null
tooltip.ignoreBounds

true로 설정하면 모든 면에 차트의 경계를 벗어나는 도움말 그리기가 허용됩니다.

참고: 이 내용은 HTML 도움말에만 적용됩니다. SVG 도움말에 따라 사용 설정하면 차트 경계 외부의 모든 오버플로가 잘립니다. 자세한 내용은 도움말 콘텐츠 맞춤설정을 참조하세요.

유형: 부울
기본값: false
tooltip.isHtml

true로 설정하면 SVG 렌더링이 아닌 HTML 렌더링 도움말을 사용합니다. 자세한 내용은 도움말 콘텐츠 맞춤설정을 참조하세요.

참고: 도움말 열 데이터 역할을 통한 HTML 도움말 콘텐츠 맞춤설정은 풍선형 차트 시각화에서 지원되지 않습니다.

유형: 부울
기본값: false
tooltip.showColorCode

true인 경우 도움말에서 슬라이스 정보 옆에 색상이 있는 정사각형을 표시합니다.

유형: 부울
기본값: false
tooltip.text

사용자가 파이 슬라이스에 마우스를 가져가면 표시할 정보 지원되는 값은 다음과 같습니다.

  • '둘 다' - [기본값] 슬라이스의 절댓값과 전체 슬라이스의 비율을 모두 표시합니다.
  • 'value' - 슬라이스의 절댓값만 표시합니다.
  • 'percentage' - 슬라이스로 표시된 전체 백분율만 표시합니다.
유형: 문자열
기본값: '둘 다'
tooltip.textStyle

도움말 텍스트 스타일을 지정하는 객체입니다. 객체의 형식은 다음과 같습니다.

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }

color는 HTML 색상 문자열(예: 'red' 또는 '#00cc00')이 될 수 있습니다. fontName 및 fontSize도 참고하세요.

유형: 객체
기본값: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
tooltip.trigger

도움말을 표시하는 사용자 상호작용:

  • 'focus' - 사용자가 요소 위로 마우스를 가져가면 도움말이 표시됩니다.
  • 'none' - 도움말이 표시되지 않습니다.
  • '선택' - 사용자가 요소를 선택하면 도움말이 표시됩니다.
유형: 문자열
기본값: '포커스'
너비

차트의 너비(픽셀)입니다.

유형: 숫자
기본값: 포함하는 요소의 너비

방법

메서드
draw(data, options)

차트를 그립니다. 차트는 ready 이벤트가 실행된 후에만 추가 메서드 호출을 허용합니다. Extended description

반환 유형: 없음
getAction(actionID)

요청된 actionID가 있는 도움말 작업 객체를 반환합니다.

반환 유형: 객체
getBoundingBox(id)

차트 요소 id의 왼쪽, 상단, 너비, 높이를 포함하는 객체를 반환합니다. id의 형식은 아직 문서화되지 않았지만 (이벤트 핸들러의 반환 값임), 다음은 몇 가지 예입니다.

var cli = chart.getChartLayoutInterface();

차트 영역의 높이
cli.getBoundingBox('chartarea').height
막대 그래프 또는 열 차트의 첫 번째 계열에 있는 세 번째 막대의 너비
cli.getBoundingBox('bar#0#2').width
원형 차트의 다섯 번째 웨지 경계 상자
cli.getBoundingBox('slice#4')
세로 (예: 열) 차트의 차트 데이터 경계 상자:
cli.getBoundingBox('vAxis#0#gridline')
가로 (예: 막대) 차트의 차트 데이터 경계 상자:
cli.getBoundingBox('hAxis#0#gridline')

값은 차트의 컨테이너를 기준으로 합니다. 차트를 그린 후에 이 메서드를 호출하세요.

반환 유형: 객체
getChartAreaBoundingBox()

차트 콘텐츠의 왼쪽, 상단, 너비, 높이가 포함된 객체를 반환합니다(라벨 및 범례 제외).

var cli = chart.getChartLayoutInterface();

cli.getChartAreaBoundingBox().left
cli.getChartAreaBoundingBox().top
cli.getChartAreaBoundingBox().height
cli.getChartAreaBoundingBox().width

값은 차트의 컨테이너를 기준으로 합니다. 차트를 그린 후에 이 메서드를 호출하세요.

반환 유형: 객체
getChartLayoutInterface()

차트 및 그 요소의 화면 내 게재위치 정보가 포함된 객체를 반환합니다.

반환된 객체에서 다음 메서드를 호출할 수 있습니다.

  • getBoundingBox
  • getChartAreaBoundingBox
  • getHAxisValue
  • getVAxisValue
  • getXLocation
  • getYLocation

차트를 그린 후에 이 메서드를 호출하세요.

반환 유형: 객체
getHAxisValue(xPosition, optional_axis_index)

차트 컨테이너의 왼쪽 가장자리로부터의 픽셀 오프셋인 xPosition에서 수평 데이터 값을 반환합니다. 음수가 될 수 있습니다.

예: chart.getChartLayoutInterface().getHAxisValue(400)

차트를 그린 후에 이 메서드를 호출하세요.

반환 유형: 숫자
getImageURI()

이미지 URI로 직렬화된 차트를 반환합니다.

차트를 그린 후에 이 메서드를 호출하세요.

PNG 차트 인쇄를 참조하세요.

반환 유형: 문자열
getSelection()

선택한 차트 항목의 배열을 반환합니다. 선택 가능한 항목은 슬라이스 및 범례 항목입니다. 이 차트에서는 특정 시점에 하나의 항목만 선택할 수 있습니다. Extended description

반환 유형: 선택 요소의 배열
getVAxisValue(yPosition, optional_axis_index)

차트 컨테이너의 상단 가장자리에서 아래로 내려가는 픽셀 오프셋인 yPosition의 세로 데이터 값을 반환합니다. 음수가 될 수 있습니다.

예: chart.getChartLayoutInterface().getVAxisValue(300)

차트를 그린 후에 이 메서드를 호출하세요.

반환 유형: 숫자
getXLocation(dataValue, optional_axis_index)

차트 컨테이너의 왼쪽 가장자리를 기준으로 dataValue의 픽셀 x 좌표를 반환합니다.

예: chart.getChartLayoutInterface().getXLocation(400)

차트를 그린 후에 이 메서드를 호출하세요.

반환 유형: 숫자
getYLocation(dataValue, optional_axis_index)

차트 컨테이너의 상단 가장자리를 기준으로 한 dataValue의 픽셀 y 좌표를 반환합니다.

예: chart.getChartLayoutInterface().getYLocation(300)

차트를 그린 후에 이 메서드를 호출하세요.

반환 유형: 숫자
removeAction(actionID)

차트에서 요청된 actionID가 있는 도움말 작업을 삭제합니다.

반환 유형: none
setAction(action)

사용자가 작업 텍스트를 클릭할 때 실행할 도움말 작업을 설정합니다.

setAction 메서드는 객체를 작업 매개변수로 사용합니다. 이 객체는 설정 중인 작업의 ID인 id, 작업의 도움말에 표시되어야 하는 텍스트, action, 사용자가 작업 텍스트를 클릭할 때 실행해야 하는 함수 등 3가지 속성을 지정해야 합니다.

모든 팁 작업은 차트의 draw() 메서드를 호출하기 전에 설정해야 합니다. 확장된 설명.

반환 유형: none
setSelection()

지정된 차트 항목을 선택합니다. 이전 선택을 취소합니다. 선택 가능한 항목은 슬라이스 및 범례 항목입니다. 이 차트에서는 한 번에 하나의 항목만 선택할 수 있습니다. Extended description

반환 유형: 없음
clearChart()

차트를 삭제하고 할당된 모든 리소스를 해제합니다.

반환 유형: 없음

이벤트

이러한 이벤트를 사용하는 방법에 관한 자세한 내용은 기본 상호작용, 이벤트 처리, 실행 이벤트를 참고하세요.

이름
click

사용자가 차트 내부를 클릭하면 실행됩니다. 제목, 데이터 요소, 범례 항목, 축, 격자선, 라벨을 클릭하는 시점을 식별하는 데 사용할 수 있습니다.

속성: targetID
error

차트를 렌더링하려고 할 때 오류가 발생하면 실행됩니다.

속성: ID, 메시지
onmouseover

사용자가 시각적 개체 위로 마우스를 가져가면 시작됩니다. 해당하는 데이터 테이블 요소의 행 및 열 색인을 전달합니다. 슬라이스 또는 범례 항목은 데이터 테이블의 행과 연결됩니다. 열 색인은 null입니다.

속성: 행, 열
onmouseout

사용자가 시각적 항목에서 마우스를 치우면 실행됩니다. 해당하는 데이터 테이블 요소의 행 및 열 색인을 전달합니다. 슬라이스 또는 범례 항목은 데이터 테이블의 행과 연결됩니다. 열 색인은 null입니다.

속성: 행, 열
ready

차트에서 외부 메서드 호출을 사용할 수 있습니다. 차트와 상호작용하고 차트를 그린 후 메서드를 호출하려면 draw 메서드를 호출하기 전에 이 이벤트에 대한 리스너를 설정하고 이벤트가 시작된 후에만 호출해야 합니다.

속성: 없음
select

사용자가 시각적 항목을 클릭하면 시작됩니다. 어떤 항목이 선택되었는지 알아보려면 getSelection()를 호출하세요.

속성: 없음

데이터 정책

모든 코드와 데이터가 브라우저에서 처리되고 렌더링됩니다. 데이터는 서버로 전송되지 않습니다.