4

ボタンをクリックしてグラフを非表示にして表示すると、レンダリングされた 2 番目と 3 番目のグラフが CSS の境界を超えているように見えます。そのようです：

正常にレンダリングされた最初のグラフ: http://i.imgur.com/r60eSLx.png

そして、ナビゲーションボタンをクリックした後の次の画像: そして次の画像

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 です。1 つ目は単なるナビゲーション構造で、2 つ目のスクリプトはプロットが実際に行われる場所です。

<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>

これをどのように修正できるかについての意見は、非常に高く評価されます

4

1 に答える 1

5

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/

于 2013-06-26T15:36:07.317 に答える