加载中...

多个折线


调试运行

<!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 now = new Date(),
          start = new Date(now.getFullYear(),now.getMonth(),now.getDate(),0,0,0),
          end = new Date(now.getFullYear(),now.getMonth(),now.getDate() + 1,0,0,0);
        var interval = 60 * 1000,//1分钟
          ticks = []; 
 
        for(var i = 0;i <= 24;i++ ){
          ticks.push(new Date(now.getFullYear(),now.getMonth(),now.getDate(),i,0,0).getTime());
        }
 
        var chart = new AChart({
          theme : AChart.Theme.SmoothBase,
          id : 'canvas',
          width : 950,
          height : 500,
          xAxis : {
            type : 'time',
            labels : {
              renderer : function(text){
                var arr = text.split(':');
                return arr[0] + '时';
              }
            },
            formatter : function(value){
              var date = new Date(value);
              return date.getHours() + ':' + date.getMinutes() + ':' + date.getSeconds();
            },
            ticks : ticks,
            tickOffset : 10
          },
          tooltip : {
            shared : true,
            crosshairs : true
          },
          seriesOptions : {
            lineCfg : { 
              animate : false,
              pointStart : start.getTime(),
              pointInterval : interval,
              line : {
                'stroke-width' : 0.5
              },
              lineActived : {
                'stroke-width' : 0.5
              },
              markers : {
                single : true
              }//不显示marker,数据量大时,动画非常卡顿
            }
          },
          series : [ {
              name: 'New York',        
              //type : 'column',
              data: getData()
          },{
              name: 'beijing',        
              data: getData() 
          }]
        });
        
        
        function getData(){
          var data = [],                                                  
              i,pre;                                                        
                                                                          
          for (i = start.getTime(); i <= now.getTime(); i = i + interval) {   
            var value = getRandom(pre)                                 
            data.push(value);
            pre = value;                                                         
          }                                                               
          return data; 
        }
        function getRandom(pre){
          var r = Math.random(),
            factor = r > 0.45 ? 1 : -1;
          pre = pre || 100;
          return pre + Math.random() * 0.5 * factor;
        }
 
        chart.render();
 
        var series = chart.getSeries()[0],
            series1 = chart.getSeries()[1]; 
 
                                   
          setInterval(function() {                                    
              add();  //模拟异步请求
                                  
          }, interval);
 
 
          function add(){
            var data = series.get('data'),   
              y = getRandom(data[data.length-1]);  
              
            series.addPoint(y,false,false);  //第一个不重绘
 
            var data = series1.get('data'),   
              y = getRandom(data[data.length-1]);  
              
            series1.addPoint(y,false,true);
          }/**/
      </script>
 
 
</body>
</html>

还没有评论.