同一页面上的多个高级图表

时间:2014-06-30 06:49:30

标签: javascript php jquery highcharts

我设计了带有高级图表的简单页面,这里的图表是动态加载的,当你下载网页时像goole +和facebook,这里我使用下面的高图脚本生成图表,但问题是它只加载向下滚动网页时,有一次没有加载其他内容,我的代码在下面,

<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 = new Highcharts.StockChart({

每次向下滚动都会动态设置(window.chart0,window.chart1,window.chart2 .....)

1 个答案:

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