Question

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

  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>

非常感谢任何有关此方面的帮助

Answer 1

不幸的是，组织结构图不支持自定义工具提示。实际上，它根本不支持工具提示，悬停时的文本只是title属性。但是，有一些库允许html标题。一个例子是jquery ui，添加了这段代码以便它可以工作：

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

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

带有HTML工具提示的Google图表

1 个答案: