Question

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

类似于contentHover

的内容

还可以在点击contentHover！

中的任何超链接时添加更多显示另一个图表

Answer 1

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

overlay div的内容可以是你喜欢的任何内容。叠加层的不透明度为零。在.hover事件方法中，可以通过操纵不透明度或其他jQuery效果来显示和隐藏叠加：show，hide，fadeIn，fadeOut等。

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中。

即

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

$（ '＃叠加'）表示（）;

}）。鼠标移开（功能（事件）{

$（ '＃叠加'）隐藏（）;

}）;

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

使用叠加层覆盖整个容器内容

2 个答案: