시각화: 게이지

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

개요

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':['gauge']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {

        var data = google.visualization.arrayToDataTable([
          ['Label', 'Value'],
          ['Memory', 80],
          ['CPU', 55],
          ['Network', 68]
        ]);

        var options = {
          width: 400, height: 120,
          redFrom: 90, redTo: 100,
          yellowFrom:75, yellowTo: 90,
          minorTicks: 5
        };

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

        chart.draw(data, options);

        setInterval(function() {
          data.setValue(0, 1, 40 + Math.round(60 * Math.random()));
          chart.draw(data, options);
        }, 13000);
        setInterval(function() {
          data.setValue(1, 1, 40 + Math.round(60 * Math.random()));
          chart.draw(data, options);
        }, 5000);
        setInterval(function() {
          data.setValue(2, 1, 60 + Math.round(20 * Math.random()));
          chart.draw(data, options);
        }, 26000);
      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 400px; height: 120px;"></div>
  </body>
</html>

현재 다른 Google 차트처럼 게이지 차트의 제목을 지정할 수 있는 방법은 없습니다. 위의 예에서는 제목을 표시하는 데 간단한 HTML을 사용합니다.

또한 다른 여러 Google 차트에서 사용할 수 있는 animation.startup 옵션은 게이지 차트에서는 사용할 수 없습니다. 시작 애니메이션을 사용하려면 처음에 값을 0으로 설정하여 차트를 그린 다음 애니메이션을 적용할 값으로 다시 그립니다.

로드

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

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

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

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

데이터 형식

각 숫자 값은 게이지로 표시됩니다. 두 가지 대체 데이터 형식이 지원됩니다.

  1. 열 2개 첫 번째 열은 문자열이어야 하며 게이지 라벨을 포함해야 합니다. 두 번째 열은 숫자여야 하며 게이지 값을 포함해야 합니다.
  2. 숫자 열 각 게이지의 라벨은 열의 라벨입니다.

구성 옵션

이름
animation.duration

애니메이션 재생 시간(밀리초)입니다. 자세한 내용은 애니메이션 문서를 참고하세요.

유형: 숫자
기본값: 400
animation.easing

애니메이션에 적용된 이징 함수입니다. 사용할 수 있는 옵션은 다음과 같습니다.

  • 'linear' - 일정한 속도.
  • 'in' - Ease in - 천천히 시작하여 속도를 높입니다.
  • 'out' - Ease out - 빠르게 시작하고 느려집니다.
  • 'inAndOut' - 이즈 인/아웃 - 천천히 시작한 다음 속도를 높인 다음 낮춥니다.
유형: 문자열
기본값: 'linear'
forceIFrame

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

유형: 불리언
기본값: false
greenColor

녹색 섹션에 사용할 색상으로, HTML 색상 표기법으로 표시됩니다.

유형: 문자열
기본값: '#109618'
greenFrom

녹색으로 표시된 범위의 가장 낮은 값입니다.

유형: 숫자
기본값: 없음
greenTo

녹색으로 표시된 범위의 최댓값입니다.

유형: 숫자
기본값: 없음
키

픽셀 단위의 차트 높이입니다.

유형: 숫자
기본값: 컨테이너의 너비
majorTicks

주요 눈금 표시의 라벨입니다. 라벨 수는 모든 게이지의 주요 틱 수를 정의합니다. 기본값은 최소 및 최대 게이지 값의 라벨이 포함된 5개의 주요 틱입니다.

유형: 문자열 배열
기본값: 없음
max

게이지의 최댓값입니다.

유형: 숫자
기본값: 100
분

게이지의 최솟값입니다.

유형: 숫자
기본값: 0
minorTicks

각 메이저 틱 섹션의 마이너 틱 섹션의 수입니다.

유형: 숫자
기본값: 2
redColor

빨간색 섹션에 사용할 색상으로, HTML 색상 표기법으로 표시됩니다.

유형: 문자열
기본값: '#DC3912'
redFrom

빨간색으로 표시된 범위의 가장 낮은 값입니다.

유형: 숫자
기본값: 없음
redTo

빨간색으로 표시된 범위의 최댓값입니다.

유형: 숫자
기본값: 없음
너비

픽셀 단위의 차트 너비입니다.

유형: 숫자
기본값: 컨테이너의 너비
yellowColor

노란색 섹션에 사용할 색상으로, HTML 색상 표기법으로 표시됩니다.

유형: 문자열
기본값: '#FF9900'
yellowFrom

노란색으로 표시된 범위의 가장 낮은 값입니다.

유형: 숫자
기본값: 없음
yellowTo

범위에서 가장 높은 값(노란색으로 표시)입니다.

유형: 숫자
기본값: 없음

메서드

메서드
draw(data, options)

차트를 그립니다.

반환 유형: 없음
clearChart()

차트를 지우고 할당된 리소스를 모두 해제합니다.

반환 유형: 없음

이벤트

트리거된 이벤트가 없습니다.

데이터 정책

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