charts - Highcharts Dynamically changing slices

Question

I've almost got this fiddle working like I want it to; however, I have a strange mouseout issue that I haven't been able to figure out. When you click on a slice - it turns it green (active) when you click it again - it turns it grey (inactive). The problem is that when you click it and then slowly move you mouse off of the slice - it is resetting the color to grey. If you move your mouse out quickly - it stays green.

It only seems to do it on the first mouseout. What am I missing?

plotOptions: {
        pie: {
            states: {
                hover: {
                    enabled: false
                }
            },
            point: {
                events: {
                    click: function() {
                        if(!this.active) 
                            this.graphic.attr({ fill: '#00FF00' });
                        else
                            this.graphic.attr({ fill: '#CCCCCC' });
                        this.active = !this.active;
                    },
                }
            }
        }
    },

http://jsfiddle.net/r6p7E/3/

Answer 1

看起来即使您禁用了悬停状态，Highcharts 仍然会在mouseOut点对象上留下一些默认行为。

您可以在创建图表后完成杀死它：

       events:{
            load: function()
            {
                var seriesPoints = this.series[0].points;
                for (var i = 0; i < seriesPoints.length; i++){
                    seriesPoints[i].onMouseOut = function(){};
                }
            }
        }

在这里拉小提琴。