带文本的静态条

Question

我想做一个条形图（见图）。我有3个值，当我想用文字显示时，我使用HTML和CSS，可以做到吗？

Answer 1

我不能和PrimeFaces说话，所以这里有一个使用纯HTML、CSS和Javascript的解决方案。

let value1 = document.getElementById("value1");
if (value1) { value1.style.width = 150 + "px" }

let value2 = document.getElementById("value2");
if (value2) { value2.style.width = 150 + "px" }

let maxi = document.getElementById("maxi");
if (maxi) { maxi.style.width = 150 + "px" }

.bar div { float:left; color:white; padding:1ex; margin:0;
           text-align:center; font-family:sans-serif; }
#value1  { background-color:#5b9bd5; }
#value2  { background-color:#70ad47; }
#maxi    { background-color:#a6a6a6; }

<div class="bar">
  <div id="value1">value1</div>
  <div id="value2">value2</div>
  <div id="maxi">maxi</div>
</div>

JS可能需要在项目加载后调用的函数中，如 <body onload='populate_widths()'>.

这将找到每个占位符并以编程方式分配其宽度。它假设每个宽度为150，你可以通过服务器端数据或在Javascript代码中更改。

上面的片段演示了如何使用Javascript来改变数值，但如果你有静态的服务器端数值，你可以直接通过CGI变量将宽度添加到元素中。style 属性。我不懂PrimeFaces或其他基于Java的服务器端代码，但产生的HTML会是这样的。

.bar div { float:left; color:white; padding:1ex; margin:0;
           text-align:center; font-family:sans-serif; }

<div class="bar">
  <div style="width:150px; background-color:#5b9bd5">value1</div>
  <div style="width:150px; background-color:#70ad47">value2</div>
  <div style="width:150px; background-color:#a6a6a6">maxi</div>
</div>

带文本的静态条

问题描述投票：0回答：1

1个回答

最新问题

带文本的静态条

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1