<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,height=device-height">
<title>g2曲线图 每条曲线有单独的选中效果和tooltip</title>
<style>
::-webkit-scrollbar {
display: none;
}
html,
body {
overflow: hidden;
height: 100%;
margin: 0;
}
.m-cf-lines {
margin: 100px 390px 0 420px;
height: 100px;
}
</style>
</head>
<body>
<div id="m-cf-lines" class="m-cf-lines"></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.2/dist/g2.min.js"></script>
<script src="https://gw.alipayobjects.com/os/antv/assets/lib/jquery-3.2.1.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 = [];
let country = ['a', 'b', 'c', 'd'];
for (var i = 0; i < 12; i++) {
for (let j = 0; j < 4; j++) {
var temp = {};
temp.name = '资产名称' + i + j;
temp.time = j;
temp.country = country[i % 4] + i;
if (j === 0) {
temp.value = Math.floor(Math.random() * 20 + 20 * ( 3 - i % 4));
} else {
temp.value = Math.floor(Math.random() * 50 + 20);
}
data.push(temp);
}
}
var valueMap = {};
var chart = new G2.Chart({
container: 'm-cf-lines',
forceFit: true,
padding: [5],
window.innerWidth - 810,
height: 100,
animate: false
});
chart.source(data);
chart.legend(false);
chart.axis('value', {
label: null
});
chart.axis('time', {
label:null,
tickLine: null
});
var color = ['#825738', '#60714B', '#41677F', '#4A4168'];
chart.line().position('time*value').size(2).color('country', (type) => { // 通过回调函数
if (type.indexOf('a') >=0 ) {
return color[0];
}
if (type.indexOf('b') >=0 ) {
return color[1];
}
if (type.indexOf('c') >=0 ) {
return color[2];
}
if (type.indexOf('d') >=0 ) {
return color[3];
}
return 'blue';
}).shape('smooth');
chart.tooltip(false);
chart.render();
let tooltipHtml = `<div class="m-tooltip" id="m-cf-tooltip" style="position: absolute; visibility: hidden; z-index: 8; transition: visibility 0.2s cubic-bezier(0.23, 1, 0.32, 1), left 0.4s cubic-bezier(0.23, 1, 0.32, 1), top 0.4s cubic-bezier(0.23, 1, 0.32, 1); background-color: rgba(255, 255, 255, 0.9); box-shadow: rgb(174, 174, 174) 0px 0px 10px; border-radius: 3px; color: rgb(87, 87, 87); font-size: 12px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", SimSun, sans-serif; line-height: 20px; padding: 10px 10px 6px;"></div>`;
$('#m-cf-lines div').append(tooltipHtml);
chart.on('line:mousemove', ev => {
let name = ev.data[0]._origin.name;
let attack = ev.data[1]._origin.value;
let bug = ev.data[2]._origin.value;
let risk = ev.data[3]._origin.value;
let text = name + '攻击面:' + attack + '漏洞:' + bug + '风险:' + risk;
console.log(text);
setTimeout(() => {
$('#m-cf-tooltip').css({visibility: 'visible',left: ev.x + 10, top: ev.y + 10}).show().html(text);
}, 0);
ev.target._attrs.lineWidth = 5;
var color = ['#DB8548', '#98B96D', '#5AA8D8', '#373781'];
let activeColor;
let type = ev.data[0]._origin.country;
if (type.indexOf('a') >=0 ) {
activeColor = color[0];
}
if (type.indexOf('b') >=0 ) {
activeColor = color[1];
}
if (type.indexOf('c') >=0 ) {
activeColor = color[2];
}
if (type.indexOf('d') >=0 ) {
activeColor = color[3];
}
ev.target._attrs.stroke = activeColor;
ev.target._attrs.strokeStyle = activeColor;
});
chart.on('line:mouseleave', ev => {
chart.render();
setTimeout(() => {
$('#m-cf-tooltip').hide();
}, 0);
});
</script>
</body>
</html>