如何制作这张图表

时间:2017-12-26 16:11:23

标签: javascript html css charts

我正在尝试使用JS,HTML和CSS制作这样的图表: chart

它必须包含所有标签,颜色并从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>

3 个答案:

答案 0 :(得分:3)

  

注意:在实际使用中,您需要更改两件事   javascript使其适用于您的实现。

     
      
  • 首先var successRate = document.getElementById("rate").value;我们使用此值给出值   文本输入,但无论如何你都可以将你的值传递给successRate   欲望。
  •   
  • 第二个:您可以在代码中更改设置为10的maxRate(然后使用介于-10和10之间的值)到您想要的任何值   它将计算进度条方面的百分比宽度   达到那个价值。   就是这样!
  •   

您可以使用以下实现,对于不同的值,它很简单但有效。

  • 我们正在使用中心 div, bar div,它将传播并更改颜色,具体取决于成功百分比容器,可动态显示条形下方的百分比。
  • 默认情况下,我们将中心div放在中心,绝对定位,栏位于左侧:50%,顶部:0 容器 >相对定位

现在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">&nbsp;</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;通过更改结果的值。所有这些应该足以解决您遇到的问题。完成后请提供一些反馈。

&#13;
&#13;
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;
&#13;
&#13;

答案 2 :(得分:0)

另一种元素较少的变体。

&#13;
&#13;
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;
&#13;
&#13;