도움말

  1. 도움말: 소개
  2. 도움말 유형 지정
  3. 표준 도움말
  4. 도움말 콘텐츠 맞춤설정
  5. HTML 도움말 사용
  6. HTML 콘텐츠 맞춤설정
  7. 회전 도움말
  8. 도움말에 차트 배치
  9. 도움말 작업
  10. 데이터 주석 달기
  11. 지원되는 차트

도움말: 소개

도움말은 항목 위로 마우스를 가져가면 표시되는 작은 상자입니다. 호버 카드는 보다 일반적이며 화면의 아무 곳에나 표시될 수 있습니다. 도움말은 항상 분산형 차트의 점, 막대 그래프의 막대와 같은 항목에 연결됩니다.

이 문서에서는 Google 차트에서 도움말을 만들고 맞춤설정하는 방법을 알아봅니다.

도움말 유형 지정

Google 차트는 모든 핵심 차트에 대한 도움말을 자동으로 만듭니다. 기본적으로 SVG로 렌더링되지만 IE 8에서는 VML로 렌더링됩니다. 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 도움말의 진정한 강점을 활용할 수 있습니다. 이를 사용 설정하려면 다음 두 가지 작업을 실행해야 합니다.

  1. 차트 옵션에서 tooltip.isHtml: true를 지정합니다. 이렇게 하면 SVG와 달리 HTML로 도움말을 그리도록 차트에 지시됩니다.
  2. 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를 사용하여 순환할 수 있습니다. 아래 차트에서는 차트 div 직전에 이 인라인 CSS를 사용하여 도움말이 시계 방향으로 30° 회전합니다.

<style>div.google-visualization-tooltip { transform: rotate(30deg); }</style>

