Javascript 如何动态对齐图例元素？ 问题:

如何将记号和文本标签与颜色渐变对齐，以便图例容器展开以包含这些元素

笔记

• 颜色渐变、刻度和标签必须在JS中动态创建
• 标签的宽度会有所不同，因此图例容器必须相应地展开
• 我不能使用JQuery
• 我不是javascript/html/css开发人员，所以很高兴听到其他方法

HTML 工作演示

相关的

---

我正在尝试适应

我将你的记号包装在一个

父div

标签上，并在其中附加记号。 将当前JavaScript代码替换为以下代码。我想你想要这样的东西

JavaScript

var legend = document.getElementById("legend");

var divColours = document.createElement('div');
var jsColours = ["#440154", "#443A83", "#31688E", "#21908C", "#35B779", "#8FD744", "#FDE725"];
var colours = '(' + jsColours.join() + ')';

style = 'height: ' + jsColours.length * 20 + 'px; width: 10px; ';
style += 'background: ' + jsColours[1] + ';';
style += 'background: -webkit-linear-gradient' + colours + ';'
style += 'background: -o-linear-gradient' + colours + ';'
style += 'background: -moz-linear-gradient' + colours + ';'
style += 'background: linear-gradient' + colours + ';'

divColours.setAttribute('style', style);
legend.appendChild(divColours);

var divTicksParent = document.createElement('div');
divTicksParent.style.position = "absolute";
divTicksParent.style.width = "200px";
divTicksParent.style.top = "28px";

legend.appendChild(divTicksParent);

for (var i = 0; i < 7; i++) {
  var left = 10;
  var top = (i * 23) + (1);
  var tick = 'position: absolute; top: ' + top + 'px; left: ' + left + 'px; width: 6px; height: 1px; background: #b8b9ba;';
  var tickVal = 'position: absolute; top: ' + (top - 6) + 'px; left: ' + (left + 12) + 'px; color: #b8b9ba; font-size: 12px;';

  var divTicks = document.createElement('div');
  var divVal = document.createElement('div');

  divTicks.setAttribute('style', tick);
  divVal.setAttribute('style', tickVal);
  divVal.innerHTML = ' this is a variable ' + i;

  divTicksParent.appendChild(divTicks);
  divTicksParent.appendChild(divVal);
}

---

我把你的记号包在一个

父div

标签上，并在里面附加记号。 将当前JavaScript代码替换为以下代码。我想你想要这样的东西

JavaScript

var legend = document.getElementById("legend");

var divColours = document.createElement('div');
var jsColours = ["#440154", "#443A83", "#31688E", "#21908C", "#35B779", "#8FD744", "#FDE725"];
var colours = '(' + jsColours.join() + ')';

style = 'height: ' + jsColours.length * 20 + 'px; width: 10px; ';
style += 'background: ' + jsColours[1] + ';';
style += 'background: -webkit-linear-gradient' + colours + ';'
style += 'background: -o-linear-gradient' + colours + ';'
style += 'background: -moz-linear-gradient' + colours + ';'
style += 'background: linear-gradient' + colours + ';'

divColours.setAttribute('style', style);
legend.appendChild(divColours);

var divTicksParent = document.createElement('div');
divTicksParent.style.position = "absolute";
divTicksParent.style.width = "200px";
divTicksParent.style.top = "28px";

legend.appendChild(divTicksParent);

for (var i = 0; i < 7; i++) {
  var left = 10;
  var top = (i * 23) + (1);
  var tick = 'position: absolute; top: ' + top + 'px; left: ' + left + 'px; width: 6px; height: 1px; background: #b8b9ba;';
  var tickVal = 'position: absolute; top: ' + (top - 6) + 'px; left: ' + (left + 12) + 'px; color: #b8b9ba; font-size: 12px;';

  var divTicks = document.createElement('div');
  var divVal = document.createElement('div');

  divTicks.setAttribute('style', tick);
  divVal.setAttribute('style', tickVal);
  divVal.innerHTML = ' this is a variable ' + i;

  divTicksParent.appendChild(divTicks);
  divTicksParent.appendChild(divVal);
}

#传奇{
字体系列：Arial，无衬线；
背景：#fff；
填充：10px；
利润率：10px；
边框：1px实心#b8b8；
边界半径：4px；
显示：内联flex；
}
函数myFunc（）{
var图例=document.getElementById（“图例”）；
var divcolors=document.createElement（'div'）；
var JSCOLORS=[“#440154”、“#443A83”、“#31688E”、“#21908C”、“35B779”、“#8FD744”、“#FDE725”]；
var colors='（'+jscolors.join（）+'）；
样式='高度：'+jscolors.length*20+'px；宽度：10px；'；
样式+='背景：'+JSCOLORS[1]+'；'；
样式+='背景：-webkit线性渐变'+颜色+'；'
样式+='背景：-o-线性渐变'+颜色+'；'
样式+='背景：-moz线性渐变'+颜色+'；'
样式+='背景：线性渐变'+颜色+'；'
divcolors.setAttribute（'style'，style）；
图例.appendChild（divcolors）；
var divTicksParent=document.createElement（'div'）；
divTicksParent.style.position=“相对”；
divTicksParent.style.width=“170px”；
图例.appendChild（divTicksParent）；
对于（变量i=0；i<7；i++）{
左向量=20；
var-top=（i*23）+（1）；
变量勾选='位置：绝对；顶部：'+top+'px；左侧：'+left+'px；宽度：8px；高度：1px；背景：#b8b9ba；'；
var tickVal='位置：绝对；顶部：'+（顶部-8）+'像素；左侧：'+（左侧+15）+'像素；背景：红色；颜色：#b8b9ba；'；
var divTicks=document.createElement（'div'）；
var divVal=document.createElement（'div'）；
setAttribute（'style'，勾号）；
setAttribute（'style'，tickVal）；
divVal.innerHTML='这是一个变量'+i；
divTicksParent.appendChild（divTicks）；
divTicksParent.appendChild（divVal）；
}
};

检查

#传奇{
字体系列：Arial，无衬线；
背景：#fff；
填充：10px；
利润率：10px；
边框：1px实心#b8b8；
边界半径：4px；
显示：内联flex；
}
函数myFunc（）{
var图例=document.getElementById（“图例”）；
var divcolors=document.createElement（'div'）；
var JSCOLORS=[“#440154”、“#443A83”、“#31688E”、“#21908C”、“35B779”、“#8FD744”、“#FDE725”]；
var colors='（'+jscolors.join（）+'）；
样式='高度：'+jscolors.length*20+'px；宽度：10px；'；
样式+='背景：'+JSCOLORS[1]+'；'；
样式+='背景：-webkit线性渐变'+颜色+'；'
样式+='背景：-o-线性渐变'+颜色+'；'
样式+='背景：-moz线性渐变'+颜色+'；'
样式+='背景：线性渐变'+颜色+'；'
divcolors.setAttribute（'style'，style）；
图例.appendChild（divcolors）；
var divTicksParent=document.createElement（'div'）；
divTicksParent.style.position=“相对”；
divTicksParent.style.width=“170px”；
图例.appendChild（divTicksParent）；
对于（变量i=0；i<7；i++）{
左向量=20；
var-top=（i*23）+（1）；
变量勾选='位置：绝对；顶部：'+top+'px；左侧：'+left+'px；宽度：8px；高度：1px；背景：#b8b9ba；'；
var tickVal='位置：绝对；顶部：'+（顶部-8）+'像素；左侧：'+（左侧+15）+'像素；背景：红色；颜色：#b8b9ba；'；
var divTicks=document.createElement（'div'）；
var divVal=document.createElement（'div'）；
setAttribute（'style'，勾号）；
setAttribute（'style'，tickVal）；
divVal.innerHTML='这是一个变量'+i；
divTicksParent.appendChild（divTicks）；
divTicksParent.appendChild（divVal）；
}
};

---

检查

其他解决方案没有完全回答我关于根据内容自动调整宽度的问题

我想这解决了我的问题

Javascript

---

其他解决方案没有完全回答我关于根据内容自动调整宽度的问题

我想这解决了我的问题

Javascript

---

非常接近：如果可能的话，我希望勾号和文本也在

#图例

区域内（如果需要，高度和字体大小可以更改）？我更新了答案。现在检查一下。您可以通过调整

css

属性来定制所需的外观。谢谢-不过，我还更新了问题的“注释”部分-标签文本宽度会有所不同，因此，图例容器必须动态扩展到非常近的位置：如果可能的话，我希望记号和文本也位于

#legend

区域内（如果需要，高度和字体大小可以更改）？我更新了答案。现在检查一下。您可以通过调整

css

属性来定制所需的外观。谢谢-不过，我还更新了问题的“注释”部分-标签文本宽度会有所不同，因此图例容器必须扩展DynamicAllyTanks-但这仍然是难以编码的

#legend {
    font-family: Arial, sans-serif;
    background: #fff;
    padding: 10px;
    margin: 10px;
    border: 1px solid #b8b8b8; 
    border-radius: 4px;
    height: auto;
    display: inline-block;
}

var legend = document.getElementById("legend");

var divColours = document.createElement('div');
var jsColours = ["#440154", "#443A83", "#31688E", "#21908C", "#35B779", "#8FD744", "#FDE725"];
var colours = '(' + jsColours.join() + ')';

style = 'height: ' + jsColours.length * 20 + 'px; width: 10px; ';
style += 'background: ' + jsColours[1] + ';';
style += 'background: -webkit-linear-gradient' + colours + ';'
style += 'background: -o-linear-gradient' + colours + ';'
style += 'background: -moz-linear-gradient' + colours + ';'
style += 'background: linear-gradient' + colours + ';'

divColours.setAttribute('style', style);
legend.appendChild(divColours);

var divTicksParent = document.createElement('div');
divTicksParent.style.position = "absolute";
divTicksParent.style.width = "200px";
divTicksParent.style.top = "28px";

legend.appendChild(divTicksParent);

for (var i = 0; i < 7; i++) {
  var left = 10;
  var top = (i * 23) + (1);
  var tick = 'position: absolute; top: ' + top + 'px; left: ' + left + 'px; width: 6px; height: 1px; background: #b8b9ba;';
  var tickVal = 'position: absolute; top: ' + (top - 6) + 'px; left: ' + (left + 12) + 'px; color: #b8b9ba; font-size: 12px;';

  var divTicks = document.createElement('div');
  var divVal = document.createElement('div');

  divTicks.setAttribute('style', tick);
  divVal.setAttribute('style', tickVal);
  divVal.innerHTML = ' this is a variable ' + i;

  divTicksParent.appendChild(divTicks);
  divTicksParent.appendChild(divVal);
}

#legend {
  font-family: Arial, sans-serif;
  background: #fff;
  padding: 10px;
  margin: 10px;
  border: 1px solid #b8b8b8;
  border-radius: 4px;
  height: auto;
  width: 130px;
  display: inline-block;
}

<head>
<style>
#legend {
   font-family: Arial, sans-serif;
    background: #fff;
    padding: 10px;
    margin: 10px;
    border: 1px solid #b8b8b8; 
    border-radius: 4px;
    display:inline-flex;

}
</style>

</head>    
<body onload="myFunc()">
      <div id="legend"></div>
    <script>
    function myFunc(){
    var legend = document.getElementById("legend");
    var divColours = document.createElement('div');
    var jsColours = ["#440154", "#443A83", "#31688E", "#21908C", "#35B779", "#8FD744", "#FDE725"];
    var colours = '(' + jsColours.join() + ')';

    style = 'height: ' + jsColours.length * 20 + 'px; width: 10px; ';
    style += 'background: ' + jsColours[1] + ';';
    style += 'background: -webkit-linear-gradient' + colours + ';'
    style += 'background: -o-linear-gradient' + colours + ';'
    style += 'background: -moz-linear-gradient' + colours + ';'
    style += 'background: linear-gradient' + colours + ';'

    divColours.setAttribute('style', style);
    legend.appendChild(divColours);

    var divTicksParent = document.createElement('div');
    divTicksParent.style.position = "relative";
    divTicksParent.style.width = "170px";


    legend.appendChild(divTicksParent);

    for (var i = 0; i < 7; i++) {
      var left = 20;
      var top = (i * 23) + (1);
      var tick = 'position: absolute; top: ' + top + 'px; left: ' + left + 'px; width: 8px; height: 1px; background: #b8b9ba;';
      var tickVal = 'position: absolute; top: ' + (top - 8) + 'px; left: ' + (left + 15) + 'px; background: red; color: #b8b9ba;';

      var divTicks = document.createElement('div');
      var divVal = document.createElement('div');

      divTicks.setAttribute('style', tick);
      divVal.setAttribute('style', tickVal);
      divVal.innerHTML = ' this is a variable ' + i;

      divTicksParent.appendChild(divTicks);
      divTicksParent.appendChild(divVal);
    }
    };
    </script>
    </body>

var legend = document.getElementById("legend");

var tickContainer = document.createElement("div");
tickContainer.setAttribute('class', 'labelContainer');

var labelContainer = document.createElement("div");
labelContainer.setAttribute('class', 'labelContainer');

var legendColours = document.createElement('div');
var jsColours = ["#440154", "#443A83", "#31688E", "#21908C", "#35B779", "#8FD744", "#FDE725"];
var colours = '(' + jsColours.join() + ')';

style = 'display: inline-block; height: ' + jsColours.length * 20 + 'px; width: 10px;';
style += 'background: ' + jsColours[1] + ';';
style += 'background: -webkit-linear-gradient' + colours + ';'
style += 'background: -o-linear-gradient' + colours + ';'
style += 'background: -moz-linear-gradient' + colours + ';' 
style += 'background: linear-gradient' + colours + ';'

legendColours.setAttribute('style', style);
legend.appendChild(legendColours);

for (var i = 0; i < jsColours.length; i++) {
  var tickVal = 'text-align: center; color: #b8b9ba; font-size: 12px; height: 20px;';

  var divTicks = document.createElement('div');
  var divVal = document.createElement('div');

  divTicks.setAttribute('style', tickVal);
  divTicks.innerHTML = '-';
  tickContainer.appendChild(divTicks);

  divVal.setAttribute('style', tickVal);
  divVal.innerHTML = ' this is a variable ' + i;
  labelContainer.appendChild(divVal);
}

legend.appendChild(tickContainer);
legend.appendChild(labelContainer);

.legend {
  font-family: Arial, sans-serif;
  background: #fff;
  padding: 8px;
  margin: 8px;
  border: 1px solid #b8b8b8; 
  border-radius: 4px;
  display:inline-flex;
}

.labelContainer{
  border: 1px solid #00FF00;
  padding-left: 4px;
  height: auto;
  display: inline-block;
}