简体   繁体   English

Google Chart API:在图例上更改颜色

[英]Google Chart API: Change color on hovering legend

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. 因此,我有一个ColumnChart ,内置功能之一是您可以将鼠标悬停在图表图例中的某个项目(所谓的类别)上,并且可以在图表的相应列周围获得一些高亮边框。

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. 现在,我的图表中有许多列和类别,并且很难看到突出显示的系列/类别,因为默认行为只是在列周围显示了1px的灰色边框。 My columns are only a few pixels width and I still need to differentiate 10 different categories (=colors). 我的列只有几像素宽,我仍然需要区分10个不同的类别(=颜色)。 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? 是否有一些属性可以传递给图表的draw()调用以更改突出显示? 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. 过去,我使用一些CSS技巧来更改所生成的SVG的某些属性(路径,矩形等),您可以使用高级选择器进行操作,也许您将能够实现所需的功能。 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. 希望能帮助到你。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM