Google Chart Gannt 避免工具提示

2024-03-15

通过研究,我发现 Gannt Google Chart 上显示的工具提示不可自定义,因此我决定覆盖它,捕获由我的 gannt 矩形触发的悬停事件,如下所示:

google.visualization.events.addListener(chart, 'onmouseover', function (e) {
        openTooltip(data, e.row);
    });

但现在的问题是默认的工具提示弹出窗口仍然打开,如何禁用默认的工具提示? (图表选项/自定义 jquery)


没有任何选项可以删除甘特图上的默认工具提示

工具提示是使用 svg 元素绘制的,当您将鼠标悬停在栏上时,这些元素会动态添加
我们可以使用MutationObserver了解工具提示何时被添加
我们无法删除工具提示,因为它会破坏图表
但我们可以让它不可见/所有元素透明

请参阅以下工作片段...

google.charts.load('current', {
  packages:['gantt']
}).then(function () {
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Task ID');
  data.addColumn('string', 'Task Name');
  data.addColumn('date', 'Start Date');
  data.addColumn('date', 'End Date');
  data.addColumn('number', 'Duration');
  data.addColumn('number', 'Percent Complete');
  data.addColumn('string', 'Dependencies');

  data.addRows([
    ['Research', 'Find sources',
     new Date(2015, 0, 1), new Date(2015, 0, 5), null,  100,  null],
    ['Write', 'Write paper',
     null, new Date(2015, 0, 9), daysToMilliseconds(3), 25, 'Research,Outline'],
    ['Cite', 'Create bibliography',
     null, new Date(2015, 0, 7), daysToMilliseconds(1), 20, 'Research'],
    ['Complete', 'Hand in paper',
     null, new Date(2015, 0, 10), daysToMilliseconds(1), 0, 'Cite,Write'],
    ['Outline', 'Outline paper',
     null, new Date(2015, 0, 6), daysToMilliseconds(1), 100, 'Research']
  ]);

  var options = {
    height: 275
  };

  var container = document.getElementById('chart_div');
  var chart = new google.visualization.Gantt(container);

  google.visualization.events.addOneTimeListener(chart, 'ready', function () {
    var observer = new MutationObserver(function (nodes) {
      Array.prototype.forEach.call(nodes, function(node) {
        if (node.addedNodes.length > 0) {
          Array.prototype.forEach.call(node.addedNodes, function(addedNode) {
            if ((addedNode.tagName === 'rect') && (addedNode.getAttribute('fill') === 'white')) {
              addedNode.setAttribute('fill', 'transparent');
              addedNode.setAttribute('stroke', 'transparent');
              Array.prototype.forEach.call(addedNode.parentNode.getElementsByTagName('text'), function(label) {
                label.setAttribute('fill', 'transparent');
              });
            }
          });
        }
      });
    });
    observer.observe(container, {
      childList: true,
      subtree: true
    });
  });

  chart.draw(data, options);

  function daysToMilliseconds(days) {
    return days * 24 * 60 * 60 * 1000;
  }
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Google Chart Gannt 避免工具提示 的相关文章

  • 选择数据集时触发更改 [Amcharts 多数据集图表]

    是否可以在他们提供的 amcharts 多数据集图表的选择元素上触发 更改 amChartsDataSetSelector find select val 2 trigger change 这是我尝试过的代码 它的作用基本上是将选择选项更改
  • JFreeChart:如何在 y 轴上显示小时格式

    我找不到如何修改 y 轴的标签 现在 我将 TimeSeries 与 MINUTE 类一起使用 然后将 TimeSeries 插入数据集中 它看起来像这样 final TimeSeries s1 new TimeSeries Importa
  • Chart.JS 工具提示回调标签和标题 (v3.5)

    请注意 v2 有很多答案 这是 v3 的 我正在尝试设置工具提示label and title对于圆环图 Code Create the donut chart donut new Chart questions positivity do
  • 如何显示 matplotlib 饼图中的实际值

    我有一个饼图 绘制从 CSV 文件中提取的值 当前显示值的比例 百分比显示为 autopct 1 1f 有没有办法显示每个切片的数据集中表示的实际值 Pie for Life Expectancy in Boroughs import pa
  • 图表无法在 Xcode 14 上编译

    我在图书馆中面临以下错误 Type 图表数据集 不符合协议 范围可替换集合 实例方法不可用 替换Subrange with 用于满足协议的要求 范围可替换集合 将其附加到扩展 ChartDataSet RangeReplaceableCol
  • 使用chartJS显示带有连接点的折线图

    我想使用 ChartJS 绘制这样的图表 但我找不到连接第一个和最后一个点并在该连接区域内显示单个唯一点的解决方案 我还需要用不同的颜色设置每个点的样式 我尝试探索 ChartJS 文档但找不到解决方案 是否有任何图表绘制库具有这些功能或如
  • excel中的多轴折线图

    我正在寻找类似于下图中的多轴折线图 这是由 amcharts 制作的 JavaScript 图表 excel有没有可以绘制图表的选项 请注意 有 3 个 Y 轴和 3 个折线图 可让您比较数据 是否有可能获得超过 3 个数据点 每个数据点在
  • Chart.js 没有显示在我的视图中

    我有一个使用 angular js 运行的应用程序 我的视图之一应该加载图表 我正在使用 Chart js 但由于某种原因它不起作用 并且我的控制台上没有显示错误 这是我创建图表的函数 scope writeBatteryChart fun
  • Popper.js:点击外部时如何关闭弹出窗口

    我在用着波普尔 js https popper js org 显示具有该类的弹出元素 js share cf popover单击带有类的元素时 js share cf btn 但我希望只有当我在弹出窗口之外单击时才关闭弹出窗口 这是我显示弹
  • 2 个具有共享 Redis 依赖的 Helm Chart

    目前 我有 2 个 Helm Charts Chart A 和 Chart B Chart A 和 Chart B 对 Redis 实例具有相同的依赖关系 如Chart yaml file dependencies name redis v
  • Google 折线图添加对象数组

    我有一个通过解析 JSON 字符串创建的对象数组 var measurementData Html Raw JsonConvert SerializeObject this Model Item1 var stringifiedData J
  • Bootstrap 工具提示“未捕获类型错误:无法读取 null 的属性‘触发器’”

    当我尝试显示新的工具提示时 在销毁旧工具提示后 我在 Chrome 控制台中收到 Uncaught TypeError Cannot read property trigger of null Then when I was digging
  • 如何在R中绘制仪表图表?

    如何在 R 中绘制以下图 Red 30 Yellow 40 Green 30 Needle at 52 所以这里有一个完整的ggplot解决方案 注意 从原始帖子中编辑 在仪表中断处添加数字指示器和标签 这似乎是OP在评论中所要求的 如果不
  • Chart.js:将堆叠条形图的工具提示放置在条形图的顶部

    当我在简单的条形图中有一个条形时 工具提示位于条形的顶部 如果我将鼠标悬停在堆积条形图上 工具提示将放置在average位置 我希望将工具提示始终放在堆叠条形图的顶部 就像简单条形图一样 而不是这种行为 配置位置的唯一两个选项是averag
  • 如何在禁用的 HTML 按钮上呈现工具提示

    我有一个 HTML 按钮 我尝试根据按钮的 标题 属性在其上渲染工具提示 但它没有渲染 主要是因为它被禁用了 然后 我尝试将按钮包装在跨度中并设置跨度的 标题 属性 将鼠标悬停在包含在跨度中的按钮上仍然没有效果 工具提示将呈现在不属于按钮标
  • 单击时显示 Foundation 5 工具提示

    我在跨度上有一个通过基础 5 的工具提示 如下所示 span class has tip tip top title My tool tip i class fi pricetag multiple size 21 i span 这很好用
  • Django 与谷歌图表

    我试图让谷歌图表显示在我的页面上 但我不知道如何将值从 django 视图传递到 javascript 以便我可以绘制图表 姜戈代码 array Year Sales Expenses 2004 1000 400 2005 1170 460
  • 绘制持续时间图表

    从我在写这篇文章之前所做的阅读中 我相当确定我需要创建甘特图 但我不知道这是否是正确的路线 需要将开始时间和结束时间的数据作为一个单位绘制在 Excel 图表上 Y 轴为日期 X 轴为一天中的小时 开始时间和结束时间的格式是 Excel 数
  • 设置 Wpf 饼图样式

    这是我的饼图 xaml
  • Android 图表[关闭]

    Closed 此问题正在寻求书籍 工具 软件库等的推荐 不满足堆栈溢出指南 help closed questions 目前不接受答案 我正在开发一个项目 其中有一些图表 图形 刻度图 烛台图和范围图 但问题是 没有该图表的库 我有烛台图的

随机推荐

  • Silverlight 独立存储是被视为永久存储还是缓存?

    独立存储的持久性如何 Silverlight 是否将其视为缓存 在需要更多空间时删除项目 还是仅在用户或应用程序请求时删除项目 似乎还有各种各样的方法来识别隔离存储 机器 应用程序 域 我遇到的问题是这些与用户的关系 是吗possible
  • Redis 中嵌套结构的替代方案?

    我不断遇到需要存储的信息比 Redis 任何简单数据结构更复杂的情况 我仍然想使用 Redis 但我想知道人们在理想情况下想要使用嵌套结构时是否有任何标准替代方案 你基本上有两种策略 您可以序列化复杂的对象并将它们存储为字符串 我们建议使用
  • iOS:在 UIViewRepresentable 和 View 之间进行双向函数调用,SwiftUI

    我正在构建一个应用程序 其中一个页面有一个网络视图 目前该页面有一个可表示的 webview 和一个视图 使用 UIViewControllerRepresentable 将 Webview 引入视图 我首先想知道当我点击登录按钮时如何调用
  • 如何获取Windows窗体-面板中的按钮控件

    获取表单中的所有按钮 包括 面板中的按钮具有相同的形式 List
  • 如何使用角度中的signalr读取从web api发送的数据?

    我想在角度客户端中通过 signalr 读取从 asp net web api 发送的数据 为此 我在下面给出的 Web api 中创建了 Hub ProgressHub cs public class ProgressHub Hub pu
  • Backbone 和 CoffeeScript 入门

    我认为这更多的是咖啡脚本 http coffeescript org 问题 我希望能够使用来自Backbone http documentcloud github com backbone in a foo coffee文件 我尝试使用 r
  • 能够通过单击按钮来更改单独 div 的颜色

    我正在创建一个婚礼清单网站 对于我的清单 我希望用户能够将待办事项的颜色更改为红色 琥珀色和绿色 红色表示未完成 琥珀色表示部分完成 绿色表示完成 我想知道如何实现这一点 我也希望将其保存到数据库中 提前致谢 in db 添加一列statu
  • 为什么 C 标准未定义不确定变量的使用?

    垃圾价值存储在哪里 用于什么目的 出于效率原因 C 选择不将变量初始化为某些自动值 为了初始化该数据 必须添加指令 这是一个例子 int main int argc const char argv int x return x 生成 pus
  • 结束日期不早于开始日期和日期选择器格式

    如果我删除日期格式 结束日期将隐藏开始日期之前的日期 问题是 我必须将日期格式更改为 dd mm yy 同时确保结束日期日期选择器无法从开始日期选择较早的日期 StartDate datepicker dateFormat dd mm yy
  • UTF-8 字符显示为 ISO-8859-1

    我在从数据库插入 读取 utf8 内容时遇到问题 我所做的所有验证似乎都表明我的数据库中的内容应该是 utf8 编码的事实 但它似乎是拉丁编码的 数据最初是从 CLI 的 PHP 脚本导入的 配置 Zend Framework Versio
  • 詹金斯管道 sh 添加新行

    我的管道 sh 块 sh set e terraform terraform plan var aws access key aws access key var aws secret key aws secret key var aws
  • jQuery.on('click') 在 jQuery.click 之前?

    我有一个外部脚本 我无法修改它 该脚本加载一个 a 按钮 并添加一个 jQuery 单击它 并以 return false 结束 我需要在这次点击时触发我自己的代码 当我加载页面时 a 不存在 所以我需要使用 on click 绑定 活 但
  • PHP 回显性能

    这些命令中哪一个执行效果最佳 最糟糕 为什么 echo A a B b C c echo A a B b C c echo A a B b C c echo A a B b C c 将是最快的 因为这里字符串的所有部分都直接复制到输出流 而
  • 如何从 iOS 11 beta 的 iOS 应用程序打开定位服务?

    if UIDevice currentDevice systemVersion floatValue gt 10 0 NSURL URL NSURL URLWithString App prefs root Privacy path LOC
  • QLineEdit 与 QValidator:无论输入有效性如何,都会对编辑完成做出反应?

    QLineEdit有信号QLineEdit editingFinished当用户完成编辑 例如按 Enter 键 时发出 但是 如果设置了验证器或输入掩码 则editingFinished仅当输入有效时才会发出 但是 无论输入的有效性如何
  • Xcode 14 beta 错误:存储的属性无法用“@available”标记为可能不可用

    当我在 Xcode 14 beta 上运行我的应用程序时 出现此错误 但我不知道如何修复它 存储的属性不能用 available 标记为可能不可用 当我运行 Xcode 13 时 它不会弹出 并且应用程序运行顺利 我在 xcworkspac
  • 确定传递依赖的来源

    我有一个项目 其中使用 sl4j 和 log4j 我最近向我的项目添加了一些新的依赖项 我添加的这些新依赖项之一包括对 logback classic 的传递依赖项 其中包括 sj4j 的另一个绑定 我想摆脱 logback 但我不知道我的
  • 如何在单击“阅读更多”按钮或链接时展开文本?

    我有一个 js 函数 可以在两个文本范围之间切换 一种是类折叠的较小文本 另一种是类展开的全文 这是我的js document ready function expanded hide expanded collapsed click fu
  • 高分表

    我希望在我的 Android 应用程序中添加一个 本地 而不是在线 高分表 并且我想了解解决该问题的最佳方法 我有一个用户列表 现在被保存到文件中并作为 User 对象数组读回 高分需要引用此数据以使用用户的姓名和照片等填充表 对于显示器
  • Google Chart Gannt 避免工具提示

    通过研究 我发现 Gannt Google Chart 上显示的工具提示不可自定义 因此我决定覆盖它 捕获由我的 gannt 矩形触发的悬停事件 如下所示 google visualization events addListener ch