postDrawHooksにプロット後の事後処理を書いて、
マウスオーバーイベントをリロードする.
http://stackoverflow.com/questions/10426192/jqplot-how-to-change-opacity-or-z-index-of-canvasoverlay
<html> <head> <script src="js/jquery-1.11.1.js"></script> <!--[if lt IE 9]> <script language="javascript" type="text/javascript" src="excanvas.min.js"></script> <![endif]--> <script language="javascript" type="text/javascript" src="js/jquery.jqplot.min.js"></script> <script language="javascript" type="text/javascript" src="js/plugins/jqplot.highlighter.min.js"></script> <script language="javascript" type="text/javascript" src="js/plugins/jqplot.pointLabels.min.js"></script> <script language="javascript" type="text/javascript" src="js/plugins/jqplot.cursor.min.js"></script> <link rel="stylesheet" type="text/css" href="js/jquery.jqplot.min.css" /> <script> jQuery( function() { function change_from_Taro_to_Jiro(){ $(".ABC").hover( function(){$("h1").html("<h1><font size=7> Jiro</font></h1>");}, function(){$("h1").text("Taro"); }); } var plot2=jQuery . jqplot( 'jqPlot-sample', [ [ [ 88, 65, '<span class="ABC">A</span>' ], [ 36, 22, '<span class="ABC">B</span>' ], [ 33, 54, '<span class="ABC">C</span>' ], [ 51, 63, '<span class="ABC">D</span>' ], [ 21, 91, '<span class="ABC">E</span>' ], [ 45, 79, '<span class="ABC">F</span>' ] ] ], { seriesDefaults: { color: '#7dffc7', showLine: false, markerOptions: { size: 30 }, pointLabels: { show: true, location: 'n', ypadding: -12, escapeHTML: false } }, highlighter: { show: true, showMarker: false, tooltipLocation: 'e', tooltipAxes: 'xy', formatString: 'x:%s, y:%s' }, cursor:{ show: true, zoom: true, //constrainZoomTo: 'none', } } ); change_from_Taro_to_Jiro(); $.jqplot.postDrawHooks.push(function(){alert("post draw");change_from_Taro_to_Jiro();}) plot2.replot(); }); </script> </head> <body> <h1>Taro</h1> <input type="button" value="test1" name="but1" class="b1"> <div class="ppp"> <div id="jqPlot-sample" style="height: 300px; width: 300px;"></div> </div> </body> </html>
マウスクリックイベント方式:
<html> <head> <script src="js/jquery-1.11.1.js"></script> <!--[if lt IE 9]> <script language="javascript" type="text/javascript" src="excanvas.min.js"></script> <![endif]--> <script language="javascript" type="text/javascript" src="js/jquery.jqplot.min.js"></script> <script language="javascript" type="text/javascript" src="js/plugins/jqplot.highlighter.min.js"></script> <script language="javascript" type="text/javascript" src="js/plugins/jqplot.pointLabels.min.js"></script> <script language="javascript" type="text/javascript" src="js/plugins/jqplot.cursor.min.js"></script> <link rel="stylesheet" type="text/css" href="js/jquery.jqplot.min.css" /> <script> jQuery( function() { var plot=jQuery . jqplot( 'jqPlot-sample', [ [ [ 88, 65, '<span class="ABC">A</span>' ], [ 36, 22, '<span class="ABC">B</span>' ], [ 33, 54, '<span class="ABC">C</span>' ], [ 51, 63, '<span class="ABC">D</span>' ], [ 21, 91, '<span class="ABC">E</span>' ], [ 45, 79, '<span class="ABC">F</span>' ] ] ], { seriesDefaults: { color: '#7dffc7', showLine: false, markerOptions: { size: 30 }, pointLabels: { show: true, location: 'n', ypadding: -12, escapeHTML: false } }, highlighter: { show: true, showMarker: false, tooltipLocation: 'e', tooltipAxes: 'xy', formatString: 'x:%s, y:%s' }, cursor:{ show: true, zoom: true, //constrainZoomTo: 'none', } } ); function myMouseOverEvent(ev,gridpos,datapos,neighbor,plot) { if(neighbor) { //var X = gridpos.x; //var Y = gridpos.y; var data_label = neighbor.data[2]; alert(data_label); } } plot.eventListenerHooks.hooks.push(["jqplotMouseMove",myMouseOverEvent]); plot.replot(); }); </script> </head> <body> <h1>Taro</h1> <div id="jqPlot-sample" style="height: 300px; width: 300px;"></div> </body> </html>
強引法(mouseoverイベントをリロードするのがポイント):
<html> <head> <script src="js/jquery-1.11.1.js"></script> <!--[if lt IE 9]> <script language="javascript" type="text/javascript" src="excanvas.min.js"></script> <![endif]--> <script language="javascript" type="text/javascript" src="js/jquery.jqplot.min.js"></script> <script language="javascript" type="text/javascript" src="js/plugins/jqplot.highlighter.min.js"></script> <script language="javascript" type="text/javascript" src="js/plugins/jqplot.pointLabels.min.js"></script> <script language="javascript" type="text/javascript" src="js/plugins/jqplot.cursor.min.js"></script> <link rel="stylesheet" type="text/css" href="js/jquery.jqplot.min.css" /> <script> jQuery( function() { var plot=jQuery . jqplot( 'jqPlot-sample', [ [ [ 88, 65, '<span class="ABC">A</span>' ], [ 36, 22, '<span class="ABC">B</span>' ], [ 33, 54, '<span class="ABC">C</span>' ], [ 51, 63, '<span class="ABC">D</span>' ], [ 21, 91, '<span class="ABC">E</span>' ], [ 45, 79, '<span class="ABC">F</span>' ] ] ], { seriesDefaults: { color: '#7dffc7', showLine: false, markerOptions: { size: 30 }, pointLabels: { show: true, location: 'n', ypadding: -12, escapeHTML: false } }, highlighter: { show: true, showMarker: false, tooltipLocation: 'e', tooltipAxes: 'xy', formatString: 'x:%s, y:%s' }, cursor:{ show: true, zoom: true, //constrainZoomTo: 'none', } } ); $(".ABC").hover( function(){$("h1").html("<h3>test1</h3>");}, function(){$("h1").text("Taro"); }); $(".ppp").hover( function(){ $(".ABC").hover( function(){$("h1").html("<h3>test1</h3>");}, function(){$("h1").text("Taro"); }); }); }); </script> </head> <body> <h1>Taro</h1> <input type="button" value="test1" name="but1" class="b1"> <div class="ppp"> <div id="jqPlot-sample" style="height: 300px; width: 300px;"></div> </div> </body> </html>