Etykiety

  1. Tooltips: wprowadzenie
  2. Określanie typu etykietki
  3. Standardowe etykietki
  4. Dostosowywanie treści etykietki
  5. Używanie etykietek HTML
  6. Dostosowywanie treści HTML
  7. Etykietki dotyczące obrotu
  8. Umieszczanie wykresów na etykietkach
  9. Etykieta – działania
  10. Dodawanie adnotacji do danych
  11. Obsługiwane wykresy

Etykietki: wprowadzenie

Etykietki to małe pola, które pojawiają się po najechaniu kursorem na element. (karty informacyjne są bardziej ogólne i mogą pojawiać się w dowolnym miejscu ekranu; etykietki zawsze są dołączone do jakiegoś elementu, np. kropki na wykresie punktowym lub słupka na wykresie słupkowym).

Z tej dokumentacji dowiesz się, jak tworzyć i dostosowywać etykietki w Wykresach Google.

Określanie typu etykietki

Wykresy Google automatycznie tworzą etykietki dla wszystkich głównych wykresów. Domyślnie będą renderowane jako SVG, z wyjątkiem IE 8, gdzie będą renderowane jako VML. Możesz tworzyć etykietki HTML na głównych wykresach, określając tooltip.isHtml: true w opcjach wykresu przekazywanych do wywołania draw(). Umożliwia to także tworzenie działań podpowiedzi.

Standardowe etykietki

W przypadku braku treści niestandardowych treść etykietki jest generowana automatycznie na podstawie danych bazowych. Aby wyświetlić etykietkę, najedź kursorem na dowolny słupek na wykresie.

Najedź kursorem na słupki, aby wyświetlić standardowe etykietki.

Dostosowywanie etykietek

W tym przykładzie dodajesz niestandardową treść do etykietek, dodając nową kolumnę do tabeli DataTable i oznaczając ją rolą etykietki.

Uwaga: wizualizacja wykresu bąbelkowego nie jest obsługiwana. 

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

Używanie etykietek HTML

Ten przykład stanowi kontynuację poprzedniego, włączając etykietki HTML. Zwróć uwagę na dodanie do opcji wykresu 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);
      }

Nie wygląda to zbytnio, ale teraz możemy dostosować kod HTML.

Dostosowywanie treści HTML

We wszystkich poprzednich przykładach były używane etykietki zawierające zwykły tekst, ale prawdziwe informacje o nich działają, gdy można je dostosować za pomocą znaczników HTML. Aby włączyć tę funkcję, musisz wykonać 2 czynności:

  1. W opcjach wykresu określ tooltip.isHtml: true. Spowoduje to, że wykres będzie rysował etykietki w kodzie HTML (a nie w formacie SVG).
  2. Oznacz całą kolumnę lub konkretną komórkę w tabeli danych za pomocą właściwości niestandardowej html. Kolumna z danymi z rolą etykietki i właściwością HTML miałaby postać:
    dataTable.addColumn({'type': 'string', 'role': 'tooltip', 'p': {'html': true}})

    Uwaga: nie działa to w przypadku wizualizacji wykresu bąbelkowego. Zawartość etykiet HTML wykresu bąbelkowego nie można dostosowywać.

Ważne: upewnij się, że kod HTML w etykietkach pochodzi z zaufanego źródła. Jeśli niestandardowa treść HTML zawiera jakiekolwiek treści wygenerowane przez użytkowników, kluczowe jest omijanie ich. W przeciwnym razie Twoje atrakcyjne wizualizacje mogą być narażone na ataki XSS.

Aby ustawić niestandardową treść HTML, wystarczy dodać tag <img> lub pogrubić tekst:

Niestandardowa treść HTML może też zawierać treści generowane dynamicznie. Dodamy tu etykietkę zawierającą dynamicznie generowaną tabelę dla każdej wartości kategorii. Etykietka jest dołączona do wartości wiersza, dlatego najechanie na dowolny słupek powoduje wyświetlenie etykietki HTML.

