Question

我一直在寻找解决我问题的方法。我有一个FQuery折线图，它位于jQuery Flippy div中。我基本上想要使用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反向按钮时如何重新绘制图表，这将非常有帮助。

当jQuery Flippy使用时，Flot Chart会丢失数据

0 个答案: