【问题标题】:Google Chart API: Change color on hovering legendGoogle Chart API:更改悬停图例的颜色
【发布时间】:2012-10-28 17:35:25
【问题描述】:

所以我有一个ColumnChart,其中一个内置功能是您可以将鼠标悬停在图表图例中的一个项目(所谓的类别)上,然后您可以在相应列周围获得一些高亮边框图表。

现在我的图表中有许多列和类别,并且很难看到突出显示的系列/类别,因为默认行为仅在列周围显示 1 像素的灰色边框。我的列只有几个像素宽度,我仍然需要区分 10 个不同的类别(=颜色)。所以只选择非常浅的颜色(边界容易发现的地方)是没有选择的。我发现没有办法改变:

  1. 高亮边框的样式(主要是颜色)
  2. 在图例中选择相应类别时的列颜色(填充颜色)。

是否有一些属性可以传递给我的图表的draw() 调用以更改突出显示?我是否必须手动覆盖某些事件/方法?

非常感谢您的帮助!

【问题讨论】:

    标签: javascript css svg google-api google-visualization


    【解决方案1】:

    过去我使用一些 CSS hack 来更改生成的 SVG 的一些属性(路径、矩形等...) 您可以使用高级选择器,也许您将能够实现您想要的。 我创建了一个非常快速且错误的示例,但它可能会为您指明正确的方向。

    例如:

    div.google_chart svg g g g g rect { 
                stroke-width:0px; fill:red; 
                }
    

    希望对你有帮助。

    【讨论】:

    • 天哪,它确实有效。非常感谢。您的代码突出显示当前选定的列,您将鼠标悬停在该列上。要获得整个系列(将鼠标悬停在图例上),可以使用以下代码:div.google_chart svg g g g g rect { stroke-width:0px; fill:red; } - 这会沿着 SVG 树向下导航。看起来超棒!也许更新您的答案,以便立即发现它。再说一遍:谢谢!
    • 酷彼得!很高兴您找到了正确的 CSS!正如你所说,我更新了我的答案,以便立即被发现,并删除了 jsfiddle 链接,不知何故它不是正确的。很高兴我能帮上忙!欢呼
    • 谢谢 CMoreira,你真的帮助了我。非常完美,为我节省了很多时间。
    • 虽然这是一个很好的解决方案,但我想指出,要支持 IE 8 及之前的版本,您需要做一些额外的工作来捕获它生成的 VML 而不是 SVG。
    • 上帝保佑你!!
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2018-11-30
    • 1970-01-01
    • 2020-08-14
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多