열 역할

이 페이지에서는 차트 데이터 표에서 역할의 개념과 사용을 설명합니다.

  1. 역할이란 무엇인가요?
  2. 어떤 역할이 필요한가요?
  3. 역할 계층 구조 및 연결
  4. 역할 할당하기

역할이란 무엇인가요?

이제 Google DataTable 및 DataView 객체가 명시적으로 할당된 열 역할을 지원합니다. 열 역할은 해당 열의 데이터 용도를 설명합니다. 예를 들어 열에는 도움말 텍스트, 데이터 포인트 주석 또는 불확실성 지표를 설명하는 데이터가 포함될 수 있습니다. 대부분의 열 역할은 이전 열 또는 연속된 역할 열 그룹의 첫 번째 열 바로 앞에 있는 열과 그 앞의 '데이터' 열에 적용됩니다. 예를 들어 '데이터' 열 뒤에는 '도움말'과 '주석'에 각각 하나씩 2개의 열이 있을 수 있습니다. 하지만 '도메인' 열 다음에 일반적으로 '주석' 및 '주석' 열 역할도 허용합니다.

참고: 사용자가 차트 위로 마우스를 가져가면 표시되는 도움말의 내용을 제어하려면 도움말을 참고하세요.

이전에는 하나의 열에 사용할 수 있는 두 가지 역할, 즉 주요 축 값을 지정하는 '도메인'과 막대 높이, 파이 슬라이스 너비를 지정하는 '데이터'만 있었습니다. 이러한 역할은 표에 있는 열의 순서와 유형을 기반으로 암시적으로 할당되었습니다. 하지만 열 역할을 명시적으로 할당할 수 있는 기능 덕분에 임의의 주석 라벨, 마우스 오버 텍스트, 불확실성 막대와 같은 새롭고 흥미로운 기능을 차트에 제공하는 선택적인 열을 추가할 수 있습니다.

열의 역할을 명시적으로 할당하지 않으면 차트의 데이터 형식 사양에 따라 테이블의 열 순서에 따라 역할이 추론됩니다. 이 페이지에서는 명시적으로 지정할 수 있는 역할과 이를 할당하는 방법을 보여줍니다.

다음은 추론된 기본 역할만 사용하여 선 차트로 할 수 있는 작업과 명시적으로 할당된 추가 역할을 비교하여 보여줍니다.

선 차트 데이터 표 형식:

  열 0 열 1 ... N
목적 입력란 1 값 ... N행 값
데이터 유형
  • 문자열(discrete)
  • 숫자, 날짜, 날짜/시간 또는
    시간(연속)
숫자 ... 숫자
역할 나만의 데이터 ... 데이터
지원되는
열 역할
  • annotation
  • annotationText
  • annotation
  • annotationText
  • 확실성
  • 강조
  • 간격
  • 범위
  • 스타일
  • 도움말
...
  • annotation
  • annotationText
  • 확실성
  • 강조
  • 간격
  • 범위
  • 스타일
  • 도움말

 

명시적 열 역할이 없는 차트 명시적 열 역할이 있는 차트

이 차트는 역할을 명시적으로 적용하지 않으므로 위에 표시된 기본 데이터 및 도메인 열 레이아웃만 사용할 수 있습니다.

데이터 표:

var data = new google.visualization.DataTable();
data.addColumn('string', 'Month'); // Implicit domain label col.
data.addColumn('number', 'Sales'); // Implicit series 1 data col.
data.addRows([
  ['April',1000],
  ['May',  1170],
  ['June',  660],
  ['July', 1030]
]);

이 차트는 역할을 명시적으로 할당하므로 선택적 열을 추가할 수 있습니다. 이 차트에는 주석, annotationText, 간격 및 확실성 역할에 대한 열이 선택사항으로 있습니다.

  • 주석 열은 차트에 정적 라벨을 지정합니다. 여기서 'A', 'B', 'C'는 주석입니다.
  • annotationText 열은 주석(데이터 포인트 아님) 위에 마우스를 가져가면 마우스 오버 텍스트를 지정합니다.
  • interval 열은 차트에서 I-bar의 상단 및 하단 지점을 지정합니다. 차트에 세 개의 I 막대가 있습니다.
  • 확실성 열은 해당 시점의 데이터가 확실한지를 나타냅니다. 마지막 데이터 포인트는 불확실하므로 데이터 라인을 연결하는 점선은 파선입니다.

데이터 표:

var data = new google.visualization.DataTable();
data.addColumn('string', 'Month'); // Implicit domain label col.
data.addColumn('number', 'Sales'); // Implicit series 1 data col.
data.addColumn({type:'number', role:'interval'});  // interval role col.
data.addColumn({type:'number', role:'interval'});  // interval role col.
data.addColumn({type:'string', role:'annotation'}); // annotation role col.
data.addColumn({type:'string', role:'annotationText'}); // annotationText col.
data.addColumn({type:'boolean',role:'certainty'}); // certainty col.
data.addRows([
    ['April',1000,  900, 1100,  'A','Stolen data', true],
    ['May',  1170, 1000, 1200,  'B','Coffee spill', true],
    ['June',  660,  550,  800,  'C','Wumpus attack', true],
    ['July', 1030, null, null, null, null, false]
]);

어떤 역할을 사용할 수 있나요?

다음 표에는 Google 차트에서 지원하는 모든 역할이 나와 있습니다. 모든 차트 유형에서 모든 역할을 지원하지는 않습니다. 각 차트의 문서에서 사용할 수 있는 역할과 해당 역할을 설명합니다. 역할 유형은 차트 유형에 따라 다르게 렌더링됩니다.

역할 설명
주석

연결된 데이터 포인트 근처의 차트에 표시할 텍스트입니다. 텍스트는 사용자 상호작용 없이 표시됩니다. 주석 및 주석 텍스트는 데이터 포인트와 카테고리 (축 라벨)에 모두 할당할 수 있습니다.

주석 스타일에는 지정된 지점 근처에 주석 텍스트를 그리는 선 (기본값)과 차트 영역을 양분하는 선에 주석 텍스트를 그리는 선의 두 가지가 있습니다. 이 차트 옵션(annotations: {'column_id': {style: 'line'}})을 설정하여 선 스타일을 지정할 수 있습니다.

데이터 유형: 문자열

기본값: 빈 문자열

데이터:

을 확인해 주세요.

이 차트의 'A'와 'B'는 주석입니다. 주석 위로 마우스를 가져가면 주석 텍스트가 표시됩니다. annotationText 값을 표시하려면 주석이 적용된 데이터 포인트가 아닌 주석에 마우스를 가져가야 합니다.

annotation 및 annotationText 셀 모두에 null 값이 허용되지만 annotationText 값이 있는 경우 연결된 주석 값이 있어야 합니다.

annotationText

사용자가 연결된 주석 위로 마우스를 가져가면 표시되는 확장 텍스트입니다. 주석 및 주석 텍스트는 데이터 포인트와 카테고리(축 라벨)에 모두 할당할 수 있습니다. annotationText 열이 있는 경우 주석 열도 있어야 합니다. 이와 반대로 사용자가 차트에서 연결된 데이터 포인트 위로 마우스를 가져가면 도움말 텍스트가 표시됩니다.

데이터 유형: 문자열

기본값: 빈 문자열

확실성

데이터 포인트가 확실한지 여부를 나타냅니다. 표시 방법은 차트 유형에 따라 다릅니다. 예를 들어 점선이나 줄무늬로 표시될 수 있습니다.

선 및 영역 차트의 경우 두 데이터 포인트 사이의 세그먼트는 두 데이터 포인트가 모두 확실한 경우에만 확실합니다.

데이터 유형: 불리언: true는 확실하고 false는 불확실합니다.

기본값: true

강조

지정된 차트 데이터 포인트를 강조합니다. 굵은 선 또는 큰 점으로 표시됩니다.

선 및 영역 차트의 경우 두 데이터 포인트가 모두 강조된 경우에만 두 데이터 포인트 사이의 세그먼트가 강조표시됩니다.

데이터 유형: 부울

