G2 - The Grammar Of Graphics

线图 / 折线图

源码

<!DOCTYPE html>
                                    <html>

<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 Util = GM.Util;
  var data = [
    {"time": '2016-08-08 00:00:00',"tem": 10},
    {"time": '2016-08-08 00:10:00',"tem": 22},
    {"time": '2016-08-08 00:30:00',"tem": 20},
    {"time": '2016-08-09 00:35:00',"tem": 26},
    {"time": '2016-08-09 01:00:00',"tem": 20},
    {"time": '2016-08-09 01:20:00',"tem": 26},
    {"time": '2016-08-10 01:40:00',"tem": 28},
    {"time": '2016-08-10 02:00:00',"tem": 20},
    {"time": '2016-08-10 02:20:00',"tem": 28}
  ];

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

var defs = {
    time: {
      type: 'timeCat',
      mask: 'mm／dd',
      tickCount: 3,
      range:[0,1]
    },
    tem: {
      tickCount: 5,
      min: 0
    }
  };

//配置刻度文字大小，供PC端显示用(移动端可以使用默认值20px)
  chart.axis('tem', {
      label: {
          fontSize: 14
      }
  });
  chart.axis('time', {
      label: {
          fontSize: 14
      }
  });

chart.source(data, defs);
  chart.line().position('time*tem');
  chart.render();

</script>

</body>

</html>

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

var defs = {
    time: {
      type: 'timeCat',
      mask: 'mm／dd',
      tickCount: 3,
      range:[0,1]
    },
    tem: {
      tickCount: 5,
      min: 0
    }
  };

chart.source(data, defs);
  chart.line().position('time*tem');
  chart.render();

</script>