VegaChart

개요

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가 사용되어 이러한 열을 참조합니다.

DataTable 사용
        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);
    
Vega 인라인 데이터 사용
        // 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

차트 영역의 위치와 크기를 구성하는 구성원이 포함된 객체입니다 (축과 범례를 제외하고 차트 자체가 그려지는 곳). 숫자 또는 숫자 뒤에 %가 오는 두 가지 형식이 지원됩니다. 단순한 숫자는 픽셀 단위 값이고 숫자 다음에 % 가 오는 백분율입니다. 예: chartArea:{left:20,top:0,width:'50%',height:'75%'}

유형: 객체
기본값: null
chartArea.bottom

아래쪽 테두리에서 차트를 그리는 거리입니다.

유형: 숫자 또는 문자열
기본값: auto
chartArea.left

왼쪽 테두리에서 차트를 그리는 거리입니다.

유형: 숫자 또는 문자열
기본값: auto
chartArea.right

오른쪽 테두리에서 차트를 그리는 거리입니다.

유형: 숫자 또는 문자열
기본값: auto
chartArea.top

위쪽 테두리에서 차트를 그리는 거리입니다.

유형: 숫자 또는 문자열
기본값: auto
chartArea.width

차트 영역 너비입니다.

유형: 숫자 또는 문자열
기본값: auto
chartArea.height

차트 영역 높이

유형: 숫자 또는 문자열
기본값: auto

차트의 높이입니다(단위: 픽셀).

유형: 숫자
기본값: 포함하는 요소의 높이
너비

차트의 너비입니다(단위: 픽셀).

유형: 숫자
기본값: 포함하는 요소의 너비

메서드

메서드
draw(data, options)

차트를 그립니다. 차트에서는 ready 이벤트가 실행된 후에만 추가 메서드 호출을 허용합니다. Extended description.

반환 유형: 없음
getAction(actionID)

요청된 actionID가 있는 도움말 작업 객체를 반환합니다.

반환 유형: 객체
getBoundingBox(id)

차트 요소 id의 왼쪽, 상단, 너비, 높이를 포함하는 객체를 반환합니다. id의 형식은 아직 문서화되지 않았지만 (이벤트 핸들러의 반환 값임) 다음은 몇 가지 예입니다.

var cli = chart.getChartLayoutInterface();

차트 영역의 높이
cli.getBoundingBox('chartarea').height
막대 또는 열 차트의 첫 번째 계열에서 세 번째 막대의 너비
cli.getBoundingBox('bar#0#2').width
원형 차트 다섯 번째 웨지의 경계 상자
cli.getBoundingBox('slice#4')
세로형 (예: 열) 차트 차트 데이터 경계 상자:
cli.getBoundingBox('vAxis#0#gridline')
가로 (예: 막대) 차트 차트 데이터 경계 상자:
cli.getBoundingBox('hAxis#0#gridline')

값은 차트의 컨테이너를 기준으로 합니다. 차트를 그린 후에 이 메서드를 호출합니다.

반환 유형: 객체
getChartAreaBoundingBox()

차트 콘텐츠의 왼쪽, 상단, 너비, 높이를 포함하는 객체를 반환합니다(예: 라벨 및 범례 제외).

var cli = chart.getChartLayoutInterface();

cli.getChartAreaBoundingBox().left
cli.getChartAreaBoundingBox().top
cli.getChartAreaBoundingBox().height
cli.getChartAreaBoundingBox().width

값은 차트의 컨테이너를 기준으로 합니다. 차트를 그린 후에 이 메서드를 호출합니다.

반환 유형: 객체
getChartLayoutInterface()

차트 및 요소의 화면 배치에 관한 정보가 포함된 객체를 반환합니다.

반환된 객체에서 다음 메서드를 호출할 수 있습니다.

  • getBoundingBox
  • getChartAreaBoundingBox
  • getHAxisValue
  • getVAxisValue
  • getXLocation
  • getYLocation

차트를 그린 후에 이 메서드를 호출합니다.

반환 유형: 객체
getHAxisValue(xPosition, optional_axis_index)

차트 컨테이너의 왼쪽 가장자리로부터의 픽셀 오프셋인 xPosition의 가로 데이터 값을 반환합니다. 음수일 수 있습니다.

예: chart.getChartLayoutInterface().getHAxisValue(400)

차트를 그린 후에 이 메서드를 호출합니다.

반환 유형: 숫자
getImageURI()

이미지 URI로 직렬화된 차트를 반환합니다.

