このページは Cloud Translation API によって翻訳されました。

ツールチップ

ツールチップ: 概要
ツールチップの種類の指定
標準のツールチップ
ツールチップのコンテンツのカスタマイズ
HTML ツールチップの使用
HTML コンテンツのカスタマイズ
ツールチップのローテーション
ツールチップにグラフを配置する
ツールチップの操作
データへのアノテーション付け
サポートされているグラフ

ツールチップ: 概要

ツールチップは、カーソルを合わせたときに表示される小さなボックスです。（ホバーカードはより一般的で、画面の任意の場所に表示されます。ツールチップは、散布図の点や棒グラフの棒などに常に付随しています）。

このドキュメントでは、Google グラフでツールチップを作成してカスタマイズする方法について説明します。

Google グラフでは、すべてのコアグラフのツールチップが自動的に作成されます。デフォルトでは SVG としてレンダリングされます。ただし、IE 8 では VML としてレンダリングされません。コアグラフで HTML ツールチップを作成するには、draw() 呼び出しに渡されるグラフオプションで tooltip.isHtml: true を指定します。これにより、ツールチップアクションも作成できます。

標準のツールチップ

カスタムコンテンツがない場合、ツールチップのコンテンツは基になるデータに基づいて自動生成されます。ツールチップは、グラフ内のいずれかのバーにカーソルを合わせると表示されます。

バーにカーソルを合わせると、標準のツールチップが表示されます。

この例では、ツールチップにカスタムコンテンツを追加するには、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 マークアップを使用してカスタマイズできるときです。これを有効にするには、次の 2 つのことを行う必要があります。

グラフオプションで 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 で回転できます。以下のグラフでは、グラフ 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 ツールチップには、任意の HTML コンテンツ（Google グラフを含む）を含めることができます。ツールチップ内にグラフを使用すると、データ要素にカーソルを合わせたときに追加情報を表示できます。これは、概要を一目で確認でき、ユーザーが必要に応じてさらに詳しい分析を行うための優れた方法です。

以下の縦棒グラフは、いくつかの主要なスポーツイベントの最近の視聴者数の最高値を示しています。各ツールチップには、過去 10 年間の平均視聴者数の折れ線グラフが表示されています。

ここで注意すべき点が 2 つありますまず、ツールチップに表示されるデータセットごとに、印刷可能なグラフを描画する必要があります。次に、各ツールチップグラフには「ready」イベントハンドラが必要です。これは addListener を介して呼び出し、印刷可能なグラフを作成します。

重要: すべてのツールチップグラフは、メインのグラフの前に描画する必要があります。これは、プライマリグラフの 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>

ツールチップには、JavaScript 定義のアクションを含めることもできます。簡単な例として、ユーザーが [サンプルブックを見る] をクリックするとダイアログボックスをポップアップ表示するアクションを含むツールチップを示します。

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 でできることは、すべてアクションから実行できます。ここでは 2 つのアクションを追加します 1 つは円グラフのくさびを拡大しもう 1 つは縮小する

        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);
      }

データへのアノテーション付け

列の Role として 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 のロールを使用している場合は、ロールに関するドキュメントを参照して、今後の変更と将来の問題を回避する方法を確認してください。

ツールチップ コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。