Google表格组织结构图中的自定义工具提示 [英] Custom Tooltip in Google Sheets Org Chart

问题描述

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

I am trying to find a way to make a custom tooltip under Org Chart built using the Google Sheets.

目前，我有一个组织结构图，可通过简单地选择工作表上的数据并通过菜单插入该图表来构建.我最近了解到可以使用自定义工具提示(请参见[此处的示例] [1] [1]:

Currently, I have an Org chart that is built by simply selecting the data on the sheet and inserting the chart through the menu. I have recently learned that it is possible to have a custom tooltip (see an [example here][1][1]: https://developers.google.com/chart/interactive/docs/customizing_tooltip_content#tooltip-actions)

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

My data is currently under 3 columns. I am unable to figure out how to call the data from the sheet to draw the org chart with custom tooltips.

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

I would like to keep the ability to update the chart dynamically whenever the data is changed/added/removed from the sheet.

有人可以帮我吗?

最好的问候， 赛德·H

Best Regards, Syed H

推荐答案

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

you need to use the property tooltip to true in the option

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

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

then you can add tooltip in the AddColumns and you just have to pass the content tooltip in add Row

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/

Here is a JSFiddle Example for Bar chart: 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

Custom Tooltip for org Chart using css : https://jsfiddle.net/z3fvm9p1/7/ Implementation of W3S code : https://www.w3schools.com/css/css_tooltip.asp

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

If you have dynamique Data you can listen to it and everytime it changes you can relaunch the function drawChart

这篇关于Google表格组织结构图中的自定义工具提示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！