Question

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

第一张图正常呈现：

单击导航按钮后的下一个图像： And the next image in line

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将其移动到屏幕上。 / p>

如果您只是将图表延迟到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/

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

1 个答案: