Google Chart API：更改悬停图例的颜色 [英] Google Chart API: Change color on hovering legend

问题描述

因此，我拥有 ColumnChart 和其中一个内置功能是可以将鼠标悬停在图表图例中的项目（所谓的类别）上，并在图表中的相应列周围获得一些高亮边框。

现在，我的图表中有很多列和类别，突出显示的系列/类别很难看清，因为默认行为仅在列的周围显示1px灰色边框。我的列只有几个像素的宽度，我仍然需要区分10个不同的类别（=颜色）。所以只挑选非常浅的颜色（边框很容易辨认）是不行的。我找不到改变的方法：

1. 高亮边框的风格（主要是颜色）或


在图例中选择相应类别时的列颜色（填充颜色）。 b

是否有一些属性可以传递给我的图表的 draw（）调用以更改突出显示？我需要手动重写一些事件/方法吗？





非常感谢帮助！

解决方案

在过去，我使用了一些CSS hacks来改变生成的SVG的某些属性（路径，矩形等）
，你可以使用高级选择器来玩，也许你可以实现你想要的东西。
我创建了一个非常快速和错误的例子，但也许它会指出您正确的方向。





例如：



  div.google_chart svg gggg rect {
 stroke-width：0px;补：红色; 
} 
  

希望它有帮助。




So I have a ColumnChart and one of the built-in functionality is that you can hover over an item (so called category) in the legend of the chart and you get some highlight-border around the corresponding columns in the chart.

Now I have many columns and categories in my chart and a highlighted series/category is very hard to see, because the default behavior just shows a 1px gray border around the columns. My columns are only a few pixels width and I still need to differentiate 10 different categories (=colors). So picking only very light colors (where the border would be easy to spot) is no option. I've found no way of changing:

1. The style of the highlight-border (primarily the color) or
2. The color of the columns (fill color) when their respective category is selected in the legend.

Is there some property I can pass to the draw() call of my chart to change the highlighting? Do I have to manually override some events/methods?

Help is highly appreciated!

解决方案

In the past I used some CSS hacks to change some properties of the generated SVG (path, rect, etc...) you can play around with advanced selectors and maybe you'll be able to achieve you what you want. I created a very quick and buggy example, but maybe it will point you on the right direction.

For example:

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

Hope it helps.

这篇关于Google Chart API：更改悬停图例的颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！