我正在尝试使用JS,HTML和CSS制作这样的图表:
它必须包含所有标签,颜色并从0%开始。该值基于测验中的用户得分%。当用户获得5/10点时,该值为50%。如果用户获得-5/10点,则值为-50%。
这段代码是我的最后一个想法,但负值没有显示,并且它没有从0%开始(中心div)。它也改变了宽度,因此中心div不在中心。
if (successRate > 0) {
plus.style.width = (successRate / 100) * 300 + "px";
minus.style.display = "hidden";
} else if (successRate < 0) {
minus.style.width = (successRate / 100) * 300 + "px";
plus.style.display = "hiden";
}
#chart {
display: table;
border: 1px solid black;
}
#chart>* {
height: 30px;
}
#left {
height: 29px;
background: red;
display: table-cell;
}
#center {
max-width: 1px !important;
background: #000;
display: table-cell;
}
#right {
height: 29px;
background: green;
display: table-cell;
}
#container {
width: 600px;
border: 1px solid black;
}
<section id="chart">
<div id="container">
<div id="left"> </div>
<div id="center"> </div>
<div id="right"> </div>
</div>
</section>
答案 0 :(得分:3)
注意:在实际使用中,您需要更改两件事 javascript使其适用于您的实现。
- 首先:
var successRate = document.getElementById("rate").value;
我们使用此值给出值 文本输入,但无论如何你都可以将你的值传递给successRate 欲望。- 第二个:您可以在代码中更改设置为10的maxRate(然后使用介于-10和10之间的值)到您想要的任何值 它将计算进度条方面的百分比宽度 达到那个价值。 就是这样!
您可以使用以下实现,对于不同的值,它很简单但有效。
现在javascript是如何工作的?
我们在文本框中获取费率并将其保存在successRate
中,我们使用bar
作为变量来操纵进度条 < / em>的
我们已为此10设置了最大标记,最大可以更改以使其更加灵活。
然后,使用if / else条件,我们可以比较输入的值是正数还是负数。如果正面或负面,我们已经制定了一个公式来增加该方向的宽度。
我们正在使用var prograte = (100*Math.abs(successRate))/(2*maxrate);
来计算进度条的宽度(abs方法,因为成功是负面的)。
例如,如果得分是10/10,则 10是成功率, 10是最大值 率即可。使用公式:
prograte = (100*successRate)/(2*maxrate)
我们得到,prograte = 100 * 10/2 * 10 = 50%,从而得到距离中心50%的宽度。如果得分是2/10我们获得, 100 * 2/2 * 10 =宽度的10%。
successrate > 0
时,我们从中心向右开始。因此,我们将左移至50%。
使用上面计算的forward值,我们 将bar 的宽度增加到将颜色更改为绿色。
但是当successrate < 0
(即其他条件我们乘以-1得到宽度的绝对值)然后,我们计算我们还有多远必须使用我们计算的(50% - prograte)
从左侧移动,将其放在中心栏的右侧。
例如,如果得分是-5/10,则 -5是成功率, 10是最大值 率即可。使用公式:
prograte = (100*successRate*(-1))/(2*maxrate)
我们获得,prograte = 100 * 5/2 * 10 = 25%并且使用(50%-prograte)我们获得25%。因此,我们转移到
25% from the left
并设置width to 25%
,使其看起来像在中心向后减少。
要显示标志!= 1 (确定是否已超过该值的限制)时的百分比,我们会使用:
var percent = document.getElementById("percent");
percent.style.left = "percentage %";
percent.style.color = "color";
percent.innerHTML = prograte * 2 + "%";
function changerate() {
var successRate = document.getElementById("rate").value;
var bar = document.getElementById("bar");
var flag = 0;
var percent = document.getElementById("percent");
var maxrate = 10;
var prograte = (100 * Math.abs(successRate)) / (2 * maxrate);
if (successRate >= 0 && successRate <= maxrate) {
bar.style.left = "50%";
bar.style.background = "green";
bar.style.width = prograte + "%";
} else if (successRate < 0 && (-1 * maxrate) <= successRate) {
bar.style.background = "red";
bar.style.width = prograte + "%";
bar.style.left = (50 - prograte) + "%";
} else {
alert("Limit crossed");
bar.style.left = "50%";
bar.style.width = "0%";
flag = 1;
}
if (flag != 1) {
if (successRate > 0) {
percent.style.left = 50 + prograte + "%";
percent.style.color = "green";
} else {
percent.style.left = 50 - prograte + "%";
percent.style.color = "red";
}
percent.innerHTML = prograte * 2 + "%";
} else {
percent.style.left = prograte + "%";
percent.innerHTML = "";
}
}
#chart {
width: 500px;
position: relative;
}
#container {
height: 29px;
border: 2px solid black;
position: relative;
}
#percent {
height: 30px;
position: absolute;
top: 35px;
left: 50%;
font-weight:bold;
transition: all 0.5s ease-in-out;
}
#bar {
height: 100%;
background: red;
z-index: 1;
position: absolute;
top: 0;
left: 50%;
width: 0px;
transition: all 0.5s ease-in-out;
}
#center {
height: 100%;
max-width: 2px !important;
background: #000;
position: absolute;
left: 50%;
top: 0;
transform: translate(-50%);
z-index: 2;
}
Current max value : (10 which can be modified in javascript in maxrate)
<br><br> Input values between -10 and 10 : <br>
<input type="text" id="rate" />
<input type="button" value="update" onclick="changerate()" />
<section id="chart">
<div id="container">
<div id="bar"></div>
<div id="center"> </div>
</div>
<div id="percent"></div>
</section>
答案 1 :(得分:0)
我的解决方案当然可以改进如下:
创建两个容器DIV,每个容器包含一个子DIV:
<div class="container" id="c1">
<div class="bar" id="contra">
</div>
</div>
<div class="container" id="c2">
<div class="bar" id="pro">
</div>
</div>
为他们分配基本的CSS属性,例如定位和边框:
.container {
background-color: transparent;
height: 50px;
width: 200px;
}
#c1 {
top: 0px;
left: 0px;
position: absolute;
border: 3px solid;
}
#c2 {
top: 0px;
left: 200px;
position: absolute;
border: 3px solid;
}
#pro {
top: 0px;
left: 0px;
position: absolute;
background-color: green;
width: 30px;
height: 30px;
z-index: -9999;
}
#contra {
top: 0px;
left: 50px;
position: absolute;
background-color: red;
width: 150px;
height: 30px;
z-index: -9999;
}
现在,您已经拥有HTML / CSS所需的一切。您有两个DIV用作容器,并提供图像中显示的黑色边框。在这些容器中还有两个条形,每个条形代表您想要显示的百分比。
显然,它们永远不会像我的demo-CSS-properties一样显示。只要没有发生任何事情,它们应该没有宽度或者是不可见的,当然bar-DIV也不会同时具有高于零的宽度。
无论如何,动态部分来自JavaScript:
var proBar = document.getElementById('pro');
var contraBar = document.getElementById('contra');
// ... do your quiz stuff and get the percentage from there
// ... calculate from the max-width of your container the position and
width of the respective bar
var result = 70; // <-- your calculations go here
proBar.setAttribute("style","width:" + result + "px")
console.log("Done.");
这里的酒吧是你想要的动态。因此,您可以在CSS属性中将其宽度设置为零,并动态分配宽度和位置。
例如,您的容器有一个宽度,现在是子栏的最大宽度。您从myour测验中获得正或负百分比值,然后根据最大宽度的百分比计算条应具有的宽度。示例:您的最大宽度为200px,因为这是容器-DIV的宽度。你从测验中得到的百分比是50%。因此,pro bar的宽度为100px,对手条的宽度为零,因为百分比值大于零。
对于反对杆,您还必须计算左侧位置,而不仅仅是宽度。您可以从上面描述的百分比中获取宽度,然后可以通过从最大宽度减去计算的宽度来描述左边的值。
您可以弄清楚如何操作以及如何计算百分比。这很简单,但这显然是一项任务,你应该自己做一些工作。
你可以看到&#34; pro&#34;通过更改结果的值。所有这些应该足以解决您遇到的问题。完成后请提供一些反馈。
var proBar = document.getElementById('pro');
var contraBar = document.getElementById('contra');
// ... do your quiz stuff and get the percentage from there
// ... calculate from the max-width of your container the position and width of the respective bar
var result = 70; // <-- your calculations go here
proBar.setAttribute("style","width:" + result + "px")
console.log("Done.");
&#13;
.container {
background-color: transparent;
height: 50px;
width: 200px;
}
#c1 {
top: 0px;
left: 0px;
position: absolute;
border: 3px solid;
}
#c2 {
top: 0px;
left: 200px;
position: absolute;
border: 3px solid;
}
#pro {
top: 0px;
left: 0px;
position: absolute;
background-color: green;
width: 30px;
height: 50px;
z-index: -9999;
}
#contra {
top: 0px;
left: 50px;
position: absolute;
background-color: red;
width: 150px;
height: 50px;
z-index: -9999;
}
&#13;
<div class="container" id="c1">
<div class="bar" id="contra">
</div>
</div>
<div class="container" id="c2">
<div class="bar" id="pro">
</div>
</div>
&#13;
答案 2 :(得分:0)
另一种元素较少的变体。
function calculate(input) {
var chart = document.getElementById('chart');
var bar = document.getElementById('bar');
var width = Math.abs(input.value) * (chart.clientWidth / 2) / 10;
bar.style.width = width + 'px';
if (input.value >= 0) {
bar.style.left = chart.clientWidth / 2 + 'px';
bar.style.background = 'green';
} else if (input.value < 0) {
bar.style.left = chart.clientWidth / 2 - width + 'px';
bar.style.background = 'red';
}
}
&#13;
#chart {
border: 1px solid black;
height: 30px;
margin-top: 10px;
overflow: hidden;
position: relative;
}
#chart:after {
border-right: 1px solid black;
content: '';
display: block;
height: 30px;
left: 50%;
position: absolute;
top: 0;
}
#bar {
height: 30px;
position: absolute;
top: 0;
}
&#13;
<input type="number" value="0" min="-10" max="10" onchange="calculate(this)">
<section id="chart">
<div id="bar"></div>
</section>
&#13;