JqplotでCanvasの下に重なり触れなくなってしまった要素を触れるようにする。

グラフ描画後以下のスクリプトを実行

ポイント
（１）再描画ごとに新しく書き直すためpostDrawHooksを利用
（２）点（div class=jqplot-point-label）がソース上canvasの上側にあるのが問題なので、
　　　下に移動する．
（３）クラス名でグラフを管理している場合は，attr[クラス名,関数]．の関数をうまく利用して対応する．

グラフを書く処理，例えば、ボタンをおしたら、表に変更あったら、make_graph(),post_draw()を実行する等．

　　　　　　　  make_graph();
                post_draw();

postDrawHooksでグラフを再描画がするたびにshow_fig_mouse_over()関数をよびcanvasとpointを入れ替える動作を行う，
replotでそれを反応させる．

  function post_draw(){
                        alert("post_draw")
                        $.jqplot.postDrawHooks.push(function(){show_fig_mouse_over();})
                        plot1.replot();
                        plot2.replot();
                        plot3.replot();
                        //alert("test5");

                        //alert("test6");
                }; //hover

function show_fig_mouse_over(){
     $('div[class2^="pp"]').attr("class2",function(index,attr){

                        $('div[class2^='+attr+'] div[class^=jqplot-point-label]').appendTo('div[class2="'+$('div[class2^='+attr+'] div[class^=jqplot-point-label]').parent().attr("class2")+'"]');
                        return attr;

                });

             
}

HTML：３つのグラフ

<center>
<p class="graph1">タイトル1</p>
 <table>
 <tr>
 <td>
 <div class2="pp1" class="p1" id="jqPlot-sample" style="height: 500px; width: 500px;"></div>
 </td>
 <td>
<div class3="pp1" id="tmp_fig" style="height: 500px; width: 500px;"></div>
 </td>
 </tr>
 </table>
</center>

 <center>
 <p class="graph1">タイトル２</p>
 <table>
 <tr>
 <td>
 <div class2="pp2" class="p2" id="jqPlot-sample2" style="height: 500px; width: 500px;"></div>
 </td>
  <td>
<div class3="pp2" id="tmp_fig" style="height: 500px; width: 500px;"></div>
 </td>

操作も含めた例（マウスオーバーするとグラフの横に対応する画像をだす）
v2=[1,2,'test']
みたいな感じの配列．

function show_fig_mouse_over(){
     $('div[class2^="pp"]').attr("class2",function(index,attr){

                        $('div[class2^='+attr+'] div[class^=jqplot-point-label]').appendTo('div[class2="'+$('div[class2^='+attr+'] div[class^=jqplot-point-label]').parent().attr("class2")+'"]');
                        return attr;

                });

　　　   $('div[class2^="pp"]').on(
                                {'mouseenter':function(){
                                        //alert("test_mouse_over");
                                        $("#tmp2").remove();
                                         var text1=$(this).html();
                                         var inner_text1=$(this).text();
                                         link1=$(this).attr("link");
                                        var f32=$(this).parents('div[class2^="pp"]');
                                        f32=f32.attr("class2");

                                        $('div[class3="'+f32+'"]').html('<div id="tmp3"></div>');

                                        $(this).append('<div id="tmp2"></div>');
                                        //alert(link1);
                                        // $(this).append('<p id="tmp2"></p>');
                                          $("#tmp2").text(inner_text1);
                                        //alert(link1);

                                                <!-- alert(link1);-->
                                        //alert('div[class2="'+f32+'"] #tmp3'); 
                                        $('div[class3="'+f32+'"] #tmp3').append('<a href="'+text1+'"> <img src="'+link1+'"/></a>');

                                        },
                                        'mouseleave': function(){
                                                $("#tmp2").remove();


                                        }
                                },".fig1"
                        );


             
}