Question

我有一个问题，我想在悬停另一个系列时更改列系列的填充颜色。（这是为了可视化相关系列）

我成功改变了mouseOver的颜色，但我无法恢复mouseOut上的颜色。

我到目前为止的代码是jsFiddle

var hoverSerie;
var originalColor;
var newColor = '#a760d6'

$(function () {
    var t = $('#container').highcharts({
        chart: {
            type: 'column'
        },
        xAxis: {
            categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
        },
        yAxis: {
            min: 0
        },
        plotOptions: {
            column: {
                stacking: 'normal'
            }
        },
        series:[{
            events: {
                mouseOver: function() {

                    hoverSeries = this.chart.series[2]

                    originalColor = hoverSeries.options.color;
                    hoverSeries.options.color = newColor;
                    hoverSeries.update(hoverSeries.options);
                },
                mouseOut: function(){

                    if(originalColor)
                    {
                       hoverSeries.options.color = originalColor;
                       hoverSeries.update(); 
                    }
                }
            },
            animation : false,
            name: 'John',
            data: [5, 3, 4, 7, 2]
        }, {
            animation : false,
            name: 'Jane',
            data: [2, 2, 3, 2, 1]
        }, {
            animation : false,
            name: 'Joe',
            data: [3, 4, 4, 2, 5]
        }]
    });
});

当悬停（mouseOver）顶部堆叠系列（浅蓝色）时底部（黑色）系列的颜色。由于一个或其他原因，鼠标输出事件的工作方式与mousOver事件不同。执行mouseOut时代码似乎循环。

Answer 1

显然在update mouseOut内进行redraw时，mouseOut - 部分更新导致mouseWasOver被递归调用，最终导致＆＃34;堆栈大小超出＆＃ 34 ;.在 this updated Fiddle 中，我使用布尔值来阻止它以递归方式发生，这似乎对我在Chrome中起作用。希望它是你想要的。唯一真正的变化是添加了mouseOver和mouseOut中使用的update变量。

这似乎是与mouseOut内部调用{{1}}相关的错误（？），该问题早在2011年their GitHub上报告，2010年在their forum上报告。 / p>

Highcharts：当悬停其他系列时改变系列的颜色

1 个答案: