Подсказки

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

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

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

Указание типа всплывающей подсказки

Google Charts автоматически создает всплывающие подсказки для всех основных диаграмм. По умолчанию они будут отображаться как SVG, за исключением IE 8, где они будут отображаться как VML. Вы можете создавать всплывающие подсказки в формате HTML на основных диаграммах, указав 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 непосредственно перед разделом диаграммы:

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

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

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

ВАЖНО: Все всплывающие диаграммы должны быть нарисованы перед основной диаграммой. Это необходимо для захвата изображений для добавления в таблицу данных основной диаграммы.

      // 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 Chart, всплывающая подсказка отображается только в том случае, если она видна, и на нее можно щелкнуть только в том случае, если она включена. (Отключенные, но видимые действия выделены серым цветом.)

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

Подсказки могут срабатывать как при 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);
}

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

• ПлощадьДиаграмма
• гистограмма
• КалендарьДиаграмма
• ПодсвечникГрафик
• СтолбецДиаграмма
• Комбинированная диаграмма
• Линейная диаграмма
• Круговая диаграмма
• Диаграммы Санки
• Точечная диаграмма
• График

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