【问题标题】:Published Google Sheet - How to remove hover tooltip?已发布的 Google 表格 - 如何删除悬停工具提示?
【发布时间】:2020-12-04 12:14:27
【问题描述】:

背景

我有一个包含多个图表的 Google 电子表格。 我想发布整个电子表格并将其嵌入 HTML 页面(纯 HTML 页面。没有其他文件。)

我有这个简单的 HTML 嵌入简单的已发布 Google 电子表格。

<iframe height="400px" scrolling="no" src="https://docs.google.com/spreadsheets/d/e/2PACX-1vSE-4lufoePc8SMq1r5o9K_uWE7Km9JiouogYBUJHVBo8Esnf4tImqdNUiCcWu_26AzwDUZCM_wS1Vs/pubhtml?widget=true&headers=false" width="100%"></iframe>

问题

当光标位于图表的某个区域(特别是条形本身)时,我想禁用 tooltip-no-hover 功能。
事实上,我想禁用与图表。 但是,用户仍然需要能够在工作表之间导航。

尝试失败

我是这个领域的新手,所以我的尝试/编码可能是毫无意义的。

  1. <iframe enableInteractivity="False" ...
  2. <iframe style="pointer-events: none;... - 不允许在工作表之间导航。

【问题讨论】:

  • 你试过设置tooltip:false吗? @idanshmu
  • @ale13 不确定我应该在哪里以及如何准确定义它,但我的尝试都没有奏效。
  • 你是如何创建图表的?您只是从电子表格中创建的?
  • 我正在创建电子表格和 HTML。

标签: html google-sheets iframe


【解决方案1】:

很遗憾,你想要的无法实现。

根据Charts Service documentation

如果您想在网络浏览器中呈现图表,请改用 Google Charts API。

但是,Google Charts Visualization API 允许您修改 tooltip。但为了做到这一点,您必须以编程方式创建图表。

为此,您可以尝试快速入门here 中提供的示例。

所以在将options参数修改成这样之后:

var options = {'title':'How Much Pizza I Ate Last Night',
                       'width':400,
                       'height':300,
                       'tooltip': { 'trigger': 'selection' }};

当鼠标悬停在 Mushroom 部分时,图表的外观如下:

您可以将上述快速入门中的代码包含在 Apps 脚本中的 HTML 文件中,以创建 Web 应用程序。唯一缺少的部分是 doGet 函数,它看起来像这样:

function doGet() {
  var htmlOutput = HtmlService.createHtmlOutputFromFile('QUICKSTART_HTML_FILE');
  return htmlOutput;
}

参考

【讨论】:

  • 这段代码应该去哪里? dataTable 是什么,它与 iframe 的 src 有什么关系?
  • 代码应该在您的 HTML 中,dataTabledataTable = new google.visualization.DataTable()
  • datatable 与 iframe 的 src 有什么关系?在我提供的单行 HTML 中,数据来自已发布工作表的 URL(我相信我需要保持这种状态)。在您的建议中,数据来自哪里?
  • 对不起,我想我可能误会了你。所以本质上你根本没有以编程方式创建图表?
  • 正确。该图表是在 google sheet 本身中创建的。为了便于讨论,我们可以将数据/表格视为一个封闭的盒子,只关注 HTML(如果可能的话)
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2012-01-03
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多