이는 HTML 도움말(즉, isHtml: true 옵션이 있는 도움말)에서만 작동합니다.

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {

        var data = google.visualization.arrayToDataTable([
          ['Year', 'Fixations'],
          ['2015',  80],
          ['2016',  90],
          ['2017',  100],
          ['2018',  90],
          ['2019',  80],
        ]);

        var options = {
          tooltip: { isHtml: true },    // CSS styling affects only HTML tooltips.
          legend: { position: 'none' },
          bar: { groupWidth: '90%' },
          colors: ['#A61D4C']
        };

        var chart = new google.visualization.ColumnChart(document.getElementById('tooltip_rotated'));

        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <!-- The next line rotates HTML tooltips by 30 degrees clockwise. -->
    <style>div.google-visualization-tooltip { transform: rotate(30deg); }</style>
    <div id="tooltip_rotated" style="width: 400px; height: 400px;"></div>
  </body>
</html>

도움말에 차트 배치하기

HTML 도움말에는 Google 차트를 비롯한 원하는 모든 HTML 콘텐츠가 포함될 수 있습니다. 도움말 내에 있는 차트를 사용하면 사용자가 데이터 요소 위로 마우스를 가져가면 추가 정보를 확인할 수 있습니다. 이렇게 하면 사용자가 원할 때 더 자세히 살펴볼 수 있고 한눈에 세부정보를 확인할 수 있습니다.

아래의 열 차트에는 여러 주요 스포츠 이벤트의 최근 시청률 차트가 나와 있으며 각 도움말에는 지난 10년 동안의 평균 시청률을 선 차트로 보여 줍니다.

여기서 몇 가지 주목할 점이 있습니다. 먼저 도움말에 표시할 각 데이터 세트마다 인쇄 가능한 차트를 그려야 합니다. 둘째, 각 도움말 차트에는 인쇄 가능한 차트를 만들기 위해 addListener를 통해 호출하는 'ready' 이벤트 핸들러가 필요합니다.

중요: 모든 도움말 차트는 반드시 기본 차트 앞에 그려야 합니다. 이 작업은 이미지를 가져와서 기본 차트의 DataTable에 추가하는 데 필요합니다.

중요 부분
      // Draws your charts to pull the PNGs for your tooltips.
      function drawTooltipCharts() {

        var data = new google.visualization.arrayToDataTable(tooltipData);
        var view = new google.visualization.DataView(data);

        // For each row of primary data, draw a chart of its tooltip data.
        for (var i = 0; i < primaryData.length; i++) {

          // Set the view for each event's data
          view.setColumns([0, i + 1]);

          var hiddenDiv = document.getElementById('hidden_div');
          var tooltipChart = new google.visualization.LineChart(hiddenDiv);

          google.visualization.events.addListener(tooltipChart, 'ready', function() {

            // Get the PNG of the chart and set is as the src of an img tag.
            var tooltipImg = '<img src="' + tooltipChart.getImageURI() + '">';

            // Add the new tooltip image to your data rows.
            primaryData[i][2] = tooltipImg;

          });
          tooltipChart.draw(view, tooltipOptions);
        }
        drawPrimaryChart();
      }

      function drawPrimaryChart() {

        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Event');
        data.addColumn('number', 'Highest Recent Viewership');

        // Add a new column for your tooltips.
        data.addColumn({
          type: 'string',
          label: 'Tooltip Chart',
          role: 'tooltip',
          'p': {'html': true}
        });

        // Add your data (with the newly added tooltipImg).
        data.addRows(primaryData);

        var visibleDiv = document.getElementById('visible_div');
        var primaryChart = new google.visualization.ColumnChart(visibleDiv);
        primaryChart.draw(data, primaryOptions);

      }
전체 웹페이지
<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(drawTooltipCharts);

      // Set up data for visible chart.
      var primaryData = [
        ['NBA Finals', 22.4],
        ['NFL Super Bowl', 111.3],
        ['MLB World Series', 19.2],
        ['UEFA Champions League Final', 1.9],
        ['NHL Stanley Cup Finals', 6.4],
        ['Wimbledon Men\'s Championship', 2.4]
      ];

      // Set up data for your tooltips.
      var tooltipData = [
        ['Year', 'NBA Finals', 'NFL Super Bowl', 'MLB World Series',
        'UEFA Champions League Final', 'NHL Stanley Cup Finals',
        'Wimbledon Men\'s Championship'],
        ['2005', 12.5, 98.7, 25.3, 0.6, 3.3, 2.8],
        ['2006', 13.0, 90.7, 17.1, 0.8, 2.8, 3.4],
        ['2007', 9.3, 93.0, 15.8, 0.9, 1.8, 3.8],
        ['2008', 14.9, 97.5, 17.1, 1.3, 4.4, 5.1],
        ['2009', 14.3, 98.7, 13.6, 2.1, 4.9, 5.7],
        ['2010', 18.2, 106.5, 19.4, 2.2, 5.2, 2.3],
        ['2011', 17.4, 111.0, 14.3, 4.2, 4.6, 2.7],
        ['2012', 16.8, 111.3, 16.6, 2.0, 2.9, 3.9],
        ['2013', 16.6, 108.7, 12.7, 1.4, 5.8, 2.5],
        ['2014', 15.7, 111.3, 15.0, 1.9, 4.7, 2.4]
      ];

      var primaryOptions = {
        title: 'Highest U.S. Viewership for Most Recent Event (in millions)',
        legend: 'none',
        tooltip: {isHtml: true} // This MUST be set to true for your chart to show.
      };

      var tooltipOptions = {
        title: 'U.S. Viewership Over The Last 10 Years (in millions)',
        legend: 'none'
      };

      // Draws your charts to pull the PNGs for your tooltips.
      function drawTooltipCharts() {

        var data = new google.visualization.arrayToDataTable(tooltipData);
        var view = new google.visualization.DataView(data);

        // For each row of primary data, draw a chart of its tooltip data.
        for (var i = 0; i < primaryData.length; i++) {

          // Set the view for each event's data
          view.setColumns([0, i + 1]);

          var hiddenDiv = document.getElementById('hidden_div');
          var tooltipChart = new google.visualization.LineChart(hiddenDiv);

          google.visualization.events.addListener(tooltipChart, 'ready', function() {

            // Get the PNG of the chart and set is as the src of an img tag.
            var tooltipImg = '<img src="' + tooltipChart.getImageURI() + '">';

            // Add the new tooltip image to your data rows.
            primaryData[i][2] = tooltipImg;

          });
          tooltipChart.draw(view, tooltipOptions);
        }
        drawPrimaryChart();
      }

      function drawPrimaryChart() {

        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Event');
        data.addColumn('number', 'Highest Recent Viewership');

        // Add a new column for your tooltips.
        data.addColumn({
          type: 'string',
          label: 'Tooltip Chart',
          role: 'tooltip',
          'p': {'html': true}
        });

        // Add your data (with the newly added tooltipImg).
        data.addRows(primaryData);

        var visibleDiv = document.getElementById('visible_div');
        var primaryChart = new google.visualization.ColumnChart(visibleDiv);
        primaryChart.draw(data, primaryOptions);

      }
    </script>
  </head>
<body>
<div id="hidden_div" style="display:none"></div>
<div id="visible_div" style="height:300px"></div>
</body>
</html>

도움말 작업

도움말에 자바스크립트 정의 작업도 포함할 수 있습니다. 간단한 예로, 다음은 사용자가 '샘플 도서 보기'를 클릭할 때 대화상자를 팝업하는 작업이 포함된 도움말입니다.

사용자가 파이의 웨지를 선택하면 tooltip 옵션이 트리거되어 setAction에 정의된 코드가 실행됩니다.

        google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Genre', 'Percentage of my books'],
          ['Science Fiction', 217],
          ['General Science', 203],
          ['Computer Science', 175],
          ['History', 155],
          ['Economics/Political Science', 98],
          ['General Fiction', 72],
          ['Fantasy', 51],
          ['Law', 29]
        ]);

        var chart = new google.visualization.PieChart(
          document.getElementById('tooltip_action'));

        var options = { tooltip: { trigger: 'selection' }};

        chart.setAction({
          id: 'sample',
          text: 'See sample book',
          action: function() {
            selection = chart.getSelection();
            switch (selection[0].row) {
              case 0: alert('Ender\'s Game'); break;
              case 1: alert('Feynman Lectures on Physics'); break;
              case 2: alert('Numerical Recipes in JavaScript'); break;
              case 3: alert('Truman'); break;
              case 4: alert('Freakonomics'); break;
              case 5: alert('The Mezzanine'); break;
              case 6: alert('The Color of Magic'); break;
              case 7: alert('The Law of Superheroes'); break;
            }
          }
        });

        chart.draw(data, options);
      }

