G2 - The Grammar Of Graphics

线图 / 带平铺动画的多类型线图

源码

<!DOCTYPE html>
                                    <html>

<head>
                                        <meta charset="utf-8">
                                        <title>带平铺动画的多类型线图</title>
                                        <link rel="stylesheet" href="https://os.alipayobjects.com/s/prod/g2/static/doc-b57e62881a0344ecde9e68c4ce312143.css"/>
                                        
                                        <script src="https://a.alipayobjects.com/jquery/jquery/1.11.1/jquery.js"></script>

<script src="https://a.alipayobjects.com/g/datavis/g2-mobile-all/2.1.7/index.js "></script>
                                    </head>

<body>
                                        <canvas id="c1" style="width:416px;height:218px;"></canvas>
                                        
                                        <script>
  GM.Global.pixelRatio = 2;
  var data = [
    {"time": '2016-08-08 00:00:00',"tem": 10,"city": "beijing"},
    {"time": '2016-08-08 00:10:00',"tem": 22, "city": "beijing"},
    {"time": '2016-08-08 00:30:00',"tem": 16, "city": "beijing"},
    {"time": '2016-08-09 00:35:00',"tem": 26, "city": "beijing"},
    {"time": '2016-08-09 01:00:00',"tem": 12, "city": "beijing"},
    {"time": '2016-08-09 01:20:00',"tem": 26, "city": "beijing"},
    {"time": '2016-08-10 01:40:00',"tem": 18, "city": "beijing"},
    {"time": '2016-08-10 02:00:00',"tem": 26, "city": "beijing"},
    {"time": '2016-08-10 02:20:00',"tem": 12, "city": "beijing"},
    {"time": '2016-08-08 00:00:00',"tem": 4, "city": "hangzhou"},
    {"time": '2016-08-08 00:10:00',"tem": 3, "city": "hangzhou"},
    {"time": '2016-08-08 00:30:00',"tem": 6, "city": "hangzhou"},
    {"time": '2016-08-09 00:35:00',"tem": -12, "city": "hangzhou"},
    {"time": '2016-08-09 01:00:00',"tem": 1, "city": "hangzhou"},
    {"time": '2016-08-09 01:20:00',"tem": 9, "city": "hangzhou"},
    {"time": '2016-08-10 01:40:00',"tem": 13, "city": "hangzhou"},
    {"time": '2016-08-10 02:00:00',"tem": -3, "city": "hangzhou"},
    {"time": '2016-08-10 02:20:00',"tem": 11, "city": "hangzhou"}
  ];

var chart = new GM.Chart({
    id: 'c1'
  });

chart.source(data, {
    time: {
      type: 'timeCat',
      tickCount: 3,
      mask: 'HH:MM',
      range:[0,1]
    },
    tem: {
      tickCount: 3,
      formatter: function(item) {
        return item + '%';
      }
    }
  });
  chart.axis('tem', {
    grid: function(text,index){
      if(text === '0%'){
        return {
          stroke: '#efefef'
        };
      }else{
        return {
          stroke: '#f7f7f7'
        };
      }
    },
    label: {
      fontSize: 14
    }
  });
  chart.axis('time', {
    line: null,
    label: {
      fontSize: 14
    }
  });

// 添加辅助元素
  var point = ['2016-08-10 02:20:00',12];
  chart.guide().html(point,"<div style='border-radius: 12px;border: none;width: 22px;height: 22px;background-color: rgba(102, 182, 241, 0.5);'></div>",{align:'cc'});
  chart.guide().html(point,"<div style='border-radius: 7px;border: none;width: 12px;height: 12px;background-color: rgb(15, 141, 232);'></div>",{align:'cc'});

chart.line().position('time*tem').color('city').size(3).shape('city', function(city) {
    if (city === 'beijing') {
      return 'line';
    }
    if (city === 'hangzhou') {
      return 'dash';
    }
  });
  // 水平方向的平铺动画
  chart.animate().waveh();

chart.render();
</script>

</body>

</html>

var chart = new GM.Chart({
    id: 'c1'
  });

chart.render();
</script>