javascript - 如何更改光标图标以表示 Google 图表上的区域是可点击的？

Question

我知道可以更改 google 饼图的光标图标，但可以针对该饼图的各个部分进行更改吗？

我希望能够显示光标图标的变化，以表示谷歌图表上的区域/部门/区域可以“钻入”。目前它只是指针并在适当的地方显示超链接图标是我最希望能够做到的。

Answer 1

这有点像 hack，但我为此做出了一些假设，做出了很多假设。

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

以下样式规则在作为路径或路径的兄弟元素的任何元素上创建指针光标，对于 Vanilla 饼图设置而言，这只是饼图切片。该规则也受 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>