Ten przykład pokazuje, jak można dołączyć niestandardową etykietkę HTML do kolumny domeny. (W poprzednich przykładach była ona umieszczona w kolumnie danych). Aby włączyć etykietkę dla osi domeny, ustaw opcję 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>';
}

Etykietki dotyczące obrotu

Etykietki w Wykresach Google można obracać za pomocą CSS. Na wykresie poniżej etykietki są obracane o 30° w prawo za pomocą wbudowanego kodu CSS bezpośrednio przed elementem div wykresu:

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

Pamiętaj, że będzie to działać tylko w przypadku etykietek HTML, tj. tych z opcją 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>

Umieszczanie wykresów na etykietkach

Etykietki HTML mogą zawierać większość treści HTML – nawet Wykres Google. Dzięki wykresom wewnątrz etykiet użytkownicy mogą uzyskać dodatkowe informacje, gdy najedziesz kursorem na element danych. Jest to dobry sposób na szybkie wyświetlenie ogólnych szczegółowych informacji i umożliwienie im głębszego dobierania informacji w dowolnej chwili.

Poniższy wykres kolumnowy przedstawia najwyższą oglądalność kilku ważnych wydarzeń sportowych w ostatnim czasie. Etykietki przy każdym z nich przedstawiają wykres liniowy średniej oglądalności w ciągu ostatnich 10 lat.

Warto zwrócić uwagę na kilka kwestii. Najpierw należy narysować wykres do druku dla każdego zbioru danych, który ma być wyświetlany w etykietce. Po drugie, każdy wykres etykietki wymaga „gotowego” modułu obsługi zdarzeń, który jest wywoływany przez addListener w celu utworzenia wykresu do wydrukowania.

WAŻNE: wszystkie etykietki muszą być rysowane przed wykresem głównym. Jest to konieczne, aby pobrać obrazy i dodać je do tabeli DataTable na wykresie głównym.

Ważne części
      // 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);

      }
Cała strona internetowa
<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>

Etykietki

Etykietki mogą też zawierać działania zdefiniowane w JavaScripcie. Oto prosty przykład z etykietą z działaniem, które wyświetla okno, gdy użytkownik kliknie „Zobacz przykładową książkę”:

Opcja tooltip jest aktywowana, gdy użytkownik wybierze wycinek koła, co powoduje uruchomienie kodu zdefiniowanego w elemencie 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);
      }

Działaniami mogą być visible, enabled, obie albo żadna. Gdy wykres Google jest renderowany, etykietka z działaniem pojawia się tylko wtedy, gdy jest widoczna i można ją kliknąć tylko wtedy, gdy jest włączona. (Wyłączone, ale widoczne działania są wyszarzone).

visible i enabled powinny być funkcjami, które zwracają wartości prawda lub fałsz. Funkcje te mogą zależeć od identyfikatora elementu i wyboru użytkownika, co pozwala dostosować widoczność działań i klikalność.

Etykietki mogą aktywować się zarówno w focus, jak i selection. Jednak w przypadku działań związanych z etykietą zalecany jest selection. Dzięki temu etykietka zachowuje się nieprzerwanie, dzięki czemu użytkownik może łatwiej wybrać działanie.

Nie muszą to być oczywiście alerty – wszystko, co możesz zrobić w języku JavaScript, możesz zrobić na poziomie działania. Dodamy w tym miejscu 2 działania: jedno – powiększanie klina wykresu kołowego i drugie – jego zmniejszanie.

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

Dodawanie adnotacji do danych

Możesz nakładać tekst bezpośrednio na Wykres Google, stosując annotationText zamiast tooltip jako rolę kolumny. (etykietkę można zobaczyć, najeżdżając kursorem myszy na adnotację).

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

Obsługiwane wykresy

Etykietki HTML są obecnie obsługiwane w przypadku tych typów wykresów:

Jeśli używasz ról annotationText lub tooltip, zapoznaj się z dokumentacją dotyczącą ról, aby poznać przyszłe zmiany i dowiedzieć się, jak uniknąć problemów w przyszłości.