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

【问题标题】：Highcharts - change color while hovering over a slice in pie chartHighcharts - 将鼠标悬停在饼图中的一个切片上时更改颜色
【发布时间】：2013-08-07 21:43:44
【问题描述】：

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

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

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

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

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

谢谢

【问题讨论】：

好的，现在我尝试这样做： mouseOver: function() { this.series.data[this.x].update({ color: 'blue' });} .在 mouseOver 之后确实会在其上创建一个蓝色阴影，但是当我尝试对 mouseOut 进行相同操作时，它会超时......我怎样才能使它工作？
你能用新代码更新 jfiddle 吗？你用的是什么mouseOver？

标签： javascript highcharts

【解决方案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/

【讨论】：

有什么方法可以在每张幻灯片上而不是整个饼图上进行鼠标移出？