Добавить пользовательский текст в подсказку визуализации Google

Question

Мне нужно добавить еще один ряд текста в каждую из всплывающих подсказок (на диаграмме области).Я включил скриншот, чтобы проиллюстрировать, что я надеюсь сделать.

Мой текущий график: Диаграмма с добавленным дополнительным текстом.(Это то, что я пытаюсь сделать):

Я надеюсь сделать это без необходимости использования сторонних JS для пользовательских подсказок.Есть ли способ просто добавить еще одну строку текстового контента для отображения во всплывающих подсказках по умолчанию?

Любая помощь очень ценится.

Answer 1

Посмотрите на https://developers.google.com/chart/interactive/docs/roles#whatrolesavailable:

Дополнительные строки всплывающей подсказки - это то, что вы ищете!

Пример:

label: 'Year',   'Sales',    null,   'Expenses',    null
 role: domain,     data,    tooltip,    data,      tooltip    
        '2004',    1000, '1M$ sales,     400,    '$0.4M expenses
                           in 2004'                  in 2004'
        '2005',    1170, '1.17M$ sales,  460,    '$0.46M expenses
                            in 2005'                  in 2005'
        '2006',     660, '.66$ sales,   1120,     '$1.12M expenses
                            in 2006'                 in 2006'
        '2007',    1030, '1.03M$ sales,  540,    '$0.54M expenses
                            in 2007'                  in 2007'

Answer 2

Я не нашел способа добавить еще одну строку данных в подсказки по умолчанию.Вы можете приблизиться к тому, что вы ищете, используя подсказки HTML.Вы теряете хвост на всплывающей подсказке.Вот JSbin с решением, которое я использовал ... http://jsbin.com/tovizukabu/3/edit?css,js,output

  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');
    dataTable.addColumn({type: 'string', role: 'tooltip', 'p': {'html': true}});
    dataTable.addColumn('number', 'Expense');
    dataTable.addColumn({type: 'string', role: 'tooltip', 'p': {'html': true}});

    dataTable.addRows([
      ['2010', 1500, '<div><strong>2010</strong><br>Date: <strong>00/00/0000</strong><br>Sales: <strong>$600</strong></div>', 600,'<div><strong>2010</strong><br>Date: <strong>00/00/0000</strong><br>Expense: <strong>$600</strong></div>'],
      ['2011', 500, '<div><strong>2010</strong><br>Date: <strong>00/00/0000</strong><br>Sales: <strong>$600</strong></div>', 1500, '<div><strong>2011</strong><br>Date: <strong>00/00/0000</strong><br>Expense: <strong>$1,500</strong></div>'],
      ['2012', 1200, '<div><strong>2010</strong><br>Date: <strong>00/00/0000</strong><br>Sales: <strong>$600</strong></div>', 800, '<div><strong>2012</strong><br>Date: <strong>00/00/0000</strong><br>Expense: <strong>$800</strong></div>'],
      ['2013', 500, '<div><strong>2010</strong><br>Date: <strong>00/00/0000</strong><br>Sales: <strong>$600</strong></div>', 1000, '<div><strong>2013</strong><br>Date: <strong>00/00/0000</strong><br>Expense: <strong>$1,000</strong></div>']
    ]);

    var options = {tooltip: {isHtml: true}};
    var chart = new google.visualization.AreaChart (document.getElementById('tooltip_action'));
    chart.draw(dataTable, options);
  }

И CSS ...

.google-visualization-tooltip {
border: solid 1px #bdbdbd;
border-radius: 2px;
background-color: white;
position: absolute;
box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.6);
font-size: 11px;
-moz-box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.6);
-webkit-box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.6);
font-family: arial;
}

.google-visualization-tooltip div {
  padding:5px;
}

Answer 3

Если вы включите focusTarget: 'category' в настройках.Тогда столбец tooltip становится value для всплывающей подсказки текущих x, y точек (которая отображается так, как вы хотите).Таким образом, вы можете имитировать value и добавить дополнительный текст, который вы хотите.Вот пример того, что я имею в виду: -

  google.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,'600: 15% growth'],
      ['2011', 1500, '1500: 50% growth'],
      ['2012', 800, '800: -40% growth'],
      ['2013', 1000, '1000: 25% growth']
    ]);

    var options = { legend: 'none', focusTarget: 'category'};
    var chart = new google.visualization.ColumnChart(document.getElementById('col_chart_custom_tooltip'));
    chart.draw(dataTable, options);
  }