highcharts应用:highcharts历史数据曲线，用jquery实现翻页功能~~

Highcharts曲线实现简单的翻页功能~~

每页显示60个数据，功能基本实现 

$(document).ready(function() {  
  MyCharts();
  $(".dangqianPage").val(1);  
  $("#xia").click(function(){//下一页
  if(i1+60<a.length-1){
       i1=i1+60;       
       $(".dangqianPage").val((i1/60)+1);
       $("p").val((i1/60)+1);
       MyCharts();
      }else{
        alert("这尾页!");
      }
  });
  $("#shang").click(function(){//上一页
  if(i1>=1){
       i1=i1-60;
       MyCharts();       
       $(".dangqianPage").val((i1/60)+1);
       $("p").val((i1/60)+1);
      }else{
        alert("这是首页!");
      }
  });
  $("#first").click(function(){  
       i1=0;
       MyCharts();      
       $(".dangqianPage").val((i1/60)+1);
       $("p").val((i1/60)+1);
  });
  $("#last").click(function(){  
       i1=a.length-(a.length%60);
       MyCharts();       
       $(".dangqianPage").val((i1/60)+1);
       $("p").val((i1/60)+1);
  });
  $("#jump").click(function(){      
       var jump = $(".jumpPage").attr("value");
       i1=(jump-1)*60
       MyCharts();       
       $(".dangqianPage").val((i1/60)+1);
       var replace = (i1/60)+1;         
  });  
  $("#button1").click(function(){
  });   
 }); 
 function MyCharts(){     //high曲线
  chart = new Highcharts.Chart({
   chart: {
    renderTo: 'container',
    defaultSeriesType: 'spline',
    marginRight: 10,
    zoomType: 'x',
     events: {
     
     load: function() {
      var series = this.series[0];
     }
    }
   },
   title: {
    text: '历史数据曲线'
   },
   xAxis: {
    type: 'datetime',
    tickPixelInterval: 100,
    dateTimeLabelFormats:  
                     {  
                      minute: '%e. %b %H:%M',  
                      hour: '%b/%e %H:%M',  
                      day: '%e日/%b',  
                      week: '%e. %b',  
                      month: '%b %y',  
                      year: '%Y' 
                      }       
   },
   yAxis: {
    title: {
     text: 'Value'
    },
    plotLines: [{
     value: 0,
     width: 1,
     color: '#808080'
    }]
   },
   tooltip: {
    formatter: function() {
                  return '<b>'+ this.series.name +'</b><br/>'+
      Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) +'<br/>'+ 
      Highcharts.numberFormat(this.y, 2);
    }
   },
   plotOptions: {   
        enabled: true   
   }, 
   legend: {
    enabled: false
   },
   exporting: {
    enabled: false
   },   
   series: [{
    name: showtype,
    data: (function() {
     var data = [],
      time = (new Date()).getTime(),
      i;
                    
     for (i = i1; i <i1+61&&i<a.length; i++) {
                       
      data.push({
      //载入数据
          x: t2[i],
       y: a[i]          
      });
     }
     return data;
    })()
   }]
  }); 
  chart = null;  
 }

然后再html中加入对应的按钮~~