Подсказки

  1. Подсказки: введение
  2. Указание типа подсказки
  3. Стандартные подсказки
  4. Настройка содержимого всплывающей подсказки
  5. Использование всплывающих подсказок HTML
  6. Настройка HTML-контента
  7. Вращающиеся подсказки
  8. Размещение диаграмм во всплывающих подсказках
  9. Действия подсказки
  10. Аннотирование данных
  11. Поддерживаемые диаграммы

Подсказки: введение

Подсказки — это маленькие квадратики, которые появляются, когда вы наводите на что-то курсор. (Hovercards являются более общими и могут появляться в любом месте экрана; всплывающие подсказки всегда прикреплены к чему-либо, например, к точке на точечной диаграмме или к полосе на гистограмме.)

Из этой документации вы узнаете, как создавать и настраивать всплывающие подсказки в Google Charts.

Указание типа подсказки

Google Charts автоматически создает всплывающие подсказки для всех основных диаграмм. По умолчанию они будут отображаться как SVG, за исключением IE 8, где они будут отображаться как VML. Вы можете создавать всплывающие подсказки HTML на основных диаграммах, указавtooltip.isHtml tooltip.isHtml: true в параметрах диаграммы , передаваемых в вызов draw() , что также позволит вам создавать действия всплывающей подсказки .

Стандартные подсказки

При отсутствии какого-либо пользовательского контента содержимое всплывающей подсказки автоматически генерируется на основе базовых данных. Вы можете увидеть всплывающую подсказку, наведя указатель мыши на любой столбец графика.

Наведите указатель мыши на панели, чтобы увидеть стандартные всплывающие подсказки.

Настройка содержимого всплывающей подсказки

В этом примере мы добавляем пользовательский контент во всплывающие подсказки, добавляя новый столбец в DataTable и отмечая его ролью подсказки .

Примечание. Это не поддерживается визуализацией пузырьковой диаграммы .

        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

Этот пример основан на предыдущем за счет включения всплывающих подсказок HTML. Обратите внимание на добавление 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);
      }

Это не сильно отличается, но теперь мы можем настроить HTML.

Настройка HTML-контента

Во всех предыдущих примерах всплывающие подсказки использовались с обычным текстовым содержимым, но настоящая мощь всплывающих подсказок HTML проявляется, когда вы можете настроить их с помощью разметки HTML. Чтобы включить это, вам необходимо сделать две вещи:

  1. Укажите tooltip.isHtml: true в параметрах диаграммы. Это указывает диаграмме отображать всплывающие подсказки в формате HTML (в отличие от SVG).
  2. Отметьте весь столбец или определенную ячейку в таблице данных с помощью настраиваемого свойства html . Столбец с данными с ролью всплывающей подсказки и свойством HTML будет выглядеть так:
    dataTable.addColumn({'type': 'string', 'role': 'tooltip', 'p': {'html': true}})

    Примечание. Это не работает с визуализацией пузырьковой диаграммы . Содержимое HTML-подсказок пузырьковых диаграмм не подлежит настройке.

Важно! Убедитесь, что HTML-код во всплывающих подсказках получен из надежного источника. Если пользовательский HTML-контент содержит какой-либо пользовательский контент, экранирование этого контента имеет жизненно важное значение. В противном случае ваши красивые визуализации могут быть уязвимы для XSS- атак.

Пользовательский HTML-контент может быть таким же простым, как добавление тега <img> или выделение текста жирным шрифтом:

Пользовательский HTML-контент также может включать динамически генерируемый контент. Здесь мы добавляем всплывающую подсказку, содержащую динамически создаваемую таблицу для каждого значения категории. Поскольку всплывающая подсказка прикреплена к значению строки, при наведении курсора на любую полосу отобразится всплывающая подсказка HTML.

В этом примере показано, как пользовательскую всплывающую подсказку HTML можно прикрепить к столбцу домена. (В предыдущих примерах она была прикреплена к столбцу данных.) Чтобы включить всплывающую подсказку для оси домена, установите параметр 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>';
}

Вращающиеся подсказки

Всплывающие подсказки в Google Charts можно вращать с помощью CSS. На диаграмме ниже всплывающие подсказки повернуты на 30° по часовой стрелке с помощью встроенного CSS непосредственно перед элементом диаграммы:

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

Обратите внимание, что это будет работать только для всплывающих подсказок HTML, то есть с опцией 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>

Размещение диаграмм во всплывающих подсказках

Всплывающие подсказки HTML могут включать в себя практически любой HTML-контент, который вам нравится, даже диаграмму Google. Благодаря диаграммам внутри всплывающих подсказок ваши пользователи могут получать дополнительную информацию при наведении курсора на элемент данных: хороший способ с первого взгляда предоставить подробную информацию высокого уровня, позволяя людям погружаться глубже, когда им заблагорассудится.

На столбчатой ​​диаграмме ниже показана диаграмма самой высокой недавней посещаемости нескольких крупных спортивных мероприятий, а подсказки для каждого из них показывают линейную диаграмму средней посещаемости за последние десять лет.

Здесь следует отметить несколько вещей. Во-первых, необходимо нарисовать диаграмму для печати для каждого набора данных, которые будут отображаться во всплывающей подсказке. Во-вторых, каждой диаграмме подсказок нужен «готовый» обработчик событий , который мы вызываем через addListener для создания диаграммы, пригодной для печати.

ВАЖНО: Все диаграммы-подсказки должны быть нарисованы перед основной диаграммой. Это необходимо для того, чтобы получить изображения и добавить их в DataTable основной диаграммы.

Важные детали
      // 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);

      }
Полная веб-страница
<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>

Действия подсказки

Всплывающие подсказки также могут включать действия, определенные JavaScript. В качестве простого примера, вот всплывающая подсказка с действием, которое вызывает диалоговое окно, когда пользователь нажимает «Просмотреть образец книги»:

Опция tooltip срабатывает, когда пользователь выбирает часть пирога, вызывая запуск кода, определенного в 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);
      }

Действия могут быть visible , enabled , обоими или ни одним из них. При отображении диаграммы Google действие всплывающей подсказки отображается только в том случае, если оно видимо, и доступно для щелчка только в том случае, если оно включено. (Отключенные, но видимые действия выделены серым цветом.)

visible и enabled должны быть функции, возвращающие значения true или false. Эти функции могут зависеть от идентификатора элемента и выбора пользователя, что позволяет вам точно настроить видимость и кликабельность действий.

Подсказки могут срабатывать как при focus , так и selection . Однако при использовании действий во всплывающей подсказке selection предпочтительнее. Это приводит к тому, что всплывающая подсказка сохраняется, что позволяет пользователю легче выбрать действие.

Конечно, действия не обязательно должны быть оповещениями: все, что вы можете сделать с помощью JavaScript, вы можете сделать с помощью действия. Здесь мы добавим два действия: одно для увеличения части круговой диаграммы, а другое для ее уменьшения. 

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

Аннотирование данных

Вы можете накладывать текст непосредственно на диаграмму Google, используя annotationText вместо tooltip в качестве роли столбца. (Вы можете увидеть всплывающую подсказку, наведя курсор мыши на аннотацию.)

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

Поддерживаемые диаграммы

В настоящее время всплывающие подсказки HTML поддерживаются для следующих типов диаграмм:

Если вы используете роли annotationText или tooltip , ознакомьтесь с документацией по ролям , чтобы узнать о будущих изменениях и о том, как избежать проблем в будущем.