시각화: 게이지

  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. 숫자 열 수. 각 게이지의 라벨은 열의 라벨입니다.

구성 옵션

이름
애니메이션 재생 시간

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

유형: 숫자
기본값: 400
애니메이션.이징

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

  • 'linear' - 일정한 속도입니다.
  • 'in' - ease in - 천천히 시작하여 속도를 높입니다.
  • '아웃' - 이즈 아웃 - 빠르게 시작하고 속도를 줄입니다.
  • '안드로이드' - 이즈 인/아웃 - 천천히 시작해서 속도를 높이거나 낮춥니다.
유형: 문자열
기본값: 'linear'
강제 IFrame

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

유형: 부울
기본값: false
녹색

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

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

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

유형: 숫자
기본값: 없음
녹색

녹색으로 표시된 범위의 최고 값

유형: 숫자
기본값: 없음
높이

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

유형: 숫자
기본값: 컨테이너의 너비
주요 틱

주요 눈금 표시 라벨 라벨 수는 모든 게이지의 주요 틱 수를 정의합니다. 기본값은 5개의 주요 틱으로, 최솟값 및 최댓값 게이지 값의 라벨이 있습니다.

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

게이지의 최댓값입니다.

유형: 숫자
기본값: 100
min

게이지의 최솟값입니다.

유형: 숫자
기본값: 0
미성년자 틱

각 주요 눈금 섹션의 작은 눈금 섹션 수입니다.

유형: 숫자
기본값: 2
빨간색

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

유형: 문자열
기본값: '#DC3912'
빨간색

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

유형: 숫자
기본값: 없음
빨간색

빨간색으로 표시된 범위에서 가장 높은 값입니다.

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

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

유형: 숫자
기본값: 컨테이너의 너비
노란색

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

유형: 문자열
기본값: '#FF9900'
옐로우

노란색으로 표시된 범위의 최저 값입니다.

유형: 숫자
기본값: 없음
노란색

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

유형: 숫자
기본값: 없음

방법

메서드
draw(data, options)

차트를 그립니다.

반환 유형: 없음
clearChart()

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

반환 유형: 없음

이벤트

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

데이터 정책

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