带有 HTML 工具提示的 Google 图表

Posted 2023-02-16

【中文标题】带有 HTML 工具提示的 Google 图表

【英文标题】：Google Chart with HTML tool tip

【发布时间】：2015-02-19 11:49:16

【问题描述】：

我正在尝试在我的谷歌图表中添加一个 html 工具提示，但这不起作用。我已经定义了启用 HTML 的列和选项，但这不起作用

Here is the jsfiddle 不起作用。 js定义为

  google.setOnLoadCallback(drawChart);
  function drawChart() 
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Name');
    data.addColumn('string', 'Manager');
    data.addColumn('type': 'string', 'role': 'tooltip', 'p': 'html': true);


    data.addRows([
      [v:'Mike', f:'Mike<div style="color:red; font-style:italic">President</div>', '', 'The President'],
        [v:'Jim', f:'Jim<div style="color:red; font-style:italic">Vice President<div>', 'Mike', '<div style="color:red; font-style:italic">Vice President<div>'],
      ['Alice', 'Mike', ''],
      ['Bob', 'Jim', '<b>Bob</b> Sponge'],
      ['Carol', 'Bob', '']
    ]);

    var chart = new google.visualization.OrgChart(document.getElementById('chart_div'));
    var  options = 
        tooltip: isHtml: true,
          allowHtml:true
    ;
    chart.draw(data, options);
  

..和 HHTML

<script type="text/javascript" src="https://www.google.com/jsapi?autoload='modules':['name':'visualization','version':'1','packages':['orgchart']]"></script>
   <div id="chart_div""></div>

非常感谢您对此的任何帮助

【参考方案1】：

很遗憾，组织结构图不支持自定义工具提示。实际上，它根本不支持工具提示，悬停上的文本只是标题属性。但是，有一些库允许使用 html 标题。一个示例是 jquery ui，添加了以下代码以使其工作：

  $(function () 
      $(document).tooltip(
          content: function () 
              return $(this).prop('title');
          
      );
  );

这是工作小提琴：http://jsfiddle.net/juvian/vucp11qk/2/

【讨论】：

@XxXk5XxX 没问题，很高兴它对其他人有帮助:)