1. 需求

最近项目在做一个关系图谱的展示，于是使用了cytoscape.js来画关系图谱，后面想到对不同节点设置不同的颜色好进行区分，于是需要放置一个颜色说明模块来对每个颜色进行说明，如下图。
在这里插入图片描述

2. 实现细节

完成这个功能需要有2个div，分别是：

用于cytoscape.js画板的div
用于放置颜色说明模块的div

下面展示对应的2个div的html代码（这里只展示需要展示的代码，其他省略）：

<!--用于放置颜色说明模块的div -->
<div class='my-legend'>
    <div class='legend-title'>Node Colors</div>
    <div class='legend-scale'>
        <ul class='legend-labels' id="legend">
            <li id="unclusteredLegend"><span style='background:#756D76;'></span>Unclustered
            </li>
            <li><span style='background:rgb(58, 196, 255);'></span>Cluster #: 0</li>
            <li><span style='background: rgb(173, 39, 126);'></span>Cluster #: 1</li>
            <li><span style='background: rgb(65, 57, 221);'></span>Cluster #: 2</li>
            <li><span style='background: rgb(213, 125, 186);'></span>Cluster #: 3</li>
            <li><span style='background: rgb(42, 14, 16);'></span>Cluster #: 4</li>
            <li><span style='background: rgb(138, 178, 60);'></span>Cluster #: 5</li>
            <li><span style='background: rgb(239, 156, 182);'></span>Cluster #: 6</li>
            <li><span style='background: rgb(141, 202, 164);'></span>Cluster #: 7</li>
            <li><span style='background: rgb(121, 38, 189);'></span>Cluster #: 8</li>
            <li><span style='background: rgb(177, 195, 149);'></span>Cluster #: 9</li>
        </ul>
    </div>
</div>
<!--用于cytoscape.js画板的div -->
<div id="cy" style="width: 100%;height:1000px;float: left;background-color: #f9f9f9;"></div>

下面是核心代码，通过CSS进行样式的控制

<style>
	/*主要是外层div的样式来决定悬浮在面板div上，通过position和z-index控制即可*/
    .my-legend {
        position: relative;
        z-index: 1;
    }
	/*下面是颜色样例部分的样式*/
    .my-legend .legend-title {
        position: absolute;
        top: 10px;
        right: 20px;
        margin-bottom: 5px;
        margin-right: 5px;
        font-weight: bold;
        font-size: 90%;
    }

    .my-legend .legend-scale ul {
        margin: 0;
        margin-right: 10px;
        padding: 0;
        position: absolute;
        top: 30px;
        right: 10px;
        list-style: none;
    }

    .my-legend .legend-scale ul li {
        font-size: 80%;
        list-style: none;
        margin-left: 0;
        line-height: 18px;
        margin-bottom: 2px;
    }

    .my-legend ul.legend-labels li span {
        display: inline-block;
        float: left;
        height: 16px;
        width: 30px;
        margin-right: 5px;
        margin-left: 0;
        border: 1px solid #999;
    }

    .my-legend a {
        color: #777;
    }
</style>