개요
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);
데이터 형식
각 숫자 값은 게이지로 표시됩니다. 두 가지 대체 데이터 형식이 지원됩니다.
- 열 2개 첫 번째 열은 문자열이어야 하며 게이지 라벨을 포함해야 합니다. 두 번째 열은 숫자여야 하며 게이지 값을 포함해야 합니다.
- 숫자 열 각 게이지의 라벨은 열의 라벨입니다.
구성 옵션
이름 | |
---|---|
animation.duration |
애니메이션 재생 시간(밀리초)입니다. 자세한 내용은 애니메이션 문서를 참고하세요. 유형: 숫자
기본값: 400
|
animation.easing |
애니메이션에 적용된 이징 함수입니다. 사용할 수 있는 옵션은 다음과 같습니다.
유형: 문자열
기본값: '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() |
차트를 지우고 할당된 리소스를 모두 해제합니다. 반환 유형: 없음
|
이벤트
트리거된 이벤트가 없습니다.
데이터 정책
브라우저에서 모든 코드와 데이터가 처리되고 렌더링됩니다. 데이터는 서버로 전송되지 않습니다.