如何更改光标图标以表示 Google 图表上的某个区域可点击?

2024-01-10

我知道可以更改谷歌饼图的光标图标,但是可以针对该饼图的各个部分进行更改吗?

我希望能够显示光标图标的变化,以表示谷歌图表上的区域/部门/区域可以“钻取”。目前,它只是指针并在适当的位置显示超链接图标,这是我理想的情况。


这有点像黑客,但我为此做了一些假设,做了很多假设。

Google 图表不允许您在饼图上放置特定的 CSS,但它只是呈现 SVG 标签,因此您可以直接将样式应用于 SVG。

以下样式规则使指针光标位于作为路径或路径同级的任何元素上,对于普通饼图设置来说,这只是饼图切片。该规则还受到 ID 的限制,因此它不会与同一页面上的其他 SVG 图形混淆。

这里最大的假设是您希望所有饼图部分都可单击。

  <style>
    #myChart path {cursor:pointer;}
    #myChart path ~ text {cursor:pointer;}
  </style>

您可以对此进行变体,通过饼图部分的颜色应用样式,如下所示:

  <style>
    #myChart path[fill="#3366cc"] {cursor:pointer;}
    #myChart path[fill="#3366cc"] ~ text {cursor:pointer;}
  </style>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何更改光标图标以表示 Google 图表上的某个区域可点击? 的相关文章

  • 从提交的表单中获取值

    我有一个非常简单的表格
  • Javascript - 删除粘贴上的空格

    我有一个最大长度为 10 的输入文本字段 该字段用于澳大利亚电话号码 10 位数字 电话号码通常分为以下语法 12 12345678 如果有人复制上面的内容并将其粘贴到我的输入字段中 显然会留下最后一位数字并保留空格 有没有办法在粘贴到输入
  • 如何使用 JavaScript 访问 runat="server" ASP 元素?

    似乎每个人都在这样做 在代码帖子等中 但我不知道如何 每当我尝试使用 JavaScript 操作 asp 元素时 我都会得到一个 element is null or document is undefined 等等错误 JavaScrip
  • Jquery onclick 更改图像 - 3 个产品支架

    EDIT 我想添加另一个按钮 因此总共有 3 个按钮 而不是 2 个 我怎样才能做到这一点 我尝试添加产品支架 3 但如果我先单击按钮 1 然后单击按钮 3 则两个按钮都具有相同的背景图像 预览 http gyazo com 6698586
  • req.body 为空 Express js

    我花了几个小时试图找出为什么 req body 是空的 我在 stackoverflow 上到处查看并尝试了所有方法 但没有运气 Express js POST req body 空 https stackoverflow com ques
  • 找出 Jquery ajax 请求被重定向到的位置

    所以 我收到了这个ajax请求 请参阅 金发女郎 大约6英尺高 看起来像这样 ajax url http example com makeThing dataType html type POST data something someot
  • 如何限制注册用户尝试投票两次[关闭]

    Closed 这个问题需要多问focused help closed questions 目前不接受答案 我对 php 编码和网站设计非常陌生 我正在尝试开发一个在线投票系统 只允许注册用户投票 已完成所有操作并且工作正常 但我需要的帮助是
  • 无法设置未定义的属性“显示”

    我正在编写脚本来隐藏 显示菜单 但遇到了一些麻烦 function displayMenu var classMenu event target className classMenu Menu document getElementsBy
  • 如何跨页面播放背景音乐

    我已经读过这个问题 我知道它只能用框架来完成 我真的不想要全站点 AJAX 如何在多个 HTML 页面上播放背景音频 https stackoverflow com questions 4210370 how to play a backg
  • 获取顶部框架的 URL

    在 Facebook 应用程序中 我需要检查顶部框架 主窗口 URL 是什么 并相应地显示内容 我尝试使用以下内容 if top location toString toLowerCase indexOf facebook com lt 0
  • 与 webpack 捆绑后,无法读取枚举的未定义属性

    我有一个 React 库 我想使用 Webpack 来构建它 该库是使用 Typescript 编写的 似乎一切正常 但由于某种原因枚举却不起作用 当我将库安装到我的 React 应用程序中时 我发现Cannot read properti
  • fs.statSync 与缓冲区“错误:路径必须是没有空字节的字符串”

    我已经读入这样的文件缓冲区 let imageBuffer try imageBuffer fs readFileSync some path to image jpg catch e console log error reading i
  • CSS:DIV 中的文本被截断

    我正在致力于集成一个 jQuery 插件 该插件会隐藏页面的某些部分 直到用户单击 喜欢按钮 Facebook 小部件的部分文本被切断 我已经尝试过 CSS 但无法让它完全显示 如果容器的宽度设置正确 还有什么可能导致文本被截断 例子 ht
  • 如何用CSS让物体移动?

    我在页面中间并排设置了两个图像 对象 我希望它们彼此移动 就好像它们将要碰撞一样 并在它们放置在每个图像旁边时停止 因此 对于右侧的对象 我编写了以下代码 认为该对象应该从左向右移动 但结果与我的预期相去甚远 是否可以通过过渡来做到这一点
  • 你可以推荐什么 JavaScript 缓存 [关闭]

    Closed 这个问题不符合堆栈溢出指南 help closed questions 目前不接受答案 我正在寻找一个好的javascript内存缓存库来缓存客户端计算结果 我的要求 适用于 Internet Explorer FireFox
  • Angular 4 - “等待操作”的正确方法是什么?

    我遇到了一个简单的问题 有一个很奇怪的解决方案setTimeout 0 看看这个简单的代码 Component selector my app template div div
  • 如何强制传单更新地图?

    当我将 Leaflet 与 React 一起使用时 我遇到了问题 据我研究 问题是 Leaflet 也想控制 DOM 渲染 现在 国家将使用与后端信息相对应的特定颜色代码 范围为1 gt 100 正确着色 但是 它每分钟更新一次 更新后 国
  • Angular 2:将路由器出口设计为宽度 < 100%

    我正在构建一个 Angular 2 应用程序 该应用程序将为宽度超过 500 的屏幕提供侧导航栏 为宽度小于 500 的屏幕提供底部导航栏 现在 我尝试为侧栏分配 20 的宽度 即 80 应用内容 我遇到的问题是路由器出口内容 即实际的应用
  • MutationOberserver 回调是否在修改观察到的元素的同一动画帧内触发? [关闭]

    Closed 这个问题是无法重现或由拼写错误引起 help closed questions 目前不接受答案 假设我对使用以下命令创建的框架内的元素进行了更改window requestAnimationFrame并且被修改的元素正在被观察
  • jQuery - 将日期选择器的容器设置为特定的 div

    我在 div 上使用 jQuery UI 日期选择器 div通过移动鼠标隐藏和显示 因为日期选择器存在于末尾标签 不在我的 div 内 当我将鼠标移动到日期选择器时 div 消失 我像这样加载了日期选择器 JavaScript dt1 da

随机推荐