차트를 그린 후에 이 메서드를 호출합니다.

PNG 차트 인쇄를 참조하세요.

반환 유형: 문자열
getSelection()

선택된 차트 항목의 배열을 반환합니다. 이 차트에서는 특정 시점에 하나의 항목만 선택할 수 있습니다. Extended description

반환 유형: 선택 요소의 배열
getVAxisValue(yPosition, optional_axis_index)

yPosition의 세로 데이터 값을 반환합니다. 이 값은 차트 컨테이너의 상단 가장자리로부터 아래 방향으로 픽셀 오프셋입니다. 음수일 수 있습니다.

예: chart.getChartLayoutInterface().getVAxisValue(300)

차트를 그린 후에 이 메서드를 호출합니다.

반환 유형: 숫자
getXLocation(dataValue, optional_axis_index)

차트 컨테이너의 왼쪽 가장자리를 기준으로 dataValue의 픽셀 x 좌표를 반환합니다.

예: chart.getChartLayoutInterface().getXLocation(400)

차트를 그린 후에 이 메서드를 호출합니다.

반환 유형: 숫자
getYLocation(dataValue, optional_axis_index)

차트 컨테이너의 상단 가장자리를 기준으로 dataValue의 픽셀 y 좌표를 반환합니다.

예: chart.getChartLayoutInterface().getYLocation(300)

차트를 그린 후에 이 메서드를 호출합니다.

반환 유형: 숫자
removeAction(actionID)

요청된 actionID가 있는 도움말 작업을 차트에서 삭제합니다.

반환 유형: none
setAction(action)

사용자가 작업 텍스트를 클릭할 때 실행할 도움말 작업을 설정합니다.

setAction 메서드는 객체를 작업 매개변수로 사용합니다. 이 객체는 세 가지 속성을 지정해야 합니다. id(설정 중인 작업의 ID), text(작업 도움말에 표시되어야 하는 텍스트), action(사용자가 작업 텍스트를 클릭할 때 실행해야 하는 함수)입니다.

차트의 draw() 메서드를 호출하기 전에 모든 도움말 작업을 설정해야 합니다. 확장된 설명.

반환 유형: none
setSelection()

지정된 차트 항목을 선택합니다. 이전 선택을 취소합니다. 이 차트에서는 한 번에 하나의 항목만 선택할 수 있습니다. Extended description

반환 유형: 없음
clearChart()

차트를 지우고 할당된 리소스를 모두 해제합니다.

반환 유형: 없음

이벤트

이러한 이벤트를 사용하는 방법에 관한 자세한 내용은 기본 상호작용, 이벤트 처리, 이벤트 실행을 참고하세요.

이름
animationfinish

전환 애니메이션이 완료되면 실행됩니다.

속성: 없음
click

사용자가 차트 내부를 클릭하면 실행됩니다. 제목, 데이터 요소, 범례 항목, 축, 격자선, 라벨을 언제 클릭했는지 식별하는 데 사용할 수 있습니다.

속성: targetID
error

차트를 렌더링하려고 시도할 때 오류가 발생하면 실행됩니다.

속성: ID, 메시지
legendpagination

사용자가 범례 페이지로 나누기 화살표를 클릭하면 실행됩니다. 0을 기반으로 하는 현재의 범례 페이지 색인과 총 페이지 수를 전달합니다.

속성: currentPageIndex, totalPages
onmouseover

사용자가 시각적 항목 위로 마우스를 가져가면 실행됩니다. 해당 데이터 테이블 요소의 행과 열 색인을 다시 전달합니다.

속성: 행, 열
onmouseout

사용자가 시각적 항목에서 마우스 멀어질 때 실행됩니다. 해당 데이터 테이블 요소의 행과 열 색인을 다시 전달합니다.

속성: 행, 열
ready

차트에서 외부 메서드 호출을 사용할 준비가 되었습니다. 차트와 상호작용하고 차트를 그린 후 메서드를 호출하려면 draw 메서드를 호출하기 전에 이 이벤트의 리스너를 설정하고 이벤트가 시작된 후에만 호출해야 합니다.

속성: 없음
select

사용자가 시각적 항목을 클릭하면 실행됩니다. 어떤 항목이 선택되었는지 알아보려면 getSelection()를 호출하세요.

속성: 없음

데이터 정책

브라우저에서 모든 코드와 데이터가 처리되고 렌더링됩니다. 데이터는 서버로 전송되지 않습니다.