중요: Google Chart Tools의 이미지 차트 부분은 2012년 4월 20일부로 공식적으로 지원 중단되었습니다. Google의 지원 중단 정책에 따라 계속 사용할 수 있습니다.
개요
일반 이미지 차트는 Google 차트 API에서 생성된 모든 차트의 일반 래퍼입니다. 이 시각화를 사용하려면 Chart API 문서를 읽어 보세요. Chart API 직접 호출의 2K 제한과 달리 이 시각화를 사용하여 최대 16K의 데이터를 전송할 수 있습니다.
모든 데이터는 DataTable 또는 DataView를 사용하여 차트에 전달됩니다. 또한 일부 라벨은 데이터 테이블에서 열로 전달됩니다.
다른 모든 Chart API URL 매개변수 (chd 제외)는 옵션으로 전달됩니다.
작성자: Google
예
다음은 몇 가지 다른 유형의 차트 예입니다.
선 차트
<html>
<head>
<script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script>
<script type='text/javascript'>
google.charts.load("current", {packages:["imagechart"]});
</script>
<script type='text/javascript'>
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var dataTable = new google.visualization.DataTable();
dataTable.addColumn('string');
dataTable.addColumn('number');
dataTable.addColumn('string');
// Row data is [chl, data point, point label]
dataTable.addRows([
['January',40,undefined],
['February',60,'Initial recall'],
['March',60,'Product withdrawn'],
['April',45,undefined],
['May',47,'Relaunch'],
['June',75,undefined],
['July',70,undefined],
['August',72,undefined]
]);
var options = {cht: 'lc', chds:'0,160', annotationColumns:[{column:2, size:12, type:'flag', priority:'high'},]};
var chart = new google.visualization.ImageChart(document.getElementById('line_div'));
chart.draw(dataTable, options);
}
</script>
</head>
<body>
<div id='line_div'></div>
</body>
</html>
세로 막대 그래프
래핑된 막대 그래프에서는 차트를 직접 호출하는 경우와 같이 chxt='x'를 지정할 필요가 없습니다. 축을 지정하지 않으면 일반 이미지 차트가 기본적으로 차트를 올바르게 설정하려고 시도합니다.
<html>
<head>
<script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script>
<script type='text/javascript'>
google.charts.load("current", {packages:["imagechart"]});
</script>
<script type='text/javascript'>
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var dataTable = new google.visualization.DataTable();
dataTable.addColumn('number');
dataTable.addColumn('number');
dataTable.addRows([
[10,50],
[50,60],
[60,100],
[80,40],
[40,20]
]);
var options = {cht: 'bvs', chs: '300x125', colors:['#4D89F9','#C6D9FD'],
chds:'0,160', chxl:'0:|oranges|apples|pears|bananas|kiwis|'};
var chart = new google.visualization.ImageChart(document.getElementById('bar_div'));
chart.draw(dataTable, options);
}
</script>
</head>
<body>
<div id='bar_div'></div>
</body>
</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:["imagechart"]});
</script>
<script type='text/javascript'>
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var dataTable = new google.visualization.DataTable();
dataTable.addColumn('string');
dataTable.addColumn('number');
dataTable.addRows([
['January',12],
['February',8],
['March',3]
]);
var options = {cht: 'p', title: 'Sales per Month', chp: 0.628, chs: '400x200',
colors:['#3399CC','#00FF00','#0000FF']};
var chart = new google.visualization.ImageChart(document.getElementById('pie_div'));
chart.draw(dataTable, options);
}
</script>
</head>
<body>
<div id='pie_div'></div>
</body>
</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:["imagechart"]});
</script>
<script type='text/javascript'>
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var dataTable = new google.visualization.DataTable();
dataTable.addColumn('number');
dataTable.addColumn('number');
dataTable.addRows([
[100,10],
[80,20],
[60,30],
[30,40],
[25,50],
[20,60],
[10,70]
]);
var chart = new google.visualization.ImageChart(document.getElementById('radar_div'));
var options = {cht: 'rs', chco: '00FF00,FF00FF', chg: '25.0,25.0,4.0,4.0', chm: 'B,FF000080,0,1.0,5.0|B,FF990080,1,1.0,5.0',};
chart.draw(dataTable, options);
}
</script>
</head>
<body>
<div id='radar_div'></div>
</body>
</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:["imagechart"]});
</script>
<script type='text/javascript'>
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var dataTable = new google.visualization.DataTable();
dataTable.addColumn('string');
dataTable.addColumn('number');
dataTable.addRows([
['DZ',0],
['EG',50],
['MG',50],
['GM',35],
['KE',100],
['ZA',100]
]);
var options = {cht: 't', chtm: 'africa', chco: '777777,FFC6A5,FF0000', chs: '440x220'};
var chart = new google.visualization.ImageChart(document.getElementById('map_div'));
chart.draw(dataTable, options);
}
</script>
</head>
<body>
<div id='map_div'></div>
</body>
</html>
로드
google.charts.load 패키지 이름은 'imagechart'입니다.
google.charts.load('current', {'packages': ['imagechart']});
시각화의 클래스 이름은 google.visualization.ImageChart입니다.
var visualization = new google.visualization.ImageChart(container_div);
데이터 형식
일반화된 데이터 형식에는 지도 차트용과 기타 모든 차트용, 이렇게 두 가지가 있습니다. 데이터에 지원되는 유일한 숫자 형식은 JavaScript 숫자 유형입니다.
참고 데이터 또는 옵션으로 전달된 문자열 값을 URL 인코딩해서는 안 됩니다.
지도 차트
지도 차트는 두 개의 필수 열이 있는 데이터 표를 사용합니다.
- 첫 번째 열 - [문자열] 국가 또는 주/도 코드
- 두 번째 열 - [숫자] 해당 국가 또는 주의 값입니다.
자세한 내용은 지도 차트 문서를 참고하세요.
지도 외 차트
맵이 아닌 차트는 선택적인 열 두 개 (처음에 하나, 끝에 하나)와 그 사이에 하나 이상의 데이터 열이 있는 데이터 표를 사용합니다.
- 첫 번째 열 - [선택사항, 문자열] 각 항목은 이를 지원하는 차트의 X축 (
chl또는chxl매개변수와 같음)에 사용되는 라벨을 나타냅니다. - 다음 열 - 각각 데이터 계열을 나타내는 숫자 열입니다.
- 마지막 열 - [선택사항, 문자열] 데이터 열 뒤의 문자열 열 개수입니다. 여기서 각 항목은 데이터열을 지원하는 차트의 데이터 포인트 라벨을 나타냅니다. 이 열을 사용하려면
annotationColumns옵션을 지정해야 합니다.
데이터는 차트 유형에 따라 다양한 방식으로 표시됩니다. 차트 문서를 참조하세요.
열 색인 관련 참고사항: 일반 이미지 차트 시각화는 표를 차트 API 서비스로 전송하기 전에 데이터 테이블에서 문자열 열을 삭제합니다. 따라서 이 페이지에 정의된 옵션, 메서드, 이벤트의 열 색인에는 색인 수의 문자열 열이 포함됩니다. 하지만 차트 API 서비스에서 처리하는 모든 옵션 (예: chm 옵션)의 열 색인은 색인 수의 문자열 열을 무시합니다.
구성 옵션
이 시각화에 대해 다음 옵션이 정의됩니다. 시각화의 draw() 메서드에 전달된 옵션 객체에서 정의합니다.
다음 옵션 중 일부는 차트 유형에 따라 지원되지 않을 수 있습니다. 정적 이미지 차트 유형에 대한 문서를 참고하세요. 원하는 Chart API URL 매개변수를 옵션으로 전달할 수 있습니다. 예를 들어 차트 시각화의 URL 매개변수 chg=50,50는 options['chg'] = '50,50'과 같은 방식으로 지정됩니다.
색상 관련 참고사항: colors, color, backgroundColor와 같은 색상 옵션은 Chart API 색상 형식으로 지정됩니다.
이 형식은 투명도를 나타내기 위해 네 번째 16진수(선택사항)를 포함한다는 점을 제외하면 #RRGGBB 형식과 유사합니다. '빨간색', '녹색', '파란색' 등 사람이 읽을 수 있는 색상은 지원되지 않습니다. Chart API 색상 형식에는 선행 # 기호가 포함되지 않지만 일반 이미지 차트 시각화 옵션에서는 #이 있거나 없는 색상 코드를 사용할 수 있습니다.
| 이름 | 유형 | 기본값 | 설명 |
|---|---|---|---|
| annotationColumns | Array<object> | 없음 | 다양한 유형의 차트의 데이터 포인트 라벨. 객체의 배열로, 각 객체는 차트의 한 데이터 포인트에 형식이 지정된 라벨을 할당합니다. 이 옵션은 데이터 포인트를 지원하는 차트에만 사용할 수 있으며 (어떤 데이터 포인트인지 알아보려면 연결된 주제를 참고하세요.) 데이터 테이블에 문자열 라벨 열이 1개 이상 있어야 합니다. 배열의 각 객체에는 다음과 같은 속성이 있습니다.
예 - 이 스니펫은 0열에서 가져온 텍스트로 동일한 행의 2열에 있는 데이터 포인트에 할당된 검은색 12픽셀 텍스트 라벨을 정의합니다. |
| backgroundColor | 문자열 | '#FFFFFF' (흰색) | Chart API 색상 형식으로 나타낸 차트의 배경색입니다. |
| 색상 | 문자열 | 자동 | 모든 계열에 사용할 기본 색상을 지정합니다. 각 계열은 지정된 색상의 그라데이션으로 표시됩니다. 색상은 Chart API 색상 형식으로 지정됩니다.
colors가 지정되면 무시됩니다. |
| 색상 | 배열<문자열> | 자동 | 이를 사용하여 각 데이터 계열에 특정 색상을 할당합니다. 색상은 Chart API 색상 형식으로 지정됩니다.
색상 i는 데이터 열 i에 사용되며, 색상보다 데이터 열이 많은 경우 시작 부분까지 래핑합니다. 단일 색상의 변형이 모든 계열에서 허용되는 경우 color 옵션을 대신 사용하세요. |
| enableEvents | boolean | false | 차트에서 클릭 또는 마우스오버와 같은 사용자 트리거 이벤트를 발생시킵니다. 특정 차트 유형에서만 지원됩니다. 아래의 이벤트를 참고하세요. |
| fill | boolean | false | true인 경우 각 줄 아래의 영역을 채웁니다. 선 차트에서만 사용할 수 있습니다. |
| firstHiddenColumn | 숫자 | 없음 | 데이터 열 색인 나열된 열과 다음에 오는 모든 열은 기본 차트 계열 요소를 그리는 데 (예: 선 차트의 선 또는 막대 그래프의 막대)를 그리는 데 사용되지 않지만 마커 및 기타 주석의 데이터로 사용됩니다. 이 색인 수에는 문자열 열이 포함됩니다. |
| 키 | 숫자 | 200 | 차트의 높이입니다(단위: 픽셀). 이 값이 누락되거나 허용 가능한 범위 내에 있지 않으면 포함하는 요소의 높이가 사용됩니다. 이 높이도 허용 범위를 벗어나면 기본 높이가 사용됩니다. |
| labels | 문자열 | '없음' | [원형 차트만 해당] 슬라이스별로 표시할 라벨(있는 경우)입니다. 다음 값 중에서 선택하세요.
|
| 범례 | 문자열 | '오른쪽' | 차트를 기준으로 차트 범례를 표시할 위치 'top', 'bottom', 'left', 'right', 'none' 중 하나를 지정하세요. 지도 차트와 같이 범례를 포함하지 않는 차트에서는 무시됩니다. |
| max | 숫자 | 최대 데이터 값 | 체중계에 표시되는 최댓값. 원형 차트에서는 무시됩니다. 기본값은 최댓값입니다. 단, 막대 그래프는 예외이며 기본값은 최댓값 데이터 값입니다. 표에 데이터 열이 2개 이상 있으면 막대 그래프의 경우 이 값이 무시됩니다. |
| 분 | 숫자 | 최소 데이터 값 | 체중계에 표시되는 최솟값입니다. 원형 차트에서는 무시됩니다. 기본값은 최솟값입니다. 단, 막대 그래프의 기본값은 0입니다. 테이블에 데이터 열이 2개 이상 있으면 막대 그래프의 경우 이 값이 무시됩니다. |
| showCategoryLabels | boolean | true | 카테고리 (예: 행) 축에 라벨을 표시할지 여부입니다. 선 차트와 막대 그래프에서만 사용할 수 있습니다. |
| showValueLabels | boolean | true | True는 값 축에 라벨을 표시합니다. 선 차트와 막대 그래프에서만 사용할 수 있습니다. |
| singleColumnDisplay | 숫자 | 없음 | 지정된 데이터 열만 렌더링합니다. 이 숫자는 테이블에 대한 0 기반 색인이며, 여기서 0은 첫 번째 데이터 열입니다. 단일 열에 할당된 색상은 모든 열이 렌더링될 때와 동일합니다. 원형 차트 또는 지도 차트와 함께 사용할 수 없습니다. |
| title | 문자열 | 빈 문자열 | 차트 제목입니다. 지정하지 않으면 제목이 표시되지 않습니다. 이에 상응하는 차트 매개변수는 chtt입니다. |
| valueLabelsInterval | 숫자 | 자동 | 값 축 라벨을 표시할 간격입니다. 예를 들어 min이 0, max이 100, valueLabelsInterval가 20이면 차트는 (0, 20, 40, 60, 80 100)에 축 라벨을 표시합니다. |
| 너비 | 숫자 | 400 | 차트의 너비입니다(단위: 픽셀). 이 값이 누락되거나 허용 가능한 범위 내에 있지 않으면 포함하는 요소의 너비가 사용됩니다. 이 너비도 허용 범위를 벗어나면 기본 너비가 사용됩니다. |
메서드
| 메서드 | 반환 유형 | 설명 |
|---|---|---|
draw(data, options) |
없음 | 지도를 그립니다. |
getImageUrl() |
문자열 | 차트를 요청하는 데 사용된 Google 차트 API URL을 반환합니다. 2,000자(영문 기준)를 초과할 수 있습니다. 자세한 내용은 Google 차트 API를 참고하세요. |
이벤트
enableEvents 속성을 true로 설정하면 지원되는 차트에서 아래 표에 나열된 사용자 이벤트에 대한 이벤트가 발생합니다. 이러한 모든 이벤트는 다음과 같은 속성이 있는 event 객체를 반환합니다.
type- 이벤트 유형을 나타내는 문자열입니다.region- 영향을 받는 지역의 ID입니다. 사용 가능한 이름 목록을 보려면 원시 차트 유형에chof=json매개변수를 추가합니다. 자세한 내용은chof=json를 참고하세요.
| 이름 | 설명 | Value 유형 |
|---|---|---|
error |
차트를 렌더링하려고 시도할 때 오류가 발생하면 실행됩니다. | ID, 메시지 |
onmouseover |
사용자가 차트 요소 위로 마우스를 가져가면 실행됩니다. | "mouseover" |
onmouseout |
사용자가 차트 요소에서 마우스를 치우면 실행됩니다. | 'mouseout' |
onclick |
사용자가 차트 요소를 클릭하면 실행됩니다. | "클릭" |
어떤 차트에서 이벤트를 지원하나요?
chof=json 매개변수를 지원하는 모든 차트는 이벤트 발생을 지원합니다(즉, 특수 차트(예: QR 코드)를 제외한 모든 차트).
이벤트 처리 예
다음 예는 마우스 클릭을 기록하는 막대를 보여줍니다.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>
Google Image Events Sample
</title>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {packages: ['imagechart']});
</script>
<script type="text/javascript">
function drawVisualization() {
var dataTable = new google.visualization.DataTable();
dataTable.addColumn('number');
dataTable.addColumn('number');
dataTable.addRows([
[10,50],
[50,60],
[60,100],
[80,40],
[40,20]
]);
var options = {cht: 'bvs', chs: '300x125', colors:['#4D89F9','#C6D9FD'],
chds:'0,160', chxl:'0:|oranges|apples|pears|bananas|kiwis|', enableEvents:true};
var chart = new google.visualization.ImageChart(document.getElementById('visualization'));
chart.draw(dataTable, options);
// Assign event handler
google.visualization.events.addListener(chart, 'onclick', mouseEventHandler);
}
google.charts.setOnLoadCallback(drawVisualization);
// Define an event handler
function mouseEventHandler(event) {
document.getElementById('debugger').innerHTML += "You clicked " + event.region + "<br/>";
}
</script>
</head>
<body style="font-family: Arial;border: 0 none;">
<div id="visualization" style="width: 300px; height: 300px;"></div>
<div id="debugger"></div>
</body>
</html>
데이터 정책
데이터는 Google Chart API 서비스로 전송됩니다.
현지화
이 시각화는 Google 차트 서비스에서 지원하는 모든 현지화를 지원합니다.