javascript - jQuery Flippy を使用すると Flot Chart でデータが失われる

Question

私は自分の問題の解決策を見つけるためにずっと探していました。jQuery Flippy div 内に Flot 折れ線グラフがあります。私は基本的に、チャートとテーブルをクールな効果で切り替えることができるように、Flippy を使用したいと考えていました。

Flippy を開始するボタンは正常に機能し、今のところ単純な div のみが表示されます。ただし、他のボタンをクリックして Flippy を逆にする (チャートに戻る) と、チャートのデータが消えてしまいました。軸とラベルはありますが、線はありません。チャートを再描画する必要があるかどうかはわかりません。チャートを再描画するためのボタンを作成する多くの方法を試しました。理想的には、ボタンをクリックして Flippy を反転させたときにチャートを再描画したいと考えています。

これは、Flippy ボタン用の js コードです。

<script type="text/javascript">
$(document).ready(function(){

    $("#btn-reverse").on("click",function(e){
        $(".flipbox").flippyReverse();
        e.preventDefault();
    });

    $("#btn-top").on("click",function(e){
        $(".flipbox").flippy({
            color_target: "#b6d635",
            direction: "top",
            duration: "200",
            verso: "<span style='height:300px' class=\"big\">Other side of Flippy<br><br><br><br><br><br></span>",
         });
         e.preventDefault();
    });

});
</script> 

これは、ページが読み込まれたときに最初にグラフを作成する js です (別の PHP ファイルに含まれています)。

var plot = $.plot($(".chart"),
       [ { data: sin, label: "Total cost ", color: "#ee7951"} ], {
           series: {
               lines: { show: true },
               points: { show: true }
           },
           grid: { hoverable: true, clickable: true },
           yaxis: { min: 0, 
                    tickFormatter: currencyFormatter },
           xaxis: {
                mode: "time",
                timeformat: '%b %y',                
            }
       });

最後に、これはチャートをレンダリングする HTML であり、Flippy と Flippy のリバース用の 2 つのボタンでもあります。

<a class="btn" id="btn-top" href="#">Flip</a>
<a class="btn" id="btn-reverse" href="#">Reverse</a>


<div class="row-fluid">
    <div class="flipbox-container">
      <div class="span11">
        <div class="widget-box flipbox">
          <div class="widget-title"> <span class="icon"> <i class="icon-signal"></i> </span>
            <h5>Total Usage Costs</h5>
          </div>
          <div class="widget-content">
            <div class="chart"></div>
          </div>
        </div>
      </div>
    </div>
</div>

Flippy を使用しているときにチャートのデータが失われる理由を誰かがアドバイスしたり、Flippy のリバース ボタンが押されたときにチャートを再描画する方法を提案したりできれば、非常に役に立ちます。