<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,height=device-height">
<title>折线图tooltip固定位置</title>
<style>
::-webkit-scrollbar {
display: none;
}
html,
body {
overflow: hidden;
height: 100%;
margin: 0;
}
.m-many-lines {
margin: 10px 0 0 10px;
160px;
height: 22px;
}
.m-traffic-tooltip{padding: 0!important;}
.m-traffic-tooltip-inner{}
.m-tooltip-hide{display: none;}
</style>
</head>
<body>
<div>
<div class="js-tooltip"></div>
<div id="m-line1" class="m-many-lines"></div>
</div>
<script>
/*Fixing iframe window.innerHeight 0 issue in Safari*/
document.body.clientHeight;
</script>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.g2-3.3.1/dist/g2.min.js"></script>
<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.data-set-0.9.6/dist/data-set.min.js"></script>
<script>
var data = [];
for (var i = 0; i < 12; i++) {
var temp = {};
temp.time = i;
temp.num = parseInt(Math.random() * 50) + 20;
data.push(temp);
}
var ds = new DataSet();
var dv = ds.createView().source(data);
var chart = new G2.Chart({
container: 'm-line1',
forceFit: true,
padding: [5, -10, 5, 5],
160,
height: 36
});
chart.source(dv, {
time: {
range: [0, 1]
},
num: {
min: 0
}
});
chart.axis('num', {
label: null
});
chart.axis('time', {
label:null,
tickLine: null
});
chart.tooltip({
crosshairs: {
type: 'y'
},
containerTpl: '<div class="m-tooltip-hide">' +
'<ul class="g2-tooltip-list m-tooltip-inner"></ul></div>',
});
chart.line().position('time*num').color('num', '#5AA8D8').opacity(0.5)
.shape('smooth')
.size(1);
chart.on('tooltip:change', (ev) => {
const num = ev.items[0].value;
setTimeout( () => {
$('.js-tooltip').text(num);
}, 0)
});
chart.render();
</script>
</body>
</html>