G2-mobile - 带html辅助元素的折线图

             <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title>带html辅助元素的折线图</title>
<script src="https://a.alipayobjects.com/g/datavis/g2-mobile-all/2.1.22/index.js"></script>
      </head>
      <body>
          <div style="width:416px;height:218px;margin:0 auto">
              <canvas id="c1" style="width:416px;height:218px;"></canvas>
          </div>
 <script>
  //双精度
  GM.Global.pixelRatio = 2;
  var Util = GM.Util;
  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": 20, "city": "beijing"},
    {"time": '2016-08-09 00:35:00', "tem": 26, "city": "beijing"},
    {"time": '2016-08-09 01:00:00', "tem": 20, "city": "beijing"},
    {"time": '2016-08-09 01:20:00', "tem": 26, "city": "beijing"},
    {"time": '2016-08-10 01:40:00', "tem": 28, "city": "beijing"},
    {"time": '2016-08-10 02:00:00', "tem": 20, "city": "beijing"},
    {"time": '2016-08-10 02:20:00', "tem": 28, "city": "beijing"},
    {"time": '2016-08-09 00:35:00', "tem": 25.8, "city": "tokyo"},
    {"time": '2016-08-09 01:00:00', "tem": 24, "city": "tokyo"},
    {"time": '2016-08-09 01:20:00', "tem": 28, "city": "tokyo"},
    {"time": '2016-08-10 01:40:00', "tem": 22, "city": "tokyo"},
    {"time": '2016-08-10 02:00:00', "tem": 24, "city": "tokyo"},
    {"time": '2016-08-10 02:20:00', "tem": 20, "city": "tokyo"}
  ];

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

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

  chart.axis('tem', {
      label: {
          textAlign: 'start',
          textBaseline: 'bottom',
          offset: 0,
          fontSize: 14
      }
  });

  var label = {
    fill: '#979797',
    font: '14px san-serif',
    offset: 6
  };
  chart.axis('time', {
      label: function (text, index, total) {
          var cfg = Util.mix({}, label);
          // 第一个点左对齐，最后一个点右对齐，其余居中，只有一个点时左对齐
          if (index === 0) {
            cfg.textAlign = 'start';
          }
          if (index > 0 && index === total - 1) {
            cfg.textAlign = 'end';
          }
          return cfg;
      }
  });


  // 坐标点
  var changePoint = ['2016-08-09 00:35:00',25.8];
  var endPoint = ['2016-08-10 02:20:00',28];

  //html字符串
  var pointHtml1 = "<div style='border-radius: 12px;border: none;width: 22px;height: 22px;background-color: rgba(102, 182, 241, 0.5);'></div>";
  var pointHtml2 = "<div style='border-radius: 7px;border: none;width: 12px;height: 12px;background-color: rgb(15, 141, 232);'></div>";
  var tooltipHtml = "<div style='border: 1px solid #0f8de8;width: 34px;height: 34px;color: #0f8de8;position: relative;'>" +
      "<span>方案调整</span>" +
      "<div style='width: 0;height: 0;border-bottom: 8px solid #0f8de8;border-right:10px solid transparent;position: absolute;top: 25px;left: 34px;'></div>" +
  "</div>";
  var changePointHtml = "<div style='border-radius: 8px;border: none;width: 6px;height: 6px;background-color: #0f8de8;'></div>"

  chart.source(data, defs);
  chart.guide().html(endPoint, pointHtml1, {align:'cc'});
  chart.guide().html(endPoint, pointHtml2, {align:'cc'});
  chart.guide().html(changePoint, tooltipHtml, {align:'br', offset:[-17,0]});
  chart.guide().html(changePoint, changePointHtml, {align:'cc'});

  // 生成渐变色
  var x1 = 0, x2 = 0, y1 = 0, y2 = 200;
  var canvas = document.getElementById('c1');
  var linear_gradient = canvas.getContext('2d').createLinearGradient(x1, y1, x2, y2);
  linear_gradient.addColorStop(0.5, '#fff');
  linear_gradient.addColorStop(0, 'rgb(15, 141, 232)');

  // 绘制渐变色区域图
  chart.area().position('time*tem').color('city',function(city){
    if(city === 'beijing'){
      return linear_gradient;
    }else{
      return 'rgba(1, 1, 1, 0)';
    }
  }).style({
         opacity: 0.6
      });
  // 绘制线图
  chart.line().position('time*tem').color('city').size('city',function(city){
    if(city === 'beijing'){
      return 3;
    }else{
      return 2;
    }
  });

  chart.render();

</script>

      </body>
    </html>
          
        
带html辅助元素的折线图