<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,height=device-height">
<title>g2基础柱状图</title>
<style>
::-webkit-scrollbar {
display: none;
}
html,
body {
background-color: rgba(41, 41, 41, 0.7);
overflow: hidden;
height: 100%;
margin: 0;
}
.m-bar {
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],
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>