highcharts - 使用 Overlay 悬停整个容器内容

Question

如何在鼠标悬停时在整个 Highcharts 图表上显示叠加效果？

类似于contentHover的东西

还可以在点击 contentHover 中的任何超链接时添加更多显示另一个图表！

Answer 1

您可以像这样使用 jQuery 的悬停方法：http: //jsfiddle.net/3zUGj/

覆盖 div 的内容可以是任何你喜欢的。叠加层的不透明度为零。在 .hover 事件方法中，可以通过操作不透明度或使用其他 jQuery 效果来显示和隐藏覆盖层：显示、隐藏、淡入淡出、淡出等。

html

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
<div id="contentHover" style="min-width: 400px; height: 400px; margin: 0 auto; background:#999; text-align:center; padding:20px;top:0px; position:absolute; z-index:100; opacity:0"><a href="">New Graph</a></div>

js

// high chart
var chart;
$(document).ready(function() {
    chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            type: 'line',
            marginRight: 130,
            marginBottom: 25
        },
        … highcharts implementation …
    });
});

// show hide the contentHover div on hover
var hover = $('#contentHover');
$('#contentHover').hover( function(){
    hover.css('opacity','1');
}, function(){
    hover.css('opacity','0');
});

// add click event to all links within contentHover, add new chart
$('#contentHover').on('click','a',function(){
    chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            type: 'line'
        },
        … highcharts implementation …
    });
    return false;
});

Answer 2

您可以将鼠标悬停/鼠标移出操作添加到图表容器 div。

IE。

$('#container').mouseover(function(event){

$('#overlay').show();

}).mouseout(函数(事件){

$('#overlay').hide();

});

其中overlay是div的id（绝对位置），它比图表“over”。