动态折线图

调试运行
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>图形展示</title>
</head>
<body>
 
<div class="detail-section">
    <div id="canvas">
 
    </div>
</div>
 
<script src="http://g.tbcdn.cn/bui/acharts/1.0.32/acharts-min.js"></script>
<!-- https://g.alicdn.com/bui/acharts/1.0.29/acharts-min.js -->
 
 
  <script type="text/javascript">
      var chart = new AChart({ 
          theme : AChart.Theme.SmoothBase,
          id : 'canvas',
          width : 950,
          height : 500,
          plotCfg : {
            margin : [50,50,50]
          },
          xAxis : {
            type : 'time',
            labels : {
              label : {
                'font-size': '10'
              }
            },
            formatter : function(value){
              var date = new Date(value);
              return date.getHours() + ':' + date.getMinutes() + ':' + date.getSeconds();
            },
            tickOffset : 10
          },
          yAxis : {
            min : 0
          },  
          tooltip : {
            valueSuffix : '°C'
          },
          legend : {
            align : 'right',
            layout : 'vertical',
            dy : -150,
            dx : -60
          },
          xTickCounts : [1,8],//设置x轴tick最小数目和最大数目 
          series : [ {
              name: 'New York',
              smooth : true,
              animate: false,
              data: (function() {                                                 
                  // generate an array of random data                             
                  var data = [],                                                  
                      time = Math.floor((new Date()).getTime()/1000) * 1000,                              
                      i;                                                          
                                                                                  
                  for (i = -19; i <= 0; i++) {                                    
                      data.push({                                                 
                          x: time + i * 1000,                                     
                          y: Math.random() + .25                                      
                      });                                                         
                  }                                                               
                  return data;                                                    
              })() 
          }]
        });
 
        chart.render();
 
          var series = chart.getSeries()[0]; 
 
                                   
          setInterval(function() {                                    
              add(); 
                                  
          }, 1000);
 
 
          function add(){
            var x = Math.floor((new Date()).getTime()/1000) * 1000, // current time         
                  y = Math.random() + 0.25;  
              
            series.addPoint([x, y],true,true); 
          }
      </script>
 
</body>
</html>