개요
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 |
사용자가 시각적 항목을 클릭하면 실행됩니다. 어떤 항목이 선택되었는지 알아보려면 속성: 없음
|
데이터 정책
브라우저에서 모든 코드와 데이터가 처리되고 렌더링됩니다. 데이터는 서버로 전송되지 않습니다.