İpuçları

  1. İpuçları: giriş
  2. İpucu türünü belirtme
  3. Standart ipuçları
  4. İpucu içeriğini özelleştirme
  5. HTML ipuçlarınızı kullanma
  6. HTML içeriğini özelleştirme
  7. Döndürme ipuçları
  8. İpuçlarını grafiklere yerleştirme
  9. İpucu işlemleri
  10. Verilere ek açıklama ekleme
  11. Desteklenen grafikler

İpuçları: giriş

İpucu, bir öğenin üzerine geldiğinizde açılan küçük kutulardır. (Bilgi kartları daha geneldir ve ekranda herhangi bir yerde görünebilir; ipuçları her zaman bir yere grafik grafiğindeki bir nokta veya çubuk grafikteki bir çubuk gibi noktalara eklenir.)

Bu dokümanda, Google Grafikler'de nasıl ipucu oluşturacağınızı ve bunları nasıl özelleştireceğinizi öğreneceksiniz.

İpucu türünü belirtme

Google Listeleri tüm temel grafikler için otomatik olarak ipuçları oluşturur. IE 8 altında VML olarak oluşturulacakları hariç, varsayılan olarak SVG olarak oluşturulurlar. draw() çağrısına iletilen grafik seçeneklerinde tooltip.isHtml: true belirterek temel grafiklerde HTML araç ipuçları oluşturabilirsiniz. Bu, Araç İpucu İşlemleri oluşturmanıza da olanak tanır.

Standart ipuçları

Özel içerik olmadığında, temel verilere göre otomatik olarak ipucu içeriği oluşturulur. Farenizi grafikteki çubuklardan herhangi birinin üzerine getirerek ipucunu görebilirsiniz.

Standart ipuçlarını görmek için fareyle çubukların üzerine gelin.

İpucu içeriğini özelleştirme

Bu örnekte, DataTable'a yeni bir sütun ekleyip ipucu rolü ile işaretleyerek özel içeriğe araç ipuçları ekliyoruz.

Not: Bu, Bubble Graphic görselleştirmesi tarafından desteklenmez. 

        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 araç ipuçlarını kullanma

Bu örnek, HTML ipuçlarını etkinleştirerek bir önceki örneğe dayanır. Grafik seçeneklerine tooltip.isHtml: true öğesinin eklendiğini unutmayın. 

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

Bu süreç pek farklı bir işlem gibi görünse de artık HTML'yi özelleştirebiliyoruz.

HTML içeriğini özelleştirme

Önceki örneklerde, düz metin içeriğiyle birlikte kullanılan ipuçları yer alıyordu. Ancak, HTML ipuçlarının gerçek gücü, HTML işaretlemesini kullanarak bunları özelleştirebildiğinizde gerçekleşiyor. Bunu etkinleştirmek için iki işlem yapmanız gerekir:

  1. Grafik seçeneklerinden tooltip.isHtml: true değerini belirtin. Bu şekilde grafik, SVG yerine ipucu olarak HTML'de ipucu çizer.
  2. Veri tablosunda bir sütunun tamamını veya belirli bir hücreyi html özel özelliğiyle işaretleyin. İpucu rolü ve HTML özelliği içeren bir veri tablosu sütunu:
    dataTable.addColumn({'type': 'string', 'role': 'tooltip', 'p': {'html': true}})

    Not: Bu özellik, Bubble Graphic görselleştirmesiyle birlikte çalışmaz. Bubble Chart HTML araç ipuçlarının içeriği özelleştirilemez.

Önemli: İpuçlarınızdaki HTML'nin güvenilir bir kaynaktan geldiğinden emin olun. Özel HTML içeriği kullanıcı tarafından oluşturulan içerik barındırıyorsa bu içerikten çıkış yapmak çok önemlidir. Aksi takdirde, güzel görselleştirmeleriniz XSS saldırılarına açık olabilir.

Özel HTML içeriği, <img> etiketi eklemek veya metni kalın hale getirmek kadar basit olabilir:

Özel HTML içeriği, dinamik olarak oluşturulmuş içerik de içerebilir. Burada, her bir kategori değeri için dinamik olarak oluşturulmuş bir tablo içeren ipucunu ekledik. İpucu satır değerine eklendiğinden, çubukların herhangi birinin üzerine geldiğinizde HTML ipucu gösterilir.

