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

【问题标题】：Custom Tooltip in Google Sheets Org ChartGoogle 表格组织结构图中的自定义工具提示
【发布时间】：2018-11-07 08:53:05
【问题描述】：

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

目前，我有一个组织结构图，只需选择工作表上的数据并通过菜单插入图表即可。我最近了解到可以有一个自定义工具提示（参见 [example here][1][1]: https://developers.google.com/chart/interactive/docs/customizing_tooltip_content#tooltip-actions）

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

我希望能够在数据发生更改/添加/从工作表中删除时动态更新图表。

有人可以帮我解决这个问题吗？

最好的问候，赛赫

【问题讨论】：

标签： javascript excel google-sheets google-visualization google-sheets-query

【解决方案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

【讨论】：

Foufrix，感谢您的回复。我不想通过函数添加数据，而是想从现有工作表中选择数据。这样，我想保持动态更新图表的能力。我也想使用组织图而不是柱形图。请帮忙。最好的问候，Syed H
对于现有工作表，保存您要传递的数据并重复使用它。我编写的代码只是您提供的文档中的一个示例，您可以更改它以使其在组织结构图中。顺便说一句，工具提示可用于：AreaChart BarChart CalendarChart CandlestickChart ColumnChart ComboChart LineChart PieChart Sankey Diagrams ScatterChart Timeline，考虑到谷歌图表文档。这意味着对于 org chart，没有 google chart 提供的简单方法来使用 tooltip。
在阅读了谷歌文档之后，你就拥有了谷歌组织图表文档中的所有内容，你必须将值放在 addRow 中数组的第三个元素中这是来自谷歌文档的示例：jsfiddle.net/foufrix/z3fvm9p1/2@赛侯赛尼
亲爱的 Foufrix，感谢您抽出宝贵的时间并添加您的有用意见。我已经用工具提示构建了组织结构图，但是，我需要知道如何向工具提示添加一些自定义样式，并使它们保持在这个特定示例中的显示 [此处示例][1][1]：@987654326 @)。我无法想办法通过将现有数据调用到绘图函数中来添加它们。请帮忙
@SyedHussaini 给你：jsfiddle.net/z3fvm9p1/5 你可以在你的数组中添加自定义 html，我在 css 中定义了一个自定义工具提示样式，并使用一个函数来添加你想要的文本和你想要的工具提示。有一个关于如何使用自定义数据的示例（const datasheets1）随时通知我，不要忘记验证答案是否对您有帮助；）