도움말: 소개
툴팁은 무언가에 마우스를 가져가면 표시되는 작은 상자입니다. 호버 카드는 더 일반적이며 화면의 아무 곳에나 표시될 수 있습니다. 도움말은 항상 분산형 차트의 점 또는 막대 그래프의 막대와 같은 항목에 첨부됩니다.
이 문서에서는 Google 차트에서 도움말을 만들고 맞춤설정하는 방법을 설명합니다.
도움말 유형 지정
Google 차트는 모든 핵심 차트에 대한 도움말을 자동으로 만듭니다.
기본적으로 SVG로 렌더링되지만 VML로 렌더링되는 IE 8은 예외입니다. draw() 호출에 전달된 차트 옵션에 tooltip.isHtml: true를 지정하여 핵심 도움말의 HTML 도움말을 만들 수 있습니다. 이렇게 하면 도움말 작업을 만들 수도 있습니다.
표준 도움말
맞춤 콘텐츠가 없는 경우 도움말 콘텐츠가 기본 데이터를 기반으로 자동 생성됩니다. 차트의 막대 위로 마우스를 가져가면 도움말을 볼 수 있습니다.
도움말 콘텐츠 맞춤설정
이 예시에서는 새 열을 DataTable에 추가하고 도움말 역할로 표시하여 도움말에 커스텀 콘텐츠를 추가합니다.
참고: 풍선형 차트 시각화에서는 지원되지 않습니다.
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var dataTable = new google.visualization.DataTable();
dataTable.addColumn('string', 'Year');
dataTable.addColumn('number', 'Sales');
// A column for custom tooltip content
dataTable.addColumn({type: 'string', role: 'tooltip'});
dataTable.addRows([
['2010', 600,'$600K in our first year!'],
['2011', 1500, 'Sunspot activity made this our best year ever!'],
['2012', 800, '$800K in 2012.'],
['2013', 1000, '$1M in sales last year.']
]);
var options = { legend: 'none' };
var chart = new google.visualization.ColumnChart(document.getElementById('tooltip_action'));
chart.draw(dataTable, options);
}
HTML 도움말 사용
이 예에서는 HTML 도움말을 사용 설정하여 이전 예시를 기반으로 빌드합니다. 차트 옵션에 tooltip.isHtml: true가 추가되었습니다.
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var dataTable = new google.visualization.DataTable();
dataTable.addColumn('string', 'Year');
dataTable.addColumn('number', 'Sales');
// A column for custom tooltip content
dataTable.addColumn({type: 'string', role: 'tooltip'});
dataTable.addRows([
['2010', 600,'$600K in our first year!'],
['2011', 1500, 'Sunspot activity made this our best year ever!'],
['2012', 800, '$800K in 2012.'],
['2013', 1000, '$1M in sales last year.']
]);
var options = {
tooltip: {isHtml: true},
legend: 'none'
};
var chart = new google.visualization.ColumnChart(document.getElementById('col_chart_html_tooltip'));
chart.draw(dataTable, options);
}
많이 다르진 않지만 HTML을 맞춤설정할 수 있습니다.
HTML 콘텐츠 맞춤설정
이전 예에는 일반 텍스트 콘텐츠와 함께 모든 도움말이 사용되었지만 HTML 마크업을 사용하여 맞춤설정할 수 있으면 HTML 도움말의 진정한 강점을 활용할 수 있습니다. 사용 설정하려면 다음 두 가지 작업을 수행해야 합니다.
-
차트 옵션에서
tooltip.isHtml: true을 지정합니다. 그러면 차트에 SVG가 아닌 HTML로 도움말을 그립니다. -
html맞춤 속성으로 데이터 테이블의 전체 열 또는 특정 셀을 표시합니다. 툴팁 역할과 HTML 속성이 포함된 데이터 테이블 열은 다음과 같습니다.
dataTable.addColumn({'type': 'string', 'role': 'tooltip', 'p': {'html': true}})참고: 풍선형 차트 시각화에는 사용할 수 없습니다. 풍선형 차트 HTML 도움말의 콘텐츠는 맞춤설정할 수 없습니다.
중요: 도움말의 HTML을 신뢰할 수 있는 출처에서 가져와야 합니다.
맞춤 HTML 콘텐츠에 사용자 제작 콘텐츠가 포함된 경우 해당 콘텐츠를 이스케이프 처리해야 합니다. 그렇지 않으면 시각적 시각화가 XSS 공격에 노출될 수 있습니다.
맞춤 HTML 콘텐츠는 <img> 태그를 추가하거나 텍스트를 굵게 표시하는 것만큼이나 간단할 수 있습니다.
맞춤 HTML 콘텐츠에는 동적으로 생성된 콘텐츠도 포함될 수 있습니다. 여기에서는 각 카테고리 값에 대해 동적으로 생성된 테이블이 포함된 도움말을 추가합니다. 도움말은 행 값에 연결되므로 막대 위에 마우스를 가져가면 HTML 도움말이 표시됩니다.
이 예에서는 커스텀 HTML 도움말을 도메인 열에 연결하는 방법을 보여줍니다. (이전 예에서는 데이터 열에 연결되었음) 도메인 축에 대한 도움말을 사용 설정하려면 focusTarget: 'category' 옵션을 설정합니다.
function drawChart() {
var dataTable = new google.visualization.DataTable();
dataTable.addColumn('string', 'Country');
// Use custom HTML content for the domain tooltip.
dataTable.addColumn({'type': 'string', 'role': 'tooltip', 'p': {'html': true}});
dataTable.addColumn('number', 'Gold');
dataTable.addColumn('number', 'Silver');
dataTable.addColumn('number', 'Bronze');
dataTable.addRows([
['USA', createCustomHTMLContent('https://upload.wikimedia.org/wikipedia/en/a/a4/Flag_of_the_United_States.svg', 46, 29, 29), 46, 29, 29],
['China', createCustomHTMLContent('https://upload.wikimedia.org/wikipedia/commons/f/fa/Flag_of_the_People%27s_Republic_of_China.svg', 38, 27, 23), 38, 27, 23],
['UK', createCustomHTMLContent('https://upload.wikimedia.org/wikipedia/commons/a/ae/Flag_of_the_United_Kingdom.svg', 29, 17, 19), 29, 17, 19]
]);
var options = {
title: 'London Olympics Medals',
colors: ['#FFD700', '#C0C0C0', '#8C7853'],
// This line makes the entire category's tooltip active.
focusTarget: 'category',
// Use an HTML tooltip.
tooltip: { isHtml: true }
};
// Create and draw the visualization.
new google.visualization.ColumnChart(document.getElementById('custom_html_content_div')).draw(dataTable, options);
}
function createCustomHTMLContent(flagURL, totalGold, totalSilver, totalBronze) {
return '<div style="padding:5px 5px 5px 5px;">' +
'<img src="' + flagURL + '" style="width:75px;height:50px"><br/>' +
'<table class="medals_layout">' + '<tr>' +
'<td><img src="https://upload.wikimedia.org/wikipedia/commons/1/15/Gold_medal.svg" style="width:25px;height:25px"/></td>' +
'<td><b>' + totalGold + '</b></td>' + '</tr>' + '<tr>' +
'<td><img src="https://upload.wikimedia.org/wikipedia/commons/0/03/Silver_medal.svg" style="width:25px;height:25px"/></td>' +
'<td><b>' + totalSilver + '</b></td>' + '</tr>' + '<tr>' +
'<td><img src="https://upload.wikimedia.org/wikipedia/commons/5/52/Bronze_medal.svg" style="width:25px;height:25px"/></td>' +
'<td><b>' + totalBronze + '</b></td>' + '</tr>' + '</table>' + '</div>';
}
회전 툴팁
Google 차트의 도움말은 CSS로 회전할 수 있습니다. 아래 차트에서 이 인라인 CSS를 사용하여 차트 div 직전에 도움말이 시계 방향으로 30° 회전합니다.
<style>div.google-visualization-tooltip { transform: rotate(30deg); }</style>