1

マウスオーバー時にハイチャートグラフ全体にオーバーレイ効果を表示する方法は?

contentHoverに似たもの

また、contentHover からハイパーリンクをクリックすると別のグラフが表示されるように追加することもできます。

4

2 に答える 2

0

次のようにjQueryのホバーメソッドを使用できます：http：//jsfiddle.net/3zUGj/

オーバーレイ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;
});
于 2013-02-15T09:23:35.563 に答える
0

チャートコンテナdivにマウスオーバー/マウスアウトアクションを追加できます。

すなわち。

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

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

}).mouseout(関数(イベント){

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

});

オーバーレイは、チャートよりも「上」にある div (絶対位置) の ID です。

于 2013-02-15T09:29:48.407 に答える