Highcharts：柱形图选择状态填充颜色

For the following fiddle, I have used Highcharts CSS Styling.

对于以下小提琴,我使用了Highcharts CSS Styling。

.highcharts-point-select {
   stroke: #33ff33;
   stroke-width: 3
}

On selecting any column, the fill color defaults to a grey color (#cccccc), which I don't want. The select state fill color should be same as the original color, i.e. fill for select state should not be set. How can I achieve this using CSS Styling?

在选择任何列时,填充颜色默认为灰色(#cccccc),这是我不想要的。选择状态填充颜色应与原始颜色相同,即不应设置填充选择状态。如何使用CSS样式实现此目的?

I don't want to hard code the color in the CSS. Just like in select state options, color can be set to null http://jsfiddle.net/pemxdL6f/6/, can something like this be achieved using CSS Styling?

我不想硬编码CSS中的颜色。就像在选择状态选项中一样,颜色可以设置为null http://jsfiddle.net/pemxdL6f/6/,使用CSS样式可以实现这样的事情吗?

2 个解决方案

#1

Simply adding a fill attribute to your CSS class will do the trick:

只需在CSS类中添加fill属性就可以了:

.highcharts-point-select {
    stroke: #33ff33;
    stroke-width: 3;
    fill: #33ff33;
}

Here's a modified version of your fiddle with this change: http://jsfiddle.net/brightmatrix/pemxdL6f/5/

以下是您对这一变化的改进版本:http://jsfiddle.net/brightmatrix/pemxdL6f/5/

You may also find the states attribute helpful for a non-CSS solution. See the answer and the included fiddle here: https://*.com/a/11608259/2596103.

您还可能会发现states属性对非CSS解决方案很有帮助。请参阅答案和附带的小提琴:https://*.com/a/11608259/2596103。

#2

Got the answer

得到了答案

http://jsfiddle.net/sm57vde9/

@import 'https://code.highcharts.com/css/highcharts.css';
.highcharts-point-select {
    stroke: #33ff33 !important;
    stroke-width: 3;
    fill: inherit;
}

#1