Google表格组织结构图中的自定义工具提示

Question

我正在尝试找到一种使用Google表格构建的组织结构图下的自定义工具提示的方法。

目前，我有一个组织结构图，可以通过简单地选择工作表上的数据并通过菜单插入该图表来构建。 我最近了解到，可以使用自定义工具提示（请参见[此处的示例] [1] [1]： https : //developers.google.com/chart/interactive/docs/customizing_tooltip_content#tooltip-actions ）

我的数据目前在3栏以下。 我无法弄清楚如何从工作表中调用数据以使用自定义工具提示绘制组织结构图。

我想保持每当从工作表中更改/添加/删除数据时动态更新图表的能力。

有人可以帮我吗

最好的问候，Syed H

Answer 1

您需要在选项中使用属性工具提示为true

var options = {
   tooltip: {isHtml: true},
   legend: 'none'
};

那么您可以在AddColumns中添加工具提示，而只需在添加行中传递内容工具提示

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,'First Tooltip'],
      ['2011', 1500, 'Second Tooltip'],
      ['2012', 800, 'Third Tooltip'],
      ['2013', 1000, '$1M in sales last year.']
]);

这是条形图的JSFiddle示例： https ://jsfiddle.net/foufrix/qfcps6vu/3/

这是组织结构图： https : //jsfiddle.net/foufrix/z3fvm9p1/2/

使用CSS的组织结构图自定义工具提示： https ://jsfiddle.net/z3fvm9p1/7/ W3S代码的实现： https ://www.w3schools.com/css/css_tooltip.asp

如果您具有动态数据，则可以收听它，并且每次更改时都可以重新启动功能drawChart