İ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ı kullanma
  6. HTML içeriğini özelleştirme
  7. Dönüşümlü ipuçları
  8. İpuçlarına grafik yerleştirme
  9. İpucu işlemleri
  10. Verilere açıklama ekleme
  11. Desteklenen grafikler

İpuçları: giriş

İpuçları, bir öğenin üzerine geldiğinizde açılan küçük kutulardır. (Fare kartları daha geneldir ve ekranın herhangi bir yerinde görünebilir. İpuçları her zaman dağılım grafiğindeki bir nokta veya çubuk grafikteki bir çubuk gibi bir öğeye eklenir.)

Bu dokümanda, Google Grafikler'deki ipuçlarını nasıl oluşturacağınızı ve özelleştireceğinizi öğreneceksiniz.

İpucu türünü belirtme

Google Grafikler, tüm temel grafikler için otomatik olarak ipuçları oluşturur. VML olarak oluşturuldukları IE 8 altında varsayılan olarak SVG biçiminde oluşturulurlar. draw() çağrısına gönderilen grafik seçeneklerinde tooltip.isHtml: true belirterek temel grafiklerde HTML ipuçları oluşturabilirsiniz. Böylece Araç İpucu İşlemleri de oluşturabilirsiniz.

Standart ipuçları

Özel içerik yoksa ipucu içeriği temel verilere göre otomatik olarak oluşturulur. Fareyle grafikteki çubuklardan herhangi birinin üzerine gelerek 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 ipuçlarına özel içerik ekliyoruz.

Not: Bu, baloncuk grafiği 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 ipuçlarını kullanma

Bu örnek, HTML ipuçlarını etkinleştirerek önceki örneği temel alır. Grafik seçeneklerine tooltip.isHtml: true 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 pek farklı görünmüyor, ancak artık HTML'yi özelleştirebiliriz.

HTML içeriğini özelleştirme

Önceki örneklerin tümünde düz metin içeriğe sahip kullanılmış ipuçları bulunsa da HTML ipuçlarının asıl gücü, HTML işaretlemesini kullanarak özelleştirilebildiğinde ortaya çıkar. Bunu etkinleştirmek için iki şey yapmanız gerekir:

  1. Grafik seçeneklerinde tooltip.isHtml: true değerini belirtin. Bu, grafiğe, ipuçlarının HTML'de çizilmesini (SVG'nin aksine) bildirir.
  2. Veri tablosundaki bir sütunun tamamını veya belirli bir hücreyi html özel özelliğiyle işaretleyin. İpucu rolü ve HTML özelliğini içeren bir veri tablosu sütunu şöyle olur:
    dataTable.addColumn({'type': 'string', 'role': 'tooltip', 'p': {'html': true}})

    Not: Bu özellik, Balon Grafiği görselleştirmesinde çalışmaz. Balon Grafik HTML 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ğinde kullanıcı tarafından oluşturulan içerik varsa bu içerikten kaçınmak çok önemlidir. Aksi takdirde, güzel görselleriniz XSS saldırılarına açık olabilir.

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

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

Bu örnekte, özel bir HTML ipucunun bir alan sütununa nasıl eklenebileceği gösterilmektedir. (Önceki örneklerde bu boyut bir veri sütununa eklenmişti.) Alan ekseni için ipucunu etkinleştirmek üzere focusTarget: 'category' seçeneğini ayarlayın. 

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ürülen ipuçları

Google Grafikler'deki ipuçları, CSS ile döndürülebilir. Aşağıdaki grafikte, ipuçları grafik div öğesinden hemen önceki şu satır içi CSS kullanılarak saat yönünde 30° döndürülmüştür:

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

Bunun yalnızca HTML ipuçlarında (isHtml: true seçeneğine sahip olanlar) işe yarayacağı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 de dahil olmak üzere hoşunuza giden tüm HTML içeriklerinin çoğunu içerebilir. İpuçlarının içindeki grafikler sayesinde kullanıcılarınız bir veri öğesinin üzerine geldiklerinde daha fazla bilgi edinebilir. Bu da kullanıcıların istedikleri zaman daha ayrıntılı bilgi edinmesine olanak tanırken bir bakışta yüksek düzeyde ayrıntı sağlamanın iyi bir yoludur.

Aşağıdaki sütun grafikte, birkaç önemli spor etkinliğinin en son izleyici sayılarına ait bir grafik gösterilmektedir. Her birinin ipuçlarında, son on yıldaki ortalama izleyici sayısının çizgi grafiği gösterilmektedir.

Burada dikkat edilmesi gereken birkaç nokta var. Öncelikle, ipucunda gösterilecek her veri kümesi için yazdırılabilir bir grafik çizilmelidir. İkinci olarak, her ipucu grafiğinin, yazdırılabilir bir grafik oluşturmak için addListener aracılığıyla adını verdiğimiz bir "hazır" etkinlik işleyici olması gerekir.

ÖNEMLİ: Tüm ipucu grafikleri, birincil grafikten önce çizilmelidir. Bu, birincil grafiğin Veri Tablosuna eklenecek resimleri yakalamak 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 tanımlı işlemleri de içerebilir. Basit bir örnek vermek gerekirse, kullanıcı "Örnek kitaba bak"ı tıkladığında iletişim kutusu açılan bir ipucunu aşağıda bulabilirsiniz:

tooltip seçeneği, kullanıcı pastanın bir takozunu seçtiğinde tetiklenir ve 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 ikisi de olabilir. Bir Google Grafiği oluşturulduğunda, ipucu işlemi yalnızca görünür olduğunda gösterilir ve yalnızca etkinse tıklanabilir. (Devre dışı ancak görünür işlemler devre dışıdır.)

visible ve enabled, doğru veya yanlış değerleri döndüren işlevler olmalıdır. Bu işlevler öğe kimliğine ve kullanıcı seçimine bağlı olabilir. Bu sayede, işlem görünürlüğü ve tıklanabilirliğinde ince ayar yapabilirsiniz.

İpuçları, focus ve selection üzerinde tetiklenebilir. Ancak, ipucu işlemlerinde selection tercih edilir. Bu, ipucunun kalıcı olmasına neden olarak kullanıcının işlemi daha kolay seçmesini sağlar.

Elbette işlemlerin uyarı olması gerekmez: JavaScript'ten veya bir işlemden yapabileceğiniz her şeyi. Burada iki işlem ekleyeceğiz: biri pasta grafiğimizin parçasını büyütmek, diğeri de küçültmek için.

        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 açıklama ekleme

Sütun rol olarak tooltip yerine annotationText kullanarak doğrudan bir Google Grafiğine metin 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 gelecekte yaşanabilecek sorunları önleme hakkında bilgi edinmek için lütfen roller hakkındaki belgeleri inceleyin.