突出系列悬停高图表答案

【问题标题】：Highlight serie hover highcharts突出系列悬停高图表
【发布时间】：2014-01-25 07:08:05
【问题描述】：

有没有办法用 Highcharts 突出显示溢出，如屏幕截图所附行所示。我尝试使用十字准线设置，但未考虑 y 轴的图例。

提前感谢您的帮助。

http://cl.ly/image/1E1P0N3E2s26

【问题讨论】：

标签： javascript jquery highcharts hover highlight

【解决方案1】：

尝试使用renderer.rect() 并更新它在mouseOver 上的位置，参见：http://jsfiddle.net/NUP9m/4/

添加框代码：

    chart: {
        type: 'bar',
        events: {
            load: function () {
                this.highlight = this.renderer.rect(0, -100, 500, 40).attr({
                    fill: 'rgba(255,0,0,0.2)',
                    zIndex: 0
                }).add();
            }
        }
    },

管理盒子：

                events: {
                    mouseOver: function () {
                        var h = this.series.chart.highlight;

                        if (h) {
                            // h.show();
                            h.attr({
                                y:  this.series.chart.plotTop - this.plotX + this.series.chart.plotHeight - h.height / 2
                            });
                        }
                    },
                    mouseOut: function () {
                        var h = this.series.chart.highlight;

                        if (h) {
                            // h.hide();
                        }
                    }
                }

注意，mouseOut 是可选的，只有当你想隐藏盒子时才需要，当你离开容器或点时。

【讨论】：

非常感谢您的回答，非常完美！