Question

问题

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

注释

必须在JS
标签的宽度会有所不同，因此图例容器必须相应地展开
我不能使用JQuery
我不是javascript / html / css开发人员，很高兴听到其他方法

HTML

<div id="legend"></div>

的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);

for (var i = 0; i < 7; i++) {

  var left = 10 + 10 + 1; 
  var top = 10 + (i * 20);

  var tick = 'position: absolute; top: ' + top + 'px; left: ' + left + 'px; width: 3px; height: 1px; background: #b8b9ba;';
  var tickVal = 'position: absolute; top: ' + (top - 5) + 'px; left: ' + (left + 5) + '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;

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

CSS

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

工作演示

JSFiddle

相关

我正在尝试调整this answer

Answer 1

我将您的刻度线包裹在parent 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);
}

<强> CSS

#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;
}

Answer 2

<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>

检查the demo, I've updated

Answer 3

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

我认为这解决了我的问题

Updated fiddle

的Javascript

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);

CSS

.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;
}

如何动态对齐图例元素？

问题

注释

HTML

的Javascript

CSS

工作演示

相关

3 个答案:

的Javascript

CSS