高图-将颜色悬停在饼图中的切片上时更改颜色

Question

I have a simple pie chart that's green and I would like to change the slice color to red once you hover over it. I'm trying to do that with the API, but it's not working...

Here's the jsfiddle: http://jsfiddle.net/TdKGW/4/

Trying to do this via the states/hover method, but it's not working:

            states: {
                hover: {
                    brightness: 0,
                    color: 'red'                        
                }
            }

Any idea on how I can have the slice that you're hovering over (or mouseover) have a red fill? And it would change back to green once you mouseout.

Thanks

Answer 1

You can catch mouseOver event on point and set fill, then catch mouseOut of series, and "recover color" by setting default.

plotOptions: {
            series: {
                states: {
                    hover: {
                        enabled: false
                    }
                },
                point: {
                    events: {
                        mouseOver: function () {
                            this.graphic.attr({
                                fill: 'red'
                            });
                        }
                    }
                },
                events: {
                    mouseOut: function () {
                        var serie = this.points;

                        $.each(serie, function (i, e) {
                            this.graphic.attr({
                                fill: '#CCCCCC'
                            });
                        });
                    }
                }
            }
        },

Example: http://jsfiddle.net/r6p7E/6/