이 페이지에서는 차트 데이터 표에서 역할의 개념과 사용에 대해 설명합니다.
역할이란 무엇인가요?
이제 Google DataTable 및 DataView 객체가 명시적으로 할당된 열 역할을 지원합니다. 열 역할은 해당 열에 있는 데이터의 목적을 설명합니다. 예를 들어 열에는 도움말 텍스트, 데이터 포인트 주석, 불확실성 지표를 설명하는 데이터가 포함될 수 있습니다. 대부분의 열 역할은 바로 앞에 있든, 연속된 역할 열 그룹의 첫 번째 열 앞에 있든 상관없이 앞에 오는 'data' 열에 적용됩니다. 예를 들어 'data' 열 뒤에 2개의 열이 있을 수 있습니다. 하나는 'tooltip'이고 다른 하나는 'annotation' 열입니다. 하지만 'domain' 열 다음에는 일반적으로 'annotation' 및 'annotationText' 열 역할도 허용됩니다.
참고: 사용자가 차트 위로 마우스를 가져갈 때 표시되는 도움말의 콘텐츠를 관리하려면 도움말을 참고하세요.
원래 열에는 주요 축 값을 지정하는 '도메인' 역할과 막대 높이, 파이 슬라이스 너비 등을 지정하는 'data' 역할만 사용할 수 있었습니다. 이러한 역할은 테이블에 있는 열의 순서와 유형에 따라 암시적으로 할당되었습니다. 그러나 열 역할을 명시적으로 할당하는 기능을 사용하면 임의의 주석 라벨, 마우스 오버 텍스트, 불확실성 막대와 같은 새롭고 흥미로운 기능을 차트에 제공하는 선택적 열을 추가할 수 있습니다.
열의 역할을 명시적으로 할당하지 않으면 차트의 데이터 형식 사양에 따라 테이블의 열 순서에 따라 역할이 추론됩니다. 이 페이지에서는 명시적으로 지정할 수 있는 역할과 할당 방법을 설명합니다.
다음은 추론된 기본 역할만 사용하여 선 차트로 할 수 있는 작업과 명시적으로 할당된 추가 역할의 비교입니다.
선 차트 데이터 표 형식:
| 열 0 | 열 1 | ... | N열 | |
|---|---|---|---|---|
| 목적 | 입력란 1 값 | ... | N행 값 | |
| 데이터 유형 | 숫자 | ... | 숫자 | |
| 역할 | 도메인 | 데이터 | ... | 데이터 |
| 지원되는 열 역할(선택사항) |
|
|
... |
|
| 명시적 열 역할이 없는 차트 | 명시적 열 역할이 있는 차트 |
|---|---|
|
|
|
이 차트는 역할을 명시적으로 적용하지 않으므로 위에 표시된 기본 데이터 및 도메인 열 레이아웃만 사용할 수 있습니다. 데이터 테이블: 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]
]); |
이 차트는 역할을 명시적으로 할당하므로 선택 열을 추가할 수 있습니다. 이 차트에는 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.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 차트에서 지원하는 모든 역할이 나와 있습니다. 모든 차트 유형에서 모든 역할이 지원되는 것은 아닙니다. 각 차트의 문서에서는 사용 가능한 역할과 그 역할을 설명합니다. 역할은 차트 유형에 따라 다르게 렌더링됩니다.
| 역할 | 설명 | 예시 |
|---|---|---|
| 주석 | 연결된 데이터 포인트 근처의 차트에 표시할 텍스트입니다. 텍스트는 사용자 상호작용 없이 표시됩니다. 주석 및 주석 텍스트는 데이터 포인트와 카테고리 (축 라벨)에 모두 할당할 수 있습니다. 주석에는 지정된 지점 근처에 주석 텍스트를 그리는 점 (default)과 차트 영역을 양분하는 선에 주석 텍스트를 그리는 선이라는 두 가지 스타일이 있습니다. 다음 차트 옵션을 설정하여 선 스타일을 지정할 수 있습니다. 데이터 유형: 문자열 기본값: 빈 문자열 |
데이터: 라벨: '연도', '판매', null, null, '비용', null, null
역할: 도메인, 데이터, 주석, annotationText, 데이터, 주석, annotationText
'2004', 1000, null, null, 400, null, null
'2005', 1170, null, null, null, '0,01', null, null, null, 0, null, 0, 46
이 차트의 'A'와 'B'는 주석입니다. 주석 위로 마우스를 가져가면 주석 텍스트가 표시됩니다. annotationText 값을 표시하려면 주석이 적용되는 데이터 포인트가 아닌 주석 위로 마우스를 가져가야 합니다. 주석 및 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행으로 지정된 하나의 강조 세그먼트가 있습니다. '비용' 계열에는 다섯 번째 열인 2, 3, 4행으로 지정된 두 개의 강조 세그먼트가 있습니다. 강조하려면 두 경계점을 모두 강조해야 합니다. |
| 간격 | 특정 지점의 잠재적인 데이터 범위를 나타냅니다. 간격은 일반적으로 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 막대를 정의합니다. 값이 왼쪽에서 오른쪽으로 증가합니다. 점 주변의 최고 및 최저 간격은 막대의 상단과 하단을 표시합니다. 참고: 간격에 대한 모든 세부정보는 간격을 참조하세요. |
| 범위 | 지점이 범위 내에 있는지 여부를 나타냅니다. 점이 범위를 벗어나면 시각적으로 강조되지 않습니다. 선 차트와 영역 차트의 경우 두 데이터 포인트 사이의 세그먼트는 하나의 엔드포인트가 범위 내에 있으면 범위 내에 있습니다. 데이터 유형: boolean. 여기서 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
첫 번째 범위 열은 왼쪽의 '판매' 데이터 열에 적용됩니다. 첫 번째 세그먼트는 두 경계점이 모두 범위를 벗어나므로 범위를 벗어나 렌더링됩니다. 두 번째 범위 열은 왼쪽의 '비용' 데이터 열에 적용됩니다. 첫 번째 세그먼트는 경계점 중 하나가 범위 내에 있으므로 범위 내로 표시되고, 선의 나머지는 다른 모든 점이 범위를 벗어난 것으로 표시되므로 범위를 벗어납니다. |
| 스타일 |
데이터의 다양한 측면에서 특정 속성의 스타일을 지정합니다. 이러한 값은 다음과 같습니다.
데이터 유형: 문자열. 기본값: 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}'
이 차트에서 각 막대는 참고: 점, 선, 막대의 스타일을 맞춤설정하는 방법에 관한 자세한 내용은 다른 곳에 나와 있습니다. 영역, 텍스트, 상자 등 다른 종류의 항목에 스타일을 지정할 수 있는 각 차트 유형의 옵션도 확인하세요. |
| 도움말 |
사용자가 이 행과 연결된 데이터 포인트에 마우스를 가져가면 표시되는 텍스트입니다. 참고: 풍선형 차트 시각화에서는 지원되지 않습니다. 풍선형 차트 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 Quarter')을 수정하고 마지막 두 개의 데이터 열은 두 번째 도메인 ('2008 Quarter')을 수정합니다. 두 도메인이 동일한 축 배율에 오버레이됩니다. |
| 데이터 | 이 역할을 명시적으로 할당할 필요는 없습니다. 데이터 테이블의 기본 형식을 사용하면 차트 엔진이 도메인 열인 열을 추론할 수 있습니다. 그러나 수정할 수 있는 다른 열을 알 수 있도록 어느 열이 데이터 열인지 알고 있어야 합니다. 데이터 역할 열은 차트에서 렌더링할 계열 데이터를 지정합니다. 대부분의 차트에서 열 1개는 계열 1개이지만 차트 유형에 따라 다를 수 있습니다. 예를 들어 분산형 차트에는 첫 번째 계열에 두 개의 데이터 열이 필요하고 추가 계열마다 데이터 열 하나가 추가로 필요합니다. 원통형 차트에는 각 계열에 네 개의 데이터 열이 필요합니다. 데이터 유형: 숫자 |
역할 계층 구조 및 연결
다음 다이어그램은 특정 역할 열을 적용할 수 있는 기타 역할 열을 보여줍니다. 도메인 열을 제외한 모든 열은 적용 가능한 가장 가까운 왼쪽 이웃에 적용됩니다.
예를 들어 scope 열은 왼쪽에 있는 가장 가까운 data 열에 적용되고 annotationText 열은 왼쪽에 있는 가장 가까운 annotation 열에 적용되고 annotation은 왼쪽에 있는 가장 가까운 data 또는 domain 열에 적용됩니다.
역할 할당하기
역할은 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'});
JavaScript 리터럴 표기법
JSON 리터럴에서는 "role":"role-type" 값을 사용하여 열의 p 속성을 지정해야 합니다.
다음 예시에서는 JavaScript 리터럴 표기법을 사용하여 역할을 지정하는 방법을 보여줍니다. 이 작업은 테이블을 만들 때만 가능합니다.
{"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.setColumns 메서드
뷰를 만들 때 열의 역할을 명시적으로 설정할 수 있습니다. 이는 새 계산된 열을 만들 때 유용합니다. 자세한 내용은 DataView.setColumns()를 참고하세요.