2014-06-30 82 views
0

我設計了簡單的頁面,高圖表,這裏的圖表是動態加載時,srolldown的網頁像一個goole +和Facebook,在這裏我使用下面的高圖腳本來生成圖表,但問題是它的時候sroll縮小網頁,我的代碼如下上面的腳本在同一頁上的多個高圖

window.chart0 =新Highcharts.StockChart只加載一個時間和事情的其餘部分沒有加載,

<script type="text/javascript"> 
jQuery(function() { 
      // Create the chart 

      window.chart0 = new Highcharts.StockChart({ 
     chart: { 
      renderTo: 'container0', 
      borderColor: 'black', 
      borderWidth: 2, 
      borderRadius: 10, 
      height:510 
     }, 

        title : { text :' (IP::)' }, 
        xAxis: { gapGridLineWidth: 0 }, 

              yAxis: [{ 
          min:0 
          }], 

        series : [{ 
          name : 'value', 
          type:'area', 
    data :null, 
          tooltip: { 
            valueDecimals: 2 
          }, 

    }], 
      subtitle: { 
           text: 'MAX : 0/MIN : 0/AVG : 0.00 ', 
            align: 'left', 
            x: -1 
            } 
      }); 
    }); 
    </script> 
    <script src="js/highstock.js"></script> 

    <div id="container0" style="height: 500px; min-width: 500px"></div> 

( {

,每向下滾動,它將動態地設置(window.chart0,window.chart1,window.chart2 .....)

+0

哪裏是你的代碼的功能你調用滾動事件? –

+0

是否有可能將其作爲現場演示進行復制?你是否在控制檯收到任何錯誤? –

回答

0

這裏我的代碼,

enter cod<script type="text/javascript" src="js/jquery-ias.min.js"></script> 
    <script type="text/javascript"> 
    $(document).ready(function() { 
      // Infinite Ajax Scroll configuration 
      jQuery.ias({ 
      container : '.wrap', // main container where data goes to append 
      item: '.item', // single items 
      pagination: '.nav', // page navigation 
      next: '.nav a', // next page selector 
      loader: '<img src="css/loading.gif" style="height:150px; width:200px;"/> ', // loading gif 
      triggerPageThreshold: 25 // show load more if scroll more than this 
     }); 
    }); 
</script> 

<body> 
    <div class="wrap"> 
    <div style="display: block;" class="item"> 

<script type="text/javascript"> 
    jQuery(function() { 
     // Create the chart 

     window.chart0 = new Highcharts.StockChart({ 
    chart: { 
     renderTo: 'container0', 
     borderColor: 'black', 
     borderWidth: 2, 
     borderRadius: 10, 
     height:510 
    }, 

       title : { text :' (IP::)' }, 
       xAxis: { gapGridLineWidth: 0 }, 

             yAxis: [{ 
         min:0 
         }], 

       series : [{ 
         name : 'value', 
         type:'area', 
data :null, 
         tooltip: { 
           valueDecimals: 2 
         }, 

}], 
     subtitle: { 
          text: 'MAX : 0/MIN : 0/AVG : 0.00 ', 
           align: 'left', 
           x: -1 
           } 
     }); 
}); 
     </script> 
<script src="js/highstock.js"></script> 

<div id="container0" style="height: 500px; min-width: 500px"></div> 
</div> 
<div class="nav"> 
      <a href='test.php?clientname=<?php echo $name;?>&p=<?php echo $next?>'>Next</a> 
    </div> 
    </div>