Bu örnekte, özel HTML ipucunun bir alan sütununa nasıl eklenebileceği gösterilmektedir. (Önceki örneklerde bu sütun bir veri sütununa ekliydi.) İpucunu alan ekseninde açmak için focusTarget: 'category' seçeneğini belirleyin. 

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

Döndürme ipuçları

Google Listeleri'ndeki ipuçları CSS ile döndürülebilir. Aşağıdaki grafikte, ipucunun satır içi CSS kullanılarak grafik div'den hemen önce saat yönünde 30° döndürüldüğü söylenebilir:

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

Bunun yalnızca HTML ipuçlarında, yani isHtml: true seçeneğine sahip olanlar için işe yaradığını unutmayın.

<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>

İpuçlarına grafik yerleştirme

HTML ipuçları, Google Grafikleri dahil olmak üzere istediğiniz tüm HTML içeriğini içerebilir. İpuçlarının içinde yer alan grafikler sayesinde kullanıcılarınız fareyle bir veri öğesinin üzerine geldiklerinde daha fazla bilgi edinebilirler. Bu da kullanıcıların hoşlarına gidecek şekilde ilk bakışta üst düzey ayrıntılar sunmalarının iyi bir yoludur.

Aşağıdaki sütun grafikte, son on yılda ortalama izleyici sayısının çizgi grafikle birlikte önemli spor etkinliklerinin en yüksek izleyici sayısını gösteren bir grafik gösterilmektedir.

Dikkat edilmesi gereken birkaç nokta. İlk olarak, ipucunda gösterilecek her veri kümesi için bir yazdırılabilir grafik çizilmelidir. İkinci olarak, her ipucu grafiğinin yazdırılabilir bir grafik oluşturmak için addListener üzerinden çağırdığımız "hazır" etkinlik işleyicisine ihtiyacı vardır.

ÖNEMLİ: Tüm araç ipucu grafikleri, birincil grafikten önce çizilmelidir. Bu, birincil grafiğin Veri Tablosu'na eklenecek resimleri çekmek için gereklidir.

Önemli Bölümler
      // 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);

      }
Tam Web Sayfası
<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>

İpucu işlemleri

İpuçları, JavaScript tarafından tanımlanmış işlemleri de içerebilir. Basit bir örnek olarak, kullanıcı "Örnek kitabı göster" seçeneğini tıkladığında bir iletişim kutusu açan bir işlem içeren ipucunu burada görebilirsiniz:

tooltip seçeneği, kullanıcı turtanın bir şerefini seçtiğinde tetiklenir. Bu da setAction içinde tanımlanan kodun çalıştırılmasına neden olur:

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

İşlemler visible, enabled veya her ikisi birden ya da her ikisi de olabilir. Bir Google Grafiği oluşturulduğunda, yalnızca görünürse bir ipucu işlemi gösterilir ve yalnızca etkinse etkinleştirilir. (Devre dışı ama görünür işlemler devre dışı bırakılır.)

visible ve enabled, doğru veya yanlış değerler döndüren işlevler olmalıdır. Bu işlevler, öğe kimliğine ve kullanıcı seçimine bağlı olarak işlem görünürlüğü ve tıklanabilirliğe ince ayar yapmanıza olanak tanır.

İpuçları, focus ve selection üzerinde tetiklenebilir. Bununla birlikte, ipucu işlemleri kullanıldığında selection tercih edilir. Bu, ipucunun kalıcı hale gelmesine ve kullanıcının işlemi daha kolay seçmesine neden olur.

İşlemlerin uyarı olmasına gerek yoktur: Elbette JavaScript'ten yapabileceğiniz herhangi bir işlemi bir işlemle yapabilirsiniz. Buraya, biri pasta grafiğimizi büyütmek, diğeri de küçültmek için olmak üzere iki işlem ekliyoruz.

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

Verilere ek açıklama ekleme

Sütun olarak rol olarak tooltip yerine annotationText öğesini kullanarak metni doğrudan bir Google Grafiği üzerine yerleştirebilirsiniz. (Farenizle ek açıklamanın üzerine gelerek ipucunu görebilirsiniz.)

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

Desteklenen grafikler

HTML ipuçları şu anda aşağıdaki grafik türleri için desteklenmektedir:

annotationText veya tooltip rollerini kullanıyorsanız gelecekteki değişiklikler ve gelecekteki ağrılardan kaçınma yöntemleri hakkında bilgi edinmek için lütfen roller hakkındaki dokümanları inceleyin.