기본값: false

데이터:

label: 'Year',  'Sales',     null, 'Expenses',     null
 role: domain,   data,   emphasis,     data,   emphasis
       '2004',   1000,       true,      400,      false
       '2005',   1170,       true,      460,       true
       '2006',    660,      false,     1120,       true
       '2007',   1030,      false,      540,       true

이 차트에서 '판매' 시리즈에는 3열, 1행 및 2열로 지정된 한 개의 강조된 세그먼트가 있습니다. '비용' 시리즈에는 5번째 열인 2, 3, 4열에 해당하는 2개의 강조표시된 세그먼트가 있습니다. 강조 시 두 경계점을 모두 강조해야 한다는 점에 유의하세요.

간격

특정 지점의 잠재적 데이터 범위를 나타냅니다. 간격은 일반적으로 I- 막대 스타일 범위 표시기로 표시됩니다. 간격 열은 숫자 열입니다. 간격 열을 쌍으로 추가하여 막대의 낮은 값과 높은 값을 표시합니다. 간격 값은 왼쪽에서 오른쪽으로 증가하는 값으로 추가되어야 합니다.

데이터 유형: 숫자

기본값: 간격 없음

데이터:

label: 'Day',  'Stock value',   null,     null
 role: domain,     data,    interval, interval
        'Mon',       38,          20,       45
        'Tue',       55,          31,       66
        'Wed',       77,          50,       80
      'Thurs',       66,          50,       77

이 차트에서 간격 값은 점을 둘러싼 I 막대를 정의합니다. 값이 왼쪽에서 오른쪽으로 증가합니다. 점 주위의 가장 높은 간격과 가장 낮은 구간은 막대의 상단과 하단을 표시합니다.

참고: 간격에 대한 모든 자세한 내용은 간격을 참조하세요.

범위

포인트가 범위 내에 있는지 여부를 나타냅니다. 범위를 벗어난 포인트는 시각적으로 덜 강조됩니다.

선 및 영역 차트의 경우, 엔드포인트 중 하나가 범위 내에 있으면 두 데이터 포인트 사이의 세그먼트가 범위에 속합니다.

데이터 유형: 부울. 여기서 true는 범위 내에 있습니다.

기본값: true

데이터:

label: 'Year',   'Sales',    null,    'Expenses',      null
 role: domain,     data,    scope,        data,       scope
        '2004',    1000,    false,         400,        true
        '2005',    1170,    false,         460,       false
        '2006',     660,     true,        1120,       false
        '2007',    1030,     true,         540,       false

첫 번째 범위 열은 왼쪽의 '판매' 데이터 열에 적용됩니다. 첫 번째 세그먼트는 두 경계점이 모두 범위를 벗어나므로 범위를 벗어나 렌더링됩니다. 두 번째 범위 열은 왼쪽의 '비용' 데이터 열에 적용됩니다. 첫 번째 세그먼트는 경계점 중 하나가 범위 내에 있어서 범위 내에 표시되고, 나머지 모든 점은 범위 외로 표시되어 선의 나머지는 범위를 벗어난 것으로 표시됩니다.

스타일

데이터의 다양한 측면에서 특정 속성에 스타일을 지정합니다. 해당 값은 다음과 같습니다.

  • color
  • opacity
  • stroke-width
  • stroke-color
  • stroke-opacity
  • fill-color
  • fill-opacity

