Question

有人可以帮助我，为什么工具提示不可见？我尝试使用“工具提示：{isHtml：true}”，但无法正常工作。任何帮助表示赞赏。

<script>
   google.charts.load('current', {'packages':['treemap']});
   google.setOnLoadCallback(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);
  }
</script>

这是工具提示的功能：

function showFullTooltip(row, size, value) {
   return 
      '<div style="z-index:1000000; background:#9daab6; padding:10px;">' +
      '<span><b>' + dataT.getValue(row, 0) + '</b>, ' + dataT.getValue(row, 1) + 
      ', ' + dataT.getValue(row, 2) + ', ' + dataT.getValue(row, 3) + '</span>' + 
      '<br>' +
      'Datatable row: ' + row + 
      '<br>' +
      dataT.getColumnLabel(2) + ' Sales: ' + size + 
      '<br>' +
      dataT.getColumnLabel(3) + ': ' + value + 
      ' </div>';
}

idk，如果问题是浮点数，则为“数字”值，并且似乎已在配置中接受。

Answer 1

我唯一能确定的就是html字符串的第一行，
需要与return语句在同一行...

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

vs。下一行...

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]

但可能仅在代码段中，而不是您的代码中，否则它将无法运行...

Google图表树形图工具提示不起作用

1 个答案: