在cytoscape.js画板上放置颜色说明 （在div上放置一个div）

1. 需求

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

2. 实现细节

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

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

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

<div class='my-legend'>
    <div class='legend-title'>Node Colorsdiv>
    <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 #: 0li>
            <li><span style='background: rgb(173, 39, 126);'>span>Cluster #: 1li>
            <li><span style='background: rgb(65, 57, 221);'>span>Cluster #: 2li>
            <li><span style='background: rgb(213, 125, 186);'>span>Cluster #: 3li>
            <li><span style='background: rgb(42, 14, 16);'>span>Cluster #: 4li>
            <li><span style='background: rgb(138, 178, 60);'>span>Cluster #: 5li>
            <li><span style='background: rgb(239, 156, 182);'>span>Cluster #: 6li>
            <li><span style='background: rgb(141, 202, 164);'>span>Cluster #: 7li>
            <li><span style='background: rgb(121, 38, 189);'>span>Cluster #: 8li>
            <li><span style='background: rgb(177, 195, 149);'>span>Cluster #: 9li>
        ul>
    div>
div>

<div id="cy" style="width: 100%;height:1000px;float: left;background-color: #f9f9f9;">div>

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

3. 结果

主要出于保密原因只展示了部分，具体细节自行完成。