개요
VegaChart는 대화형 시각화 디자인을 생성, 저장, 공유하기 위한 선언적 언어인 Vega 시각화 문법을 사용하여 만들 수 있는 다양한 시각화 중 하나입니다. Vega를 사용하면 시각화의 시각적 모양과 상호작용 동작을 JSON 형식으로 설명하고 캔버스 또는 SVG를 사용하여 웹 기반 뷰를 생성할 수 있습니다.
VegaChart를 그릴 때는 옵션 내에 Vega 시각화 문법으로 차트를 만드는 방법을 지정해야 합니다. 아래에 이러한 사양의 몇 가지 예시가 포함되어 있으며 VegaChart 예시 페이지에서 몇 가지 예시를 더 확인할 수 있습니다.
참고: Google Charts VegaChart는 Vega JSON 사양( 예시 갤러리의 모든 항목 포함)으로 지정할 수 있는 모든 Vega 차트를 그릴 수 있지만, Vega API를 호출해야 하는 추가 기능은 아직 사용할 수 없습니다.
간단한 예(막대 그래프)
다음은 막대 그래프를 그리는 VegaChart의 간단한 예입니다. (원본 예시, 상세 튜토리얼, Vega 차트 편집기의 막대 그래프를 참조하세요.)
이는 Google 차트에서 막대 그래프를 생성하는 또 다른 방법을 나타내지만, 다른 막대 및 열 차트의 모든 기능을 이 VegaChart를 기반으로 새로운 구현에 통합할 계획입니다.
이 예에서 'data' 옵션은 다음으로 대체됩니다. 그리기 호출에서 제공된 'datatable'을 'table'이라는 다른 데이터 객체의 '소스'로 사용하고 'table'은 Vega 사양의 나머지 부분에 사용됩니다.
'data': [{'name': 'table', 'source': 'datatable'}],
<html>
<head>
<script src='https://www.gstatic.com/charts/loader.js'></script>
<script>
google.charts.load('upcoming', {'packages': ['vegachart']}).then(drawChart);
function drawChart() {
const dataTable = new google.visualization.DataTable();
dataTable.addColumn({type: 'string', 'id': 'category'});
dataTable.addColumn({type: 'number', 'id': 'amount'});
dataTable.addRows([
['A', 28],
['B', 55],
['C', 43],
['D', 91],
['E', 81],
['F', 53],
['G', 19],
['H', 87],
]);
const options = {
"vega": {
"$schema": "https://vega.github.io/schema/vega/v4.json",
"width": 500,
"height": 200,
"padding": 5,
'data': [{'name': 'table', 'source': 'datatable'}],
"signals": [
{
"name": "tooltip",
"value": {},
"on": [
{"events": "rect:mouseover", "update": "datum"},
{"events": "rect:mouseout", "update": "{}"}
]
}
],
"scales": [
{
"name": "xscale",
"type": "band",
"domain": {"data": "table", "field": "category"},
"range": "width",
"padding": 0.05,
"round": true
},
{
"name": "yscale",
"domain": {"data": "table", "field": "amount"},
"nice": true,
"range": "height"
}
],
"axes": [
{ "orient": "bottom", "scale": "xscale" },
{ "orient": "left", "scale": "yscale" }
],
"marks": [
{
"type": "rect",
"from": {"data":"table"},
"encode": {
"enter": {
"x": {"scale": "xscale", "field": "category"},
"width": {"scale": "xscale", "band": 1},
"y": {"scale": "yscale", "field": "amount"},
"y2": {"scale": "yscale", "value": 0}
},
"update": {
"fill": {"value": "steelblue"}
},
"hover": {
"fill": {"value": "red"}
}
}
},
{
"type": "text",
"encode": {
"enter": {
"align": {"value": "center"},
"baseline": {"value": "bottom"},
"fill": {"value": "#333"}
},
"update": {
"x": {"scale": "xscale", "signal": "tooltip.category", "band": 0.5},
"y": {"scale": "yscale", "signal": "tooltip.amount", "offset": -2},
"text": {"signal": "tooltip.amount"},
"fillOpacity": [
{"test": "datum === tooltip", "value": 0},
{"value": 1}
]
}
}
}
]
}
};
const chart = new google.visualization.VegaChart(document.getElementById('chart-div'));
chart.draw(dataTable, options);
}
</script>
</head>
<body>
<div id="chart-div" style="width: 700px; height: 250px;"></div>
</body>
</html>
로드
google.charts.load 패키지 이름은 "vegachart"입니다.
google.charts.load("current", {packages: ["vegachart"]});
시각화의 클래스 이름은 google.visualization.VegaChart입니다.
var visualization = new google.visualization.VegaChart(container);
데이터 형식
다른 Google 차트와 매우 유사한 방식으로 DataTable (또는 DataView)을 사용하여 데이터를 VegaChart에 전달할 수 있습니다. 주요 차이점은 VegaChart는 열의 순서에 의존하여 사용 방법을 결정하는 대신 지정한 특정 Vega 시각화에 예상되는 것과 동일한 각 열의 ID를 사용한다는 것입니다.
예를 들어 다음 DataTable은 'category' 및 'amount'에 대한 ID가 있는 열로 생성되며 'vega' 옵션 내에 동일한 ID가 사용되어 이러한 열을 참조합니다.
const dataTable = new google.visualization.DataTable();
dataTable.addColumn({type: 'string', 'id': 'category'});
dataTable.addColumn({type: 'number', 'id': 'amount'});
dataTable.addRows([
['A', 28],
['B', 55],
['C', 43],
]);
const options = {
'vega': {
...
// Here we create the Vega data object named 'datatable',
// which will be passed in via the draw() call with a DataTable.
'data': {'name': 'datatable'},
'scales': [
{
'name': 'yscale',
// Here is an example of how to use the 'amount' field from 'datatable'.
'domain': {'data': 'datatable', 'field': 'amount'},
}
]
}
};
const chart = new google.visualization.VegaChart(
document.getElementById('chart-div'));
chart.draw(dataTable, options);
// A DataTable is required, but it may be empty.
const dataTable = new google.visualization.DataTable();
const options = {
'vega': {
// Here the data is specified inline in the Vega specification.
"data": [
{
"name": "table",
"values": [
{"category": "A", "amount": 28},
{"category": "B", "amount": 55},
{"category": "C", "amount": 43},
]
}
],
'scales': [
{
'name': 'yscale',
// Here is how Vega normally uses the 'amount' field from 'table'.
"domain": {"data": "table", "field": "category"},
}
]
}
};
const chart = new google.visualization.VegaChart(
document.getElementById('chart-div'));
chart.draw(dataTable, options);
그러나 이러한 방법으로 DataTable을 하나만 VegaChart에 전달할 수 있지만 일부 Vega 차트에는 데이터 테이블이 두 개 이상 필요합니다. 이 제한사항은 향후 Google 차트의 출시 버전에서 해결될 예정입니다.
그때까지는 사용해야 하는 추가 데이터를 'vega' 'data' 옵션에서 인라인 처리하거나 URL에서 로드하여 지정할 수 있습니다.
두 가지 모두의 예는 아래에서 확인할 수 있습니다.
구성 옵션
| 이름 | |
|---|---|
| chartArea |
차트 영역의 위치와 크기를 구성하는 구성원이 포함된 객체입니다 (축과 범례를 제외하고 차트 자체가 그려지는 곳). 숫자 또는 숫자 뒤에 %가 오는
두 가지 형식이 지원됩니다. 단순한 숫자는 픽셀 단위 값이고 숫자 다음에 % 가 오는
백분율입니다. 예: 유형: 객체
기본값: null
|
| chartArea.bottom |
아래쪽 테두리에서 차트를 그리는 거리입니다. 유형: 숫자 또는 문자열
기본값: auto
|
| chartArea.left |
왼쪽 테두리에서 차트를 그리는 거리입니다. 유형: 숫자 또는 문자열
기본값: auto
|
| chartArea.right |
오른쪽 테두리에서 차트를 그리는 거리입니다. 유형: 숫자 또는 문자열
기본값: auto
|
| chartArea.top |
위쪽 테두리에서 차트를 그리는 거리입니다. 유형: 숫자 또는 문자열
기본값: auto
|
| chartArea.width |
차트 영역 너비입니다. 유형: 숫자 또는 문자열
기본값: auto
|
| chartArea.height |
차트 영역 높이 유형: 숫자 또는 문자열
기본값: auto
|
| 키 |
차트의 높이입니다(단위: 픽셀). 유형: 숫자
기본값: 포함하는 요소의 높이
|
| 너비 |
차트의 너비입니다(단위: 픽셀). 유형: 숫자
기본값: 포함하는 요소의 너비
|
메서드
| 메서드 | |
|---|---|
draw(data, options) |
차트를 그립니다. 차트에서는 반환 유형: 없음
|
getAction(actionID) |
요청된 반환 유형: 객체
|
getBoundingBox(id) |
차트 요소
값은 차트의 컨테이너를 기준으로 합니다. 차트를 그린 후에 이 메서드를 호출합니다. 반환 유형: 객체
|
getChartAreaBoundingBox() |
차트 콘텐츠의 왼쪽, 상단, 너비, 높이를 포함하는 객체를 반환합니다(예: 라벨 및 범례 제외).
값은 차트의 컨테이너를 기준으로 합니다. 차트를 그린 후에 이 메서드를 호출합니다. 반환 유형: 객체
|
getChartLayoutInterface() |
차트 및 요소의 화면 배치에 관한 정보가 포함된 객체를 반환합니다. 반환된 객체에서 다음 메서드를 호출할 수 있습니다.
차트를 그린 후에 이 메서드를 호출합니다. 반환 유형: 객체
|
getHAxisValue(xPosition, optional_axis_index) |
차트 컨테이너의 왼쪽 가장자리로부터의 픽셀 오프셋인 예: 차트를 그린 후에 이 메서드를 호출합니다. 반환 유형: 숫자
|
getImageURI() |
이미지 URI로 직렬화된 차트를 반환합니다. 차트를 그린 후에 이 메서드를 호출합니다. PNG 차트 인쇄를 참조하세요. 반환 유형: 문자열
|
getSelection() |
선택된 차트 항목의 배열을 반환합니다.
이 차트에서는 특정 시점에 하나의 항목만 선택할 수 있습니다.
반환 유형: 선택 요소의 배열
|
getVAxisValue(yPosition, optional_axis_index) |
예: 차트를 그린 후에 이 메서드를 호출합니다. 반환 유형: 숫자
|
getXLocation(dataValue, optional_axis_index) |
차트 컨테이너의 왼쪽 가장자리를 기준으로 예: 차트를 그린 후에 이 메서드를 호출합니다. 반환 유형: 숫자
|
getYLocation(dataValue, optional_axis_index) |
차트 컨테이너의 상단 가장자리를 기준으로 예: 차트를 그린 후에 이 메서드를 호출합니다. 반환 유형: 숫자
|
removeAction(actionID) |
요청된 반환 유형:
none |
setAction(action) |
사용자가 작업 텍스트를 클릭할 때 실행할 도움말 작업을 설정합니다.
차트의 반환 유형:
none |
setSelection() |
지정된 차트 항목을 선택합니다. 이전 선택을 취소합니다.
이 차트에서는 한 번에 하나의 항목만 선택할 수 있습니다.
반환 유형: 없음
|
clearChart() |
차트를 지우고 할당된 리소스를 모두 해제합니다. 반환 유형: 없음
|
이벤트
이러한 이벤트를 사용하는 방법에 관한 자세한 내용은 기본 상호작용, 이벤트 처리, 이벤트 실행을 참고하세요.
| 이름 | |
|---|---|
animationfinish |
전환 애니메이션이 완료되면 실행됩니다. 속성: 없음
|
click |
사용자가 차트 내부를 클릭하면 실행됩니다. 제목, 데이터 요소, 범례 항목, 축, 격자선, 라벨을 언제 클릭했는지 식별하는 데 사용할 수 있습니다. 속성: targetID
|
error |
차트를 렌더링하려고 시도할 때 오류가 발생하면 실행됩니다. 속성: ID, 메시지
|
legendpagination |
사용자가 범례 페이지로 나누기 화살표를 클릭하면 실행됩니다. 0을 기반으로 하는 현재의 범례 페이지 색인과 총 페이지 수를 전달합니다. 속성: currentPageIndex, totalPages
|
onmouseover |
사용자가 시각적 항목 위로 마우스를 가져가면 실행됩니다. 해당 데이터 테이블 요소의 행과 열 색인을 다시 전달합니다. 속성: 행, 열
|
onmouseout |
사용자가 시각적 항목에서 마우스 멀어질 때 실행됩니다. 해당 데이터 테이블 요소의 행과 열 색인을 다시 전달합니다. 속성: 행, 열
|
ready |
차트에서 외부 메서드 호출을 사용할 준비가 되었습니다. 차트와 상호작용하고 차트를 그린 후 메서드를 호출하려면 속성: 없음
|
select |
사용자가 시각적 항목을 클릭하면 실행됩니다. 어떤 항목이 선택되었는지 알아보려면 속성: 없음
|
데이터 정책
브라우저에서 모든 코드와 데이터가 처리되고 렌더링됩니다. 데이터는 서버로 전송되지 않습니다.