작업은 visible, enabled, 둘 다이거나 둘 다 될 수 없습니다. Google 차트가 렌더링될 때 도움말 작업은 표시되는 경우에만 표시되고 사용 설정된 경우에만 클릭할 수 있습니다. (사용 중지되어 있지만 표시되는 작업은 비활성화됩니다.)

visible 및 enabled는 true 또는 false 값을 반환하는 함수여야 합니다. 이러한 기능은 요소 ID 및 사용자 선택에 따라 달라질 수 있으므로 작업의 공개 상태와 클릭 가능성을 세밀하게 조정할 수 있습니다.

도움말은 focus 및 selection에서 트리거될 수 있습니다. 하지만 도움말 작업을 사용하는 경우 selection를 사용하는 것이 좋습니다. 그러면 도움말이 유지되어 사용자가 작업을 더 쉽게 선택할 수 있습니다.

물론 작업이 알림일 필요는 없습니다. JavaScript로 할 수 있는 모든 일, 작업에서 할 수 있습니다. 여기서는 두 가지 작업을 추가합니다. 하나는 원형 차트의 웨지를 확대하고 다른 하나는 축소합니다.

        google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Genre', 'Percentage of my books'],
          ['Science Fiction', 217],
          ['General Science', 203],
          ['Computer Science', 175],
          ['History', 155],
          ['Economics & Political Science', 98],
          ['General Fiction', 72],
          ['Fantasy', 51],
          ['Law', 29]
        ]);

        var chart = new google.visualization.PieChart(
          document.getElementById('tooltip_action_2'));

        var options = { tooltip: { trigger: 'selection' }};

        chart.setAction({
          id: 'increase',
          text: 'Read 20 more books',
          action: function() {
            data.setCell(chart.getSelection()[0].row, 1,
                         data.getValue(chart.getSelection()[0].row, 1) + 20);
            chart.draw(data, options);
          }
        });

        chart.setAction({
          id: 'decrease',
          text: 'Read 20 fewer books',
          action: function() {
            data.setCell(chart.getSelection()[0].row, 1,
                         data.getValue(chart.getSelection()[0].row, 1) - 20);
            chart.draw(data, options);
          }
        });

        chart.draw(data, options);
      }

데이터 주석 달기

열 역할로 tooltip 대신 annotationText를 사용하여 Google 차트에 텍스트를 직접 오버레이할 수 있습니다. 주석에 마우스를 가져가면 도움말을 볼 수 있습니다.

function drawChart() {
  var dataTable = new google.visualization.DataTable();
  dataTable.addColumn('string', 'Year');
  dataTable.addColumn('number', 'USA');
  dataTable.addColumn({type: 'string', role: 'annotation'});
  dataTable.addColumn({type: 'string', role: 'annotationText', p: {html:true}});
  dataTable.addColumn('number', 'China');
  dataTable.addColumn('number', 'UK');
  dataTable.addRows([
    ['2000',  94, '',  '', 58, 28],
    ['2004', 101, '',  '', 63, 30],
    ['2008', 110, 'An all time high!', '<img width=100px src="https://upload.wikimedia.org/wikipedia/en/a/a4/Flag_of_the_United_States.svg">', 100, 47],
    ['2012', 104, '',  '', 88, 65]
  ]);

  var options = { tooltip: {isHtml: true}};
  var chart = new google.visualization.LineChart(document.getElementById('tt_6_annotation'));
  chart.draw(dataTable, options);
}

지원되는 차트

HTML 도움말은 현재 다음 차트 유형에 지원됩니다.

annotationText 또는 tooltip 역할을 사용하는 경우 역할에 대한 문서를 참조하여 향후 변경사항과 향후 문제를 방지하는 방법을 알아보세요.