如何更改光标图标以表示Google图表上的某个区域是可点击的？ [英] How can you change the cursor icon to signify an areas on a Google Chart is clickable?

问题描述

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

I know it is possible to change the cursor icon for a google pie chart, but can it be done for individual sectors of that pie chart?

我想以能够显示光标图标的改变，以表示可以钻入google图表上的区域/扇区/区域。

I would like to be able to show a change in the cursor icon to signify that a region/sector/area on a google chart can be 'drilled-into'. At the moment it's just the pointer and showing the hyperlink icon where appropriate is what I'd ideally like to be able to do.

推荐答案

Google图表不允许你把特定的CSS放在一个饼图上，这是一个黑客，但我做了一些东西，这使得很多假设。

Google charts doesn't let you put specific CSS on a pie chart piece, but it just renders SVG tags, so you can apply styles to the SVG directly.

以下样式规则在指向任何元素的路径上创建指针游标，或路径的兄弟，对于香草饼图设置，它只是饼图。规则也受ID限制，因此它不会在同一页面上与其他SVG图形混淆。

The following style rules make a pointer cursor on any element that is a path, or a sibling of a path, which for a vanilla pie chart setup is only the pie slices. The rule is also restricted by the ID so it isn't going to go messing with other SVG graphics on the same page.

这里最大的假设是你想要所有饼图段都是可点击的。

The biggest assumption made here is that you want all pie segments to be clickable.

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

你可以做一个变化，应用饼图段的颜色样式，如下：

You could make a variation on this that applies the style by the colour of the pie segment like so:

  <style>
    #myChart path[fill="#3366cc"] {cursor:pointer;}
    #myChart path[fill="#3366cc"] ~ text {cursor:pointer;}
  </style>

这篇关于如何更改光标图标以表示Google图表上的某个区域是可点击的？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！