개요
데이터의 크기는 가로, 세로 축으로 표시되는 경우가 많습니다. 영역 차트, 막대 그래프, 원통형 차트, 열 차트, 콤보 차트, 선 차트, 계단식 영역 차트, 분산형 차트가 여기에 해당합니다.
축이 있는 차트를 만들면 다음과 같은 몇 가지 속성을 맞춤설정할 수 있습니다.
- 이산형과 연속형 비교
- 방향 - hAxis/vAxis.direction 옵션을 사용하여 방향을 맞춤설정할 수 있습니다.
- 라벨 위치 지정 및 스타일 - hAxis/vAxis.textPosition 및 hAxis/vAxis.textStyle 옵션을 사용하여 라벨 위치 지정과 스타일을 맞춤설정할 수 있습니다.
- 축 제목 텍스트 및 스타일 - hAxis/vAxis.title 및 hAxis/vAxis.titleTextStyle 옵션을 사용하여 축 제목 텍스트 및 스타일을 맞춤설정할 수 있습니다.
- 축 배율 - hAxis/vAxis.logScale 또는 hAxis/vAxis.scaleType 옵션을 사용하여 축 배율을 로그 (로그) 배율로 설정할 수 있습니다.
- 축 구성 옵션의 전체 목록은 특정 차트의 문서에서 h축 및 vAxis 옵션을 확인하세요.
용어
장축/단축:
- 기본 축은 차트의 자연스러운 방향을 따르는 축입니다. 선, 영역, 열, 콤보, 계단식 영역, 원통형 차트의 경우 가로축입니다. 막대 그래프의 경우 세로 막대입니다. 분산형 및 원형 차트에는 주축이 없습니다.
- 단 축은 다른 축입니다.
불연속/연속 축:
- 불연속 축에는 카테고리라고 하는 균일한 간격의 값이 유한합니다.
- 연속 축에는 가능한 값이 무한합니다.
이산형과 연속형 비교
차트의 주축은 불연속 또는 연속일 수 있습니다. 불연속 축을 사용하는 경우 각 계열의 데이터 포인트는 행 색인에 따라 축을 가로질러 균일하게 배치됩니다. 연속 축을 사용하는 경우 데이터 포인트는 도메인 값에 따라 배치됩니다.
라벨 지정도 다릅니다. 불연속 축에서는 데이터의 도메인 열에 지정된 카테고리의 이름이 라벨로 사용됩니다. 연속된 축에서는 라벨이 자동으로 생성됩니다. 차트에는 균일한 간격으로 표시된 그리드 선이 표시되며, 각 그리드 선은 나타내는 값에 따라 라벨이 지정됩니다.
다음 축은 항상 연속적입니다.
- 풍선형 차트의 두 축
- 보조 축.
선, 영역, 막대, 열, 원통형 차트 (및 이러한 계열만 포함된 콤보 차트)에서 주축의 유형을 조정할 수 있습니다.
- 불연속 축의 경우 데이터 열 유형을
string로 설정합니다. - 연속된 축의 경우 데이터 열 유형을
number,date,datetime,timeofday중 하나로 설정합니다.
| 불연속 / 연속 | 첫 번째 열 유형 | 예시 |
|---|---|---|
| 개별 값 | 문자열 |
|
| 연속 | 숫자 |
|
| 연속 | date |
|
축 배율
scaleType 옵션을 사용하여 축 배율을 설정할 수 있습니다.
예를 들어 세로축 배율을 로그 배율로 설정하려면 다음 옵션을 사용합니다.
vAxis: {
scaleType: 'log'
}
다음 선 차트는 선형 (표준) 척도와 로그 척도로 세계 인구의 증가 추세를 보여줍니다.
데이터에 0 또는 음수 값이 포함되어 있으면 scaleType: 'mirrorLog' 옵션을 사용하여 점을 표시할 수 있습니다. 미러링 로그 스케일에서 음수로 표시된 값은 숫자의 절댓값 로그를 뺀 값입니다. 0에 가까운 값은 선형 배율로 표시됩니다.
다음 예는 미러 로그 스케일과 선형 스케일로 양수 및 음수 피보나치 수를 보여줍니다.
숫자 형식
hAxis.format 및 vAxis.format로 라벨 번호의 형식을 제어할 수 있습니다. 예를 들어 {hAxis: { format:'#,###%'} }는 값 10, 7.5, 0.5에 대해 '1,000%', '750%', '50%' 값을 표시합니다. 다음 사전 설정 중 하나를 제공할 수도 있습니다.
{format: 'none'}: 서식 없이 숫자를 표시합니다 (예: 8000000){format: 'decimal'}: 천 단위 구분 기호로 숫자를 표시합니다 (예: 8,000,000개){format: 'scientific'}: 과학적 표기법 (예: 8e6){format: 'currency'}: 현지 통화로 숫자를 표시합니다 (예: $8,000,000.00){format: 'percent'}: 숫자를 백분율로 표시합니다 (예: 800,000,000%).{format: 'short'}: 축약된 숫자를 표시합니다 (예: 800만 회){format: 'long'}: 숫자를 전체 단어로 표시합니다 (예: 800만 개)
아래 차트에서 사전 설정된 설정을 선택할 수 있습니다.
다음은 위 차트에 대한 전체 웹페이지입니다.
<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(drawStuff);
function drawStuff() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Country');
data.addColumn('number', 'GDP');
data.addRows([
['US', 16768100],
['China', 9181204],
['Japan', 4898532],
['Germany', 3730261],
['France', 2678455]
]);
var options = {
title: 'GDP of selected countries, in US $millions',
width: 500,
height: 300,
legend: 'none',
bar: {groupWidth: '95%'},
vAxis: { gridlines: { count: 4 } }
};
var chart = new google.visualization.ColumnChart(document.getElementById('number_format_chart'));
chart.draw(data, options);
document.getElementById('format-select').onchange = function() {
options['vAxis']['format'] = this.value;
chart.draw(data, options);
};
};
</script>
</head>
<body>
<select id="format-select">
<option value="">none</option>
<option value="decimal" selected>decimal</option>
<option value="scientific">scientific</option>
<option value="percent">percent</option>
<option value="currency">currency</option>
<option value="short">short</option>
<option value="long">long</option>
</select>
<div id="number_format_chart">
</body>
</html>
텍스트를 사용하는 형식 (예: 8,000,000개를 '800만'으로 렌더링하는 long 형식)을 사용하는 경우 Google 차트 라이브러리를 로드할 때 언어 코드를 지정하여 문자열을 다른 언어로 현지화할 수 있습니다. 예를 들어 '8million'을 러시아어 '8 миллиона'로 변경하려면 라이브러리를 다음과 같이 호출합니다.
<script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script>
<script type='text/javascript'>
google.charts.load('current', {'packages': ['corechart'], 'language': 'ru'});
google.charts.setOnLoadCallback(drawMarkersMap);
</script>