2

我一直在寻找解决我的问题的方法。我有一个 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 反转的两个按钮。

<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 反向按钮时重新绘制图表，那将非常有帮助。

4

0 回答 0