G2-mobile 不提供 tooltip,但是提供了自定义辅助 html,支持在画布上的任何位置放置任何自定义的 html 文档。

图中折线结尾处的焦点是用自定义辅助 html 实现的,具体过程如下:

  1. 定义想要放置 html 的数据点:[xData, yData] 由数据源中的某个横轴数据 xData 和纵轴数据 yData 组成,支持使用关键字 minmax 代表轴的最小值和最大值;

  2. 定义希望显示的 html 字符串;

  3. 调用 chart.guide().html() 接口完成自定义 html 在画布上的放置,接口详见 guide API

完整代码:

//双精度
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"}
];
var chart = new GM.Chart({
  id: 'c1'
});
var defs = {
  time: {
    type: 'timeCat',
    mask: 'yyyy-mm-dd',
    tickCount: 3
  },
  tem: {
    tickCount: 3,
    min: 0
  }
};
chart.source(data, defs);

// 坐标点
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>";

// 辅助html
chart.guide().html(endPoint, pointHtml1, {align:'cc'});
chart.guide().html(endPoint, pointHtml2, {align:'cc'});

// 绘制线图
chart.line().position('time*tem');
chart.render();