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/