데이터 유형: 문자열: 'firstProperty: value; secondProperty: value' 구문을 사용하여 여러 스타일을 적용하거나 유형을 지정하고 중괄호 (예: bar { //properties go here }) 내에 스타일 속성을 래핑하여 특정 스타일을 설정할 수 있습니다.

기본값: null

데이터:

label: 'Character', 'Popularity',   'Style',
role:  domain,      data,   style,
'Hulk',             50,    'color: green',
'Captain America',  75,    'color: #0000cf;' +
                           'stroke-color: #cf001d',
'Wolverine',        90,    'opacity: 0.5;' +
                           'stroke-width: 5;' +
                           'stroke-color: #01a0ff;' +
                           'fill-color: #fff600',
'Iron Man',         60,    'color: #db9500;' +
                           'stroke-width: 10;' +
                           'stroke-color: #a30300',
'Spider Man',       100,   'bar {' +
                           'fill-color: #c8001d;' +
                           'stroke-width: 3;' +
                           'stroke-color: #1800c8}'

      

이 차트에서 각 막대는 style 열 역할을 사용하여 다른 막대와 독립적으로 스타일이 지정됩니다. 스타일은 점, 선 또는 막대에 구체적으로 설정되거나(스파이더맨 행 참고) 일반적으로 차트 유형에 따라 모든 점, 선 및 막대에 스타일이 적용됩니다.

참고: 자세한 내용은 , , 막대의 스타일을 맞춤설정하는 방법에 관한 문서를 참고하세요. 영역, 텍스트, 상자 등 다른 종류의 항목에 스타일을 지정할 수 있는 각 차트 유형에 관한 옵션도 참고하세요.

도움말

사용자가 이 행과 연결된 데이터 포인트 위로 마우스를 가져가면 표시되는 텍스트입니다.

참고: 풍선형 차트 시각화에서는 지원되지 않습니다. 풍선형 차트 HTML 도움말의 콘텐츠는 맞춤설정할 수 없습니다.

데이터 유형: 문자열

기본값: 데이터 포인트 값

데이터:

label: 'Year',   'Sales',    null,   'Expenses',    null
 role: domain,     data,    tooltip,    data,      tooltip
        '2004',    1000, '1M$ sales,     400,    '$0.4M expenses
                           in 2004'                  in 2004'
        '2005',    1170, '1.17M$ sales,  460,    '$0.46M expenses
                            in 2005'                  in 2005'
        '2006',     660, '.66$ sales,   1120,     '$1.12M expenses
                            in 2006'                 in 2006'
        '2007',    1030, '1.03M$ sales,  540,    '$0.54M expenses
                            in 2007'                  in 2007'

데이터 포인트 위로 마우스를 가져가면 도움말 텍스트가 표시됩니다. 도움말 데이터는 3행과 5열에 있는 두 줄의 모든 포인트에 할당됩니다.

참고: 도움말 맞춤설정에 관한 자세한 내용은 도움말을 참고하세요.

도메인

이 역할은 다중 도메인 차트를 설계하지 않는 한 명시적으로 할당해서는 안 됩니다 (여기에 표시됨). 데이터 테이블의 기본 형식을 사용하면 차트 엔진이 도메인 열을 추론할 수 있습니다. 하지만 어떤 열이 도메인 열인지 알 수 있도록 다른 열을 수정할 수 있도록 해야 합니다.

도메인 열은 차트의 주요 축을 따라 라벨을 지정합니다. 여러 도메인 열을 사용하여 동일한 차트 내에서 여러 배율을 지원할 수 있습니다.

데이터 유형: 일반적으로 문자열이지만 때로는 숫자 또는 날짜

데이터:

label: '2009,  '2009,     '2009,   '2008,    '2008    '2008
      Quarter', Sales', Expenses', Quarter', Sales', Expenses'
role:  domain,   data,       data,   domain,   data,     data
      'Q1/09',   1000,        400,  'Q1/08',    800,      300
      'Q2/09',   1170,        460,  'Q2/08',    750,      400
      'Q3/09',    660,       1120,  'Q3/08',    700,      540
      'Q4/09',   1030,        540,  'Q4/08',    820,      620

이 예에서는 다중 도메인 차트를 보여줍니다. 처음 두 개의 데이터 열은 첫 번째 도메인('2009 분기')을 수정하고 마지막 두 개의 데이터 열은 두 번째 도메인을 수정합니다('2008 분기'). 두 도메인 모두 동일한 축 배율로 오버레이됩니다.

데이터

이 역할을 명시적으로 할당해서는 안 됩니다. 데이터 테이블의 기본 형식을 사용하면 차트 엔진이 도메인 열을 추론할 수 있습니다. 그러나 어떤 열이 데이터 열인지 인식하여 수정할 수 있는 다른 열을 알아야 합니다.

데이터 역할 열은 차트에서 렌더링할 계열 데이터를 지정합니다. 대부분의 차트에서 1열은 1열에 해당하지만 차트 유형에 따라 달라질 수 있습니다. 예를 들어 분산형 차트에는 첫 번째 계열에 2개의 데이터 열이 필요하고, 추가 계열마다 1개의 데이터 열이 필요합니다. 원통형 차트에는 각 계열에 4개의 데이터 열이 필요합니다.

데이터 유형: 숫자

 

역할 계층 구조 및 연결성

다음 다이어그램은 다른 역할 열에 적용할 수 있는 역할 열을 보여줍니다. 도메인 열을 제외한 모든 열은 도메인이 적용될 수 있는 가장 가까운 왼쪽 인접 항목에 적용됩니다.

예를 들어 scope 열은 왼쪽에서 가장 가까운 data 열에 적용되고, annotationText 열은 가장 가까운 annotation 열에, 왼쪽에 있는 data 열에 가장 가까운 data 열에 적용됩니다.

역할 할당하기

역할은 DataTable 객체의 열 속성으로 할당됩니다. 역할 열을 만드는 방법에는 여러 가지가 있지만 가장 일반적인 방법은 다음과 같습니다.

처음 두 가지 기법으로 다음 차트를 그립니다.

DataTable.addColumn 메서드

다음 예에서는 막대 3개에 간격 마커가 있는 막대 그래프를 만듭니다. 간격 마커는 DataTable.addColumn() 메서드를 사용하여 세 번째와 네 번째 열로 지정됩니다.

       var data = new google.visualization.DataTable();
       data.addColumn('string', 'Month'); // Implicit domain column.
       data.addColumn('number', 'Sales'); // Implicit data column.
       data.addColumn({type:'number', role:'interval'});
       data.addColumn({type:'number', role:'interval'});
       data.addColumn('number', 'Expenses');
       data.addRows([
         ['April',1000,  900, 1100,   400],
         ['May',  1170, 1000, 1200,   460],
         ['June',  660,  550,  800,  1120],
         ['July', 1030,    ,     ,    540]
       ]);

       var chart = new google.visualization.BarChart(
                document.getElementById('visualization'));
       chart.draw(data,
          {width: 800, height: 600, title: 'Company Performance'});

자바스크립트 리터럴 표기법

JSON 리터럴에서 "role":"role-type" 값으로 열의 p 속성을 지정해야 합니다. 다음 예시에서는 자바스크립트 리터럴 표기법을 사용하여 역할을 지정하는 방법을 보여줍니다. 이 작업은 테이블을 만들 때만 가능합니다.

{"cols":[
  {"id":"","label":"Month","pattern":"","type":"string"},
  {"id":"","label":"Sales","pattern":"","type":"number"},
  {"id":"","label":"","pattern":"","type":"number","p":{"role":"interval"}},
  {"id":"","label":"","pattern":"","type":"number","p":{"role":"interval"}},
  {"id":"","label":"Expenses","pattern":"","type":"number"}],
"rows":[
  {"c":[
    {"v":"April","f":null},
    {"v":1000,"f":null},
    {"v":900,"f":null},
    {"v":1100,"f":null},
    {"v":400,"f":null}]},
  {"c":[
    {"v":"May","f":null},
    {"v":1170,"f":null},
    {"v":1000,"f":null},
    {"v":1200,"f":null},
    {"v":460,"f":null}]},
  {"c":[{"v":"June","f":null},
    {"v":660,"f":null},
    {"v":550,"f":null},
    {"v":800,"f":null},
    {"v":1120,"f":null}]},
  {"c":[
    {"v":"July","f":null},
    {"v":1030,"f":null},
    {"v":null,"f":null},
    {"v":null,"f":null},
    {"v":540,"f":null}]}],
"p":null
}

DataView.setColumn 메서드

뷰를 생성할 때 열의 역할을 명시적으로 설정할 수 있습니다. 이는 새로 계산된 열을 만들 때 유용합니다. 자세한 내용은 DataView.setColumns()를 참고하세요.