折线图tooltip固定位置

172 阅读1分钟

<!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;
        width: 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],
        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: '<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>