::-webkit-scrollbar {
display: none;
}
html,
body {
overflow: hidden;
height: 100%;
margin: 0;
}
.m-many-lines {
margin: 10px 0 0 10px;
width: 160px;
height: 22px;
}
.m-traffic-tooltip{padding: 0!important;}
.m-traffic-tooltip-inner{}
.m-tooltip-hide{display: none;}
/*Fixing iframe window.innerHeight 0 issue in Safari*/
document.body.clientHeight;
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],
width: 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: '
'
});
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();
推荐链接
发表评论