javascript - 如何制作这张图表

Question

我正在尝试仅使用 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">&nbsp;</div>
    <div id="center">&nbsp;</div>
    <div id="right">&nbsp;</div>
  </div>
</section>

Answer 1

Note: In practical use, you need to change just two things in javascript to make it work for your implementation.

• First: var successRate = document.getElementById("rate").value; We're giving values using this text input, but you can pass your value to successRate in anyway you desire.
• Second: You can change the maxRate which is set to 10 in the code(then use values between -10 and 10) to whatever value you desire and it will compute the percentage width of the progress bar respect to that value. That's it!

您可以使用下面的实现，它对于不同的值来说既简单又有效。

• 我们正在使用一个center div，一个bar div，它将根据成功率传播和改变颜色 和一个 percent 容器，它动态显示栏下方的百分比。
• 默认情况下，我们将中心 div 定位在具有绝对定位的中心，将栏定位在 left:50% with top:0 相对于 container 具有 >相对定位。

现在 javascript 是如何工作的？

我们在文本框中获取汇率并将其保存在 successRate 中我们正在使用 bar作为变量来操纵进度条。

我们已经为这 10 个设置了最大分数，在 maxrate 中可以更改以使其灵活。

然后，使用 if/else 条件我们可以比较输入的值是正数还是负数。如果是正数或负数，我们已经制定了一个公式来增加该方向的宽度百分比。

我们正在使用 var prograte = (100*Math.abs(successRate))/(2*maxrate); 计算进度条的宽度(abs 方法以防成功率是负值)。

Eg, If score is 10/10 then 10 is the success rate and 10 is the max rate. Using the formula:

prograte = (100*successRate)/(2*maxrate)

We obtain, prograte = 100*10 / 2*10 = 50% thus giving it 50% width from the center. If score is 2/10 we obtain, 100*2/2*10 = 10% of the width.

当 successrate > 0 ，我们从右边的中心开始。因此，我们将左移到 50%。并使用上面计算的 forward 值，我们将条的宽度增加，并将颜色更改为绿色。

但是当successrate < 0 (即 else 条件我们将它乘以 -1 以获得宽度的绝对值)然后，我们计算我们必须从左边移动多远使用(50% - prograte)我们计算的结果，将其放在中心栏的右侧。

Eg, If score is -5/10 then -5 is the success rate and 10 is the max rate. Using the formula:

prograte = (100*successRate*(-1))/(2*maxrate)

We obtain, prograte = 100*5 / 2*10 = 25% and using (50%-prograte) we obtain 25%. So, we move to 25% from the left and set the width to 25% which makes it look like its in the center decreasing backwards.

要在 flag!=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">&nbsp;</div>
  </div>
  <div id="percent"></div>
</section>