G2-mobile 不提供 tooltip,但是提供了自定义辅助 html,支持在画布上的任何位置放置任何自定义的 html 文档。
图中折线结尾处的焦点是用自定义辅助 html 实现的,具体过程如下:
定义想要放置 html 的数据点:[xData, yData] 由数据源中的某个横轴数据 xData 和纵轴数据 yData 组成,支持使用关键字
min
和max
代表轴的最小值和最大值;定义希望显示的 html 字符串;
调用
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();