Google Charts Treemap Tooltip не работает - PullRequest
Новая
       31

Google Charts Treemap Tooltip не работает

1 голос
/ 25 апреля 2020

Кто-нибудь может мне помочь, почему подсказка не видна ?. Я попытался с помощью "tooltip: {is Html: true}", но не работает. Спасибо за помощь .

1 Ответ

0 голосов
/ 26 апреля 2020

Единственное, что я мог определить, это то, что первая строка строки html,
должна находиться на той же строке, что и оператор return ... 

return '<div style="z-index:1000000; background:#9daab6; padding:10px;">' +

против , следующая строка ... 

return 
  '<div style="z-index:1000000; background:#9daab6; padding:10px;">' +

см. следующий рабочий фрагмент ... 

google.charts.load('current', {
  packages: ['treemap']
}).then(drawChart);

function drawChart() {
  var data = google.visualization.arrayToDataTable([
   ['Customer', 'Region', 'Sales', 'Score'],
   ['America',   null,         0,        0],
   ['Apple',     'America',    0,        0],
   ['VW',        'America',    0,        0],
   ['Costco',    'America',    0,        0],
   ['Amazon',    'America',    0,        0],
   ['1-Apple',   'Apple',      115.5,    0.70],
   ['2-Apple',   'Apple',      115.5,    0.70],
   ['3-Apple',   'Apple',      52.5,     0.70],
   ['1-VW',      'VW',         49,       0.45],
   ['2-VW',      'VW',         9.4,      0.39],
   ['3-VW',      'VW',         7.4,      0.35],
   ['1-Costco',  'Costco',     5.2,      0.3],
   ['1-Amazon',  'Amazon',     4.8,      0.3],
  ]);

  var options = {
    headerColor: '#dfe4e9',
    highlightOnMouseOver: true,
    maxDepth: 1,
    maxPostDepth: 4,
    minHighlightColor: '#FF8B30',
    midHighlightColor: '#FFC03C',
    maxHighlightColor: '#FFE730',
    minColor: '#29ECB4',
    midColor: '#00ACED',
    maxColor: '#09F6A9',
    headerHeight: 25,
    showScale: false,
    useWeightedAverageForAggregation: true,
    showTooltips: true,
    generateTooltip: showFullTooltip
  };

  var tree = new google.visualization.TreeMap(document.getElementById('grph'));
  tree.draw(data, options);

  function showFullTooltip(row, size, value) {
   return '<div style="z-index:1000000; background:#9daab6; padding:10px;">' +
      '<span><b>' + data.getValue(row, 0) + '</b>, ' + data.getValue(row, 1) + 
      ', ' + data.getValue(row, 2) + ', ' + data.getValue(row, 3) + '</span>' + 
      '<br>' +
      'Datatable row: ' + row + 
      '<br>' +
      data.getColumnLabel(2) + ' Sales: ' + size + 
      '<br>' +
      data.getColumnLabel(3) + ': ' + value + 
      ' </div>';
  }
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="grph"></div>

примечания: если вы используете загрузчик jsapi, он не нужен, см. Фрагмент выше ...
и есть пропущена запятая после следующих данных ... 

['3-VW',      'VW',         7.4,      0.35]

но, вероятно, только во фрагменте, а не в вашем коде, иначе он не запустится ...

...