베가차트

  1. 개요
  2. 간단한 예
  3. 로드
  4. 데이터 형식
  5. 구성 옵션
  6. 메서드
  7. 이벤트
  8. 데이터 정책

개요

VegaChart는 대화형 시각화 디자인을 생성, 저장, 공유하는 선언적 언어인 Vega 시각화 문법을 사용하여 만들 수 있는 여러 시각화 중 하나입니다. Vega에서는 시각화된 시각적 요소와 동작을 JSON 형식으로 설명하고 캔버스 또는 SVG를 사용하여 웹 기반 뷰를 생성할 수 있습니다.

VegaChart를 그릴 때 Vega 시각화 문법으로 차트를 만드는 방법에 관한 사양을 옵션 내에 포함해야 합니다. 아래에 이러한 사양의 몇 가지 예가 나와 있으며 VegaChart 예 페이지에서 더 많은 예를 확인할 수 있습니다.

참고: Google 차트 VegaChart에는 Vega JSON 사양(예시 갤러리의 모든 항목 포함)으로 지정할 수 있는 모든 Vega 차트가 그려질 수 있지만 Vega API를 호출해야 하는 추가 기능은 아직 사용할 수 없습니다.

간단한 예시, 막대 그래프

다음은 막대형 차트를 그리는 VegaChart의 간단한 예입니다. 원본 예시, 자세한 튜토리얼, VGA 차트 내 막대 그래프를 참고하세요.

이는 Google 차트에서 막대 그래프를 생성하는 또 다른 방법이지만, 이 VegaChart를 기반으로 다른 막대 그래프와 열 차트의 모든 기능을 새로운 구현에 통합할 계획입니다.

이 예에서 'data' 옵션은 draw로 제공된 'datatable'을 'table'이라는 다른 데이터 객체의 '소스'로 사용하는 Vest 사양의 다른 사양으로 대체되며 '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);

데이터 형식

DataTable (또는 DataView)을 사용하여 다른 Google 차트와 매우 유사한 방식으로 VegaChart에 데이터를 전달할 수 있습니다. 주요 차이점은 VegaChart는 열 순서를 사용하여 사용 방식을 결정하는 대신 각 열의 ID를 지정한 특정 Vega 시각화의 예상값과 일치시킵니다. 예를 들어 다음 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:{left:20,top:0,width:'50%',height:'75%'}

유형: 객체
기본값: null
차트 영역

아래쪽 테두리에서 차트를 그리는 거리

유형: 숫자 또는 문자열
기본값: 자동
차트 영역

왼쪽 테두리에서 차트를 그리는 거리

유형: 숫자 또는 문자열
기본값: 자동
차트 영역.right

오른쪽 테두리에서 차트를 그리는 거리

유형: 숫자 또는 문자열
기본값: 자동
차트 영역.top

위쪽 테두리에서 차트를 그리는 거리

유형: 숫자 또는 문자열
기본값: 자동
차트 영역 너비

차트 영역 너비

유형: 숫자 또는 문자열
기본값: 자동
차트 영역

차트 영역 높이를 나타냅니다.

유형: 숫자 또는 문자열
기본값: 자동
높이

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

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

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

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

방법

메서드
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, 작업의 도움말에 표시되어야 하는 텍스트, action, 사용자가 작업 텍스트를 클릭할 때 실행해야 하는 함수 등 3가지 속성을 지정해야 합니다.

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

반환 유형: none
setSelection()

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

반환 유형: 없음
clearChart()

차트를 삭제하고 할당된 모든 리소스를 해제합니다.

반환 유형: 없음

이벤트

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

이름
animationfinish

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

속성: 없음
click

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

속성: targetID
error

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

속성: ID, 메시지
legendpagination

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

속성: currentPageIndex, totalPages
onmouseover

사용자가 시각적 개체 위로 마우스를 가져가면 시작됩니다. 해당하는 데이터 테이블 요소의 행 및 열 색인을 전달합니다.

속성: 행, 열
onmouseout

사용자가 시각적 항목에서 마우스를 치우면 실행됩니다. 해당하는 데이터 테이블 요소의 행 및 열 색인을 전달합니다.

속성: 행, 열
ready

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

속성: 없음
select

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

속성: 없음

데이터 정책

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