Tooltip

  1. Tooltips: pengantar
  2. Menentukan jenis tooltip
  3. tooltip standar
  4. Menyesuaikan konten tooltip
  5. Menggunakan tooltip HTML
  6. Menyesuaikan konten HTML
  7. tooltip berputar
  8. Menempatkan diagram di tooltip
  9. Tindakan Tooltip
  10. Menganotasi data
  11. Diagram yang didukung

Tips alat: pengantar

Tooltip adalah kotak kecil yang muncul saat Anda mengarahkan kursor ke sesuatu. (Kartu profil lebih umum, dan dapat muncul di mana saja pada layar; tooltip selalu melekat pada sesuatu, seperti titik pada diagram sebar, atau batang pada diagram batang.)

Dalam dokumentasi ini, Anda akan mempelajari cara membuat dan menyesuaikan tooltip di Google Chart.

Menentukan jenis tooltip

Google Chart secara otomatis membuat tooltip untuk semua diagram inti. Class tersebut akan dirender sebagai SVG secara default, kecuali pada IE 8 yang akan dirender sebagai VML. Anda dapat membuat tooltip HTML pada diagram inti dengan menentukan tooltip.isHtml: true di opsi diagram yang diteruskan ke panggilan draw(), yang juga akan memungkinkan Anda membuat Tindakan Tooltip.

tooltip standar

Jika tidak ada konten kustom apa pun, konten tooltip akan otomatis dibuat berdasarkan data pokok. Anda dapat melihat tooltip dengan mengarahkan mouse ke salah satu batang dalam diagram.

Arahkan kursor ke batang untuk melihat tooltip standar.

Menyesuaikan konten tooltip

Dalam contoh ini, kita menambahkan konten kustom ke tooltip dengan menambahkan kolom baru ke DataTable dan menandainya dengan peran tooltip.

Catatan: ini tidak didukung oleh visualisasi Bubble Chart. 

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

Menggunakan tooltip HTML

Contoh ini melanjutkan contoh sebelumnya dengan mengaktifkan tooltip HTML. Perhatikan penambahan tooltip.isHtml: true ke opsi diagram. 

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

Tidak terlihat jauh berbeda, tetapi sekarang kita dapat menyesuaikan HTML.

Menyesuaikan konten HTML

Semua contoh sebelumnya telah menggunakan tooltip dengan konten teks biasa, tetapi keunggulan tooltip HTML sebenarnya berkat jika Anda dapat menyesuaikannya menggunakan markup HTML. Untuk mengaktifkannya, Anda harus melakukan dua hal:

  1. Tentukan tooltip.isHtml: true di opsi diagram. Tindakan ini akan memberi tahu diagram untuk menggambar tooltip dalam HTML (bukan SVG).
  2. Tandai seluruh kolom, atau sel tertentu, dalam tabel data dengan properti kustom html. Kolom tabel data dengan peran tooltip dan properti HTML akan menjadi:
    dataTable.addColumn({'type': 'string', 'role': 'tooltip', 'p': {'html': true}})

    Catatan: ini tidak berfungsi dengan visualisasi Bubble Chart. Konten tooltip HTML Bubble Chart tidak dapat disesuaikan.

Penting: Pastikan HTML di tooltip berasal dari sumber tepercaya. Jika konten HTML kustom berisi konten buatan pengguna, penting untuk meng-escape konten tersebut. Jika tidak, visualisasi yang indah mungkin rentan terhadap serangan XSS.

Konten HTML kustom dapat sesederhana menambahkan tag <img> atau menebalkan teks tertentu:

Konten HTML kustom juga dapat menyertakan konten yang dihasilkan secara dinamis. Di sini, kami menambahkan tooltip yang berisi tabel yang dibuat secara dinamis untuk setiap nilai kategori. Karena tooltip dilampirkan ke nilai baris, arahkan kursor ke salah satu batang akan menampilkan tooltip HTML.

Contoh ini menunjukkan cara tooltip HTML kustom dapat dilampirkan ke kolom domain. (Pada contoh sebelumnya, ini dilampirkan ke kolom data.) Guna mengaktifkan tooltip untuk sumbu domain, tetapkan opsi 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>';
}

tooltip berputar

Tooltip di Google Chart dapat dirotasi dengan CSS. Pada diagram di bawah, tooltip diputar 30° searah jarum jam menggunakan CSS inline ini tepat sebelum div diagram:

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

}

Perhatikan bahwa ini hanya akan berfungsi untuk tooltip HTML, yaitu dengan opsi 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>

Menempatkan diagram di tooltip

Tooltip HTML dapat menyertakan hampir semua konten HTML yang Anda suka—bahkan Google Chart. Dengan diagram di dalam tooltip, pengguna Anda bisa mendapatkan informasi tambahan saat mengarahkan kursor ke elemen data: cara yang tepat untuk memberikan detail tingkat tinggi secara sekilas, sekaligus memungkinkan pengguna mendalaminya saat mereka menginginkannya.

Diagram kolom di bawah menunjukkan diagram penayangan terbaru yang tertinggi untuk beberapa acara olahraga besar, dengan tooltip untuk setiap acara menunjukkan diagram garis jumlah penayangan rata-rata selama sepuluh tahun terakhir.

Beberapa hal yang perlu diperhatikan di sini. Pertama, diagram yang dapat dicetak perlu digambar untuk setiap set data yang akan ditampilkan dalam tooltip. Kedua, setiap diagram tooltip memerlukan pengendali peristiwa"siap", yang kita panggil melalui addListener untuk membuat diagram yang dapat dicetak.

PENTING: Semua diagram tooltip harus digambar sebelum diagram utama. Tindakan ini diperlukan untuk mengambil gambar yang akan ditambahkan ke DataTable diagram utama.

Bagian Penting
      // 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);

      }
Halaman Web Lengkap
<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>

Tindakan tooltip

Tooltip juga dapat mencakup tindakan yang ditentukan JavaScript. Sebagai contoh sederhana, berikut tooltip dengan tindakan yang memunculkan kotak dialog saat pengguna mengklik "Lihat buku contoh":

Opsi tooltip terpicu saat pengguna memilih irisan lingkaran, yang menyebabkan kode yang ditentukan dalam setAction dijalankan:

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

Tindakan dapat berupa visible, enabled, keduanya, atau tidak keduanya. Saat Diagram Google dirender, tindakan tooltip hanya ditampilkan jika terlihat, dan hanya dapat diklik jika diaktifkan. (Dinonaktifkan tetapi tindakan yang terlihat berwarna abu-abu.)

visible dan enabled harus berupa fungsi yang menampilkan nilai benar atau salah. Fungsi tersebut dapat bergantung pada ID elemen dan pilihan pengguna, sehingga Anda dapat menyesuaikan visibilitas tindakan dan kemampuan diklik.

Tooltip dapat dipicu di focus dan selection. Namun, dengan tindakan tooltip, selection lebih disarankan. Hal ini menyebabkan tooltip bertahan, sehingga pengguna dapat memilih tindakan dengan lebih mudah.

Tentu saja, tindakan tidak harus berupa peringatan: apa pun yang dapat Anda lakukan dari JavaScript, dapat Anda lakukan dari suatu tindakan. Di sini, kita akan menambahkan dua tindakan: satu untuk memperbesar bagian dalam bagan pai, dan satu lagi untuk mengecilkan.

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

Menganotasi data

Anda dapat menempatkan teks langsung ke Google Chart dengan menggunakan annotationText, bukan tooltip sebagai kolom peran. (Anda dapat melihat tooltip dengan mengarahkan kursor ke anotasi menggunakan mouse.)

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

Diagram yang didukung

Saat ini, tooltip HTML didukung untuk jenis diagram berikut:

Jika Anda menggunakan peran annotationText atau tooltip, lihat dokumentasi tentang peran untuk membaca perubahan mendatang dan cara menghindari masalah pada masa mendatang.