Числа, которые приводят к более закругленным углам при построении графика в Javascript - PullRequest
Новая
       106

Числа, которые приводят к более закругленным углам при построении графика в Javascript

1 голос
/ 19 июня 2020

У меня есть for l oop, который возвращает десятичное число от 0 до 1. Я хотел бы сделать кривую, которая больше похожа на закругленный угол, чем сейчас. Я также хотел бы, чтобы он начинал нарастать только после 0.25. Я не совсем понимаю, как это сделать с помощью имеющейся у меня математики. Я использую Math.log и функцию линейного преобразования, но, возможно, мне нужно что-то большее, связанное с кривой параболи c. 

for (i = 1; i < 101; ++i) {
  var dec = i / 100
  if (dec >= 0.25) {
    console.log("dec = " + dec);
    var large = i * 100
    var log = Math.log(large);
    console.log("log = " + log);
    var linCon = applyLinearConversion(log, 2.8, 9.2104, -2.7, 1)
    console.log("linCon " + i + " = " + linCon);
    document.getElementById("graph").innerHTML += "<div style='background-color:#000000; width:" + (linCon * 1000) + "px; height:5px;'></div>";
  }
}

function applyLinearConversion(OldValue, OldMin, OldMax, NewMin, NewMax) {
  OldRange = (OldMax - OldMin)
  if (OldRange == 0)
    NewValue = NewMin
  else {
    NewRange = (NewMax - NewMin)
    NewValue = (((OldValue - OldMin) * NewRange) / OldRange) + NewMin
  }

  return NewValue

}
<div id="graph"></div>

У меня он заполняет div более стилизованными div.

Мой выглядит так: enter image description here

Я хочу, чтобы у меня было больше такого: enter image description here

1 Ответ

2 голосов
/ 20 июня 2020

Вы можете использовать формулу полукруглого графика:

Это приводит к следующему графику:

Поскольку для рисования графика вы используете горизонтальные блоки div, расположенные вертикально, координаты x и y будут перевернуты, и будет использоваться левая четверть круга из приведенного выше графика. 

var width = 200;                             // the width of the graph
var height = 200;                            // the height of the graph
var xOffset = 0.25 * width;                  // the x offset at which the graph will start ramping up (this offset is added to the graph width)

var html = "";                               // to accumulate the generated html before assigning it to innerHTML (it's not a good idea to constantly update innerHTML)

for (i = 1; i < 101; ++i) {
  var x = 1 - i / 100;                       // the x coordinate, we are using the left side of the graph so x should be negative going from -1 to 0
  var y = Math.sqrt(1 - x * x);              // the y coordinate as per the formula (this will be used for the width)
  html += "<div style='background-color:#000000; width:" + (xOffset + y * width) + "px; height:" + (height / 100) + "px;'></div>";
}

document.getElementById("graph").innerHTML = html;
<div id="graph"></div>
...