Ta strona została przetłumaczona przez Cloud Translation API.

Etykiety

Wskazówki: wprowadzenie
Określanie typu etykietki
Standardowe etykietki
Dostosowywanie treści etykietki
Używanie etykiet HTML
Dostosowywanie treści HTML
Podpowiedzi rotacji
Umieszczanie wykresów w etykietkach
Etykietki dotyczące działań
Dodawanie adnotacji do danych
Obsługiwane wykresy

Wskazówki: 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 na ekranie – etykietki są zawsze do siebie przypisane, np. kropka na wykresie rozproszonym lub słupek na wykresie słupkowym).

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

Funkcja Wykresy Google automatycznie tworzy etykietki dla wszystkich wykresów podstawowych. Domyślnie są one renderowane jako SVG z wyjątkiem przeglądarki IE 8, w której są renderowane jako VML. W etykietach podstawowych możesz tworzyć etykietki HTML, określając wartość tooltip.isHtml: true w opcjach wykresów przekazywanych do wywołania draw(), które umożliwiają również tworzenie działań podpowiedzi.

Standardowe etykietki

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

Najedź kursorem na słupki, aby zobaczyć standardowe podpowiedzi.

W tym przykładzie dodajemy etykietki do etykietek, dodając nową kolumnę do tabeli danych 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 etykiet HTML

Ten przykład jest oparty na poprzedniej, włączając etykiety HTML. Zwróć uwagę na dodanie tooltip.isHtml: true do opcji wykresu.

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

Niewiele się zmieniło, ale teraz możemy dostosować kod HTML.

Dostosowywanie treści HTML

We wszystkich poprzednich przykładach wszystkie były używane w formie zwykłego tekstu, ale w przypadku etykiet HTML istnieje możliwość ich dostosowania za pomocą znaczników HTML. Aby to zrobić, musisz wykonać 2 czynności:

Podaj tooltip.isHtml: true w opcjach wykresu. Dzięki temu wykres zawiera etykietki w formacie HTML (a nie SVG).
Oznacz całą kolumnę lub konkretną komórkę w tabeli danych właściwością niestandardową html. Kolumna danych z rolą etykietki i właściwością HTML będzie wyglądać tak:
dataTable.addColumn({'type': 'string', 'role': 'tooltip', 'p': {'html': true}})
Uwaga: nie działa to w przypadku wizualizacji Wykresu bąbelkowego. Nie można dostosować zawartości etykiet HTML wykresu bąbelkowego.

Ważne: kod HTML etykietki powinien pochodzić z zaufanego źródła. Jeśli niestandardowa treść HTML zawiera jakiekolwiek treści użytkowników, znaczenie jej jest bez znaczenia. W przeciwnym razie atrakcyjne wizualizacje mogą być podatne na ataki XSS.

W tym celu wystarczy dodać tag <img> lub pogrubić tekst:

Niestandardowe treści HTML mogą też zawierać treści generowane dynamicznie. Dodajemy tu etykietkę zawierającą dynamicznie generowaną tabelę dla każdej wartości kategorii. Etykietka jest dołączona do wartości wiersza, dlatego po najechaniu na dowolny słupek pojawi się etykietka HTML.

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

Podpowiedzi dotyczące rotacji

Etykietki w Wykresach Google można wyświetlać przy użyciu CSS. Na wykresie poniżej etykietki są obrócone w prawo o 30° za pomocą tego wbudowanego arkusza CSS bezpośrednio przed elementem div wykresu:


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

Działa to 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 w etykietkach

Etykietka HTML może zawierać większość treści HTML, które mogą Ci się spodobać – nawet wykres Google. Dzięki etykietom wewnątrz etykietek użytkownicy mogą uzyskać dodatkowe informacje, najeżdżając kursorem na element danych. To świetny sposób, aby od razu zobaczyć szczegóły na poziomie ogólnym, a użytkownikom przejść do szczegółów.

Wykres kolumnowy poniżej przedstawia najnowsze dane o najnowszych wydarzeniach sportowych, przy czym w każdym z nich widać etykietę liniową przedstawiającą średnią oglądalność w ciągu ostatnich 10 lat.

Pamiętaj o kilku sprawach. Aby wyświetlić zbiór danych w etykietce, musisz najpierw narysować wydrukowany wykres. Po drugie, każdy wykres etykietki wymaga modułu obsługi zdarzeń „gotowego”, który wywołujemy za pomocą addListener, aby utworzyć drukowany wykres.

WAŻNE: wszystkie wykresy etykietek muszą być narysowane przed wykresem głównym. Jest to konieczne do pobrania obrazów i dodania ich do tabeli danych 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);

      }

Pełna 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>

Etykietka może też zawierać działania zdefiniowane w języku JavaScript. Oto prosty przykład z etykietką, która otworzy się, gdy użytkownik kliknie „Zobacz przykładową książkę”:

Opcja tooltip jest wywoływana, gdy użytkownik wybiera podkładkę klinową, powodując uruchomienie kodu zdefiniowanego w narzędziu 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);
      }

Możliwe działania: visible, enabled, i obie. Podczas renderowania wykresu Google działania dotyczące etykietek są widoczne tylko wtedy, gdy są widoczne. Klikalne są tylko wtedy, gdy są włączone. (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 umożliwia dostosowanie widoczności i klikalności.

Etykietka może być uruchamiana zarówno w witrynach focus, jak i selection. Jednak w przypadku etykietek zalecane jest ustawienie selection. Dzięki temu etykietka będzie trwała, co pozwoli użytkownikowi łatwiej wybrać działanie.

Rzeczywiste alerty nie są oczywiste. Możesz wykonywać je w języku JavaScript. Dodasz tutaj 2 działania: jedno: aby powiększyć podkładkę klinową, i drugie, by ją zmniejszyć.

        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 nałożyć tekst bezpośrednio na wykres Google, korzystając z kolumny annotationText zamiast tooltip jako kolumny role. (aby wyświetlić etykietkę, najedź na nią kursorem myszy).

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

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

Jeśli korzystasz z ról annotationText lub tooltip, zapoznaj się z dokumentacją ról, aby dowiedzieć się więcej o przyszłych zmianach i o tym, jak uniknąć problemów.