<! DOCTYPEhtml>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,height=device-height">
    <title>G2 Foundation bar chart</title>
    <style>
    ::-webkit-scrollbar {
        display: none;
    }

    html.body {
        background-color: rgba(41.41.41.0.7);
        overflow: hidden;
        height: 100%;
        margin: 0;
    }

    .m-bar {
        width: 160px;
        height: 50px;
    }

    .m-tooltip {
        background-color: rgba(0.0.0.0.7) ! important;
        padding: 6px 10px 6px ! important;
    }
    </style>
</head>

<body>
    <div id="m-bar1" class="m-bar"></div>
    <div id="m-bar2" class="m-bar"></div>
    <script>
    /*Fixing iframe window.innerHeight 0 issue in Safari*/
    document.body.clientHeight;
    </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 barData = [];
    for (let i = 0; i < 20; i++) {
        let temp = {};
        temp.time = i;
        temp.value = parseInt(Math.random() * 100);
        barData.push(temp);
    }
    for (let i = 0; i < 2; i++) {
        init(i + 1, barData);
    }

    function init(index, barData) {
        var chart = new G2.Chart({
            container: 'm-bar' + index,
            forceFit: true.padding: [0.5.0.5].width: 160.height: 50
        });
        chart.source(barData);
        chart.axis('value', {
            label: null.grid: null
        });
        chart.axis('time', {
            label: null.line: {
                stroke: '#4c4c4c'
            },
            Line: null.tickLine: null
        });
        chart.tooltip({
            crosshairs: {
                type: 'y'
            },
            containerTpl: '<div class="m-tooltip">' +
                '<ul class="g2-tooltip-list m-tooltip-inner"></ul></div>'.itemTpl: `<li>1</li>`
        })
        chart.interval().position('time*value').color('# 825738');
        chart.render();
    }
    </script>
</body>

</html>
Copy the code