Question

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

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

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

无论何时从工作表中更改/添加/删除数据，我都希望能够动态更新图表。

有人可以帮我吗？

最好的问候，赛德·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函数

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

1 个答案: