javascript - 当我在显示和隐藏 Flot 图之间交替时出现奇怪的行为

Question

当我通过单击按钮隐藏和显示图形时，呈现的第二个和第三个图形似乎超出了它们的 CSS 边界。像这样：

第一张图正常渲染：

单击导航按钮后的下一个图像：

Id 的名称不同（当然是为了描述每个 div 的不同图），但定位相同，如下面的相关 CSS 所示。

相关CSS：

#placeholder_one{
    margin-top:70px;
    margin-left:auto;
    margin-right:auto;
    width:80%;
    height:350px;
    position:relative;
}
#placeholder_two{
    margin-top:70px;
    margin-left:auto;
    margin-right:auto;
    width:80%;
    height:350px;
    position:relative;
    display:none;
}
#placeholder_three{
    margin-top:70px;
    margin-left:auto;
    margin-right:auto;
    width:80%;
    height:350px;
    position:relative;
    display:none;
}

的HTML：

    <div class="basic_form">
        <span id="title">
                Spectra
        </span> 

        <div id="placeholder_one"></div> 
        <div id="placeholder_two"></div> 
        <div id="placeholder_three"></div> 

        <a href= "#" onclick="move('fwd');"><i id="nav_next" class="icon-double-angle-right about_nav"></i></a>
        <a href= "#" onclick="move('rev');"><i id="nav_rev" class="icon-double-angle-left about_nav"></i></a>
    </div>

最后作为参考，Javascript。第一个只是一个导航结构，第二个脚本是实际发生绘图的地方：

<script type="text/javascript">
    var currentCount = 1;

    function safeCount(op){
        if (op == "add"){
            if (currentCount>=3){
                ;
            }
            else{
                currentCount = currentCount+1;
            }
        }
        if (op == "sub"){
            if (currentCount<=1){
                ;
            }
            else{
                currentCount = currentCount-1;
            }
        }
    }

    function divSelector(count){
         if (count == 1){
                    $('#placeholder_one').fadeIn(1000);
                    $('#placeholder_two').hide();
                    $('#placeholder_three').hide();
                }else if (count == 2){
                    $('#placeholder_one').hide();
                    $('#placeholder_two').fadeIn(1000);
                    $('#placeholder_three').hide();
                }else if (count == 3){
                    $('#placeholder_one').hide();
                    $('#placeholder_two').hide();
                    $('#placeholder_three').fadeIn(1000);
                    }
        else{
            console.log("Count is nothing.");
        }
    }


    //Navigating: pass in "fwd" or "rev"
    function move(direction){    
        if (direction == "fwd"){
            safeCount("add");
            divSelector(currentCount);
        }
        else if (direction =="rev"){
            safeCount("sub");
            divSelector(currentCount);
        }
        else{
            ;
        }
    }
</script>
<script type="text/javascript">
$(function() {

    function plotList(string_id, data_list){
        $.plot(string_id, [{data:data_list,
                            lines: { show: true },
                            points: { show: false },
                            }],
                            {
                            xaxes: [{position:'bottom',axisLabel:'T(s)'}],
                            yaxes: [{position:'left',axisLabel:'Proper Acceleration (g)'}],
                            grid:{hoverable:true,color:'white',clickable:true}
                            });
    }

$(document).ready(function() {
    var test_one = [[0,0],[4,3]];var test_two = [[0,0],[4,3]];var test_three = [[0,0],[4,3]];
    plotList("#placeholder_one",test_one);
    plotList("#placeholder_two",test_two);
    plotList("#placeholder_three",test_three);
    });
});


</script>

任何关于我如何纠正这个问题的意见将不胜感激

Answer 1

Flot 在设置为display:none. 因此，您可以延迟调用$.plot直到容器可见，或者您可以使用负边距将其移出屏幕、绘图，然后divSelector将它们移入/移出屏幕。

如果你只是延迟情节直到divSelector想要展示它们，你会得到这样的东西：

  function divSelector(count) {
      if (count == 1) {
          $('#placeholder_one').fadeIn(1000);
          $('#placeholder_two').hide();
          $('#placeholder_three').hide();
      } else if (count == 2) {
          $('#placeholder_one').hide();
          $('#placeholder_two').show();
          if ($('#placeholder_two').find('canvas').length == 0) {
              plotList("#placeholder_two", test_two);
          }
          $('#placeholder_three').hide();
      } else if (count == 3) {
          $('#placeholder_one').hide();
          $('#placeholder_two').hide();
          $('#placeholder_three').show();

          if ($('#placeholder_three').find('canvas').length == 0) {
              plotList("#placeholder_three", test_three);
          }
      } else {
          console.log("Count is nothing.");
      }
  }

工作示例：http: //jsfiddle.net/ryleyb/Q7T4y

如果您希望保持淡入淡出等等，您可以使用边距来构建屏幕外的情节，如下所示：

  plotList("#placeholder_one", test_one);
  $('#placeholder_two,#placeholder_three').css({
      'margin-left': '-1000px',
      display: 'block'
  });
  plotList("#placeholder_two", test_two);
  plotList("#placeholder_three", test_three);
  $('#placeholder_two,#placeholder_three').css({
      'margin-left': 'auto',
      display: 'none'
  });

工作示例：http: //jsfiddle.net/ryleyb/Q7T4y/1/