javascript - Highcharts - 将鼠标悬停在饼图中的一个切片上时更改颜色

Question

我有一个简单的绿色饼图，当您将鼠标悬停在它上面时，我想将切片颜色更改为红色。我正在尝试使用 API 来做到这一点，但它不起作用......

这是jsfiddle：http: //jsfiddle.net/TdKGW/4/

尝试通过 states/hover 方法执行此操作，但它不起作用：

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

关于如何让您悬停（或鼠标悬停）的切片具有红色填充的任何想法？一旦鼠标移出，它就会变回绿色。

谢谢

Answer 1

您可以mouseOver在点上捕捉事件并设置填充，然后捕捉mouseOut系列，并通过设置默认值“恢复颜色”。

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'
                            });
                        });
                    }
                }
            }
        },

示例：http: //jsfiddle.net/r6p7E/6/