g2曲线图每条曲线有单独的选中效果和tooltip

<!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],
        width: 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, &quot;Segoe UI&quot;, Roboto, &quot;Helvetica Neue&quot;, Helvetica, &quot;PingFang SC&quot;, &quot;Hiragino Sans GB&quot;, &quot;Microsoft YaHei&quot;, 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>
g2曲线图 每条曲线有单独的选中效果和tooltip

猜你喜欢

g2曲线图每条曲线有单独的选中效果和tooltip
