Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   как рисовать графики (https://javascript.ru/forum/misc/48170-kak-risovat-grafiki.html)

him 23.06.2014 12:24

как рисовать графики
 
в какой то момент заинтересовался рисование графиков.
погуглился... какие то варианты нашел.
их достаточно много оказалось.
поэтому вопрос!

мне надо рисовать график по точкам,
эти точки надо соединять сглаженно.
в матиматике вроде это называется квадратичное или кубическое отклонение что ли. но именно когда линия точно проходит через точку.

посоветуйте, кто чем рисует...
я пробовал http://dumpz.org/13715/
но что то график как был прямолинеен так и остался...

хочется что то типа:
http://www.hi-fi.ru/sven/i/ht-435d/dimension_2b.jpg

Sweet 23.06.2014 13:12

Я ошибаюсь, или это рисуется просто множеством .lineTo(x, y)???

Sweet 23.06.2014 13:41

Цитата:

Сообщение от Sweet
это рисуется просто множеством .lineTo(x, y)

Т.е. уот так уот:
<canvas id="canvas" width="400" height="100"></canvas>

<script>

var context = canvas.getContext("2d");
var y0 = canvas.height / 2;

context.beginPath();
context.moveTo(0, y0);

for (var x = 0; x < canvas.width; x++) {
  var y = f(x);
  context.lineTo(x, y + y0);
}

context.stroke();


function f(x) {
  return Math.sin(x / 16) * 48;
}

</script>

him 23.06.2014 16:02

возможно я как то не правильно изложил мысль. есть напимер точки:
$points1 = array(
    array(0,1)
    , array(1,3)
    , array(2,-4)
    , array(3,2)
    , array(4,0.5)
    , array(5,0.7)
    , array(6,-1)
    , array(7,4)
    , array(8,2)
);

надо красиво нарисовать график.
речь не идет о синусах и других матиматических функциях.

Nlk 27.08.2020 18:57

Sweet,
Интересный пример, спасибо

Alexandroppolus 28.08.2020 01:46

Цитата:

Сообщение от him
надо красиво нарисовать график.

Если имеется всего несколько точек, то рисование lineTo сделает ломаную. Потому что за единицу размера (расстояние по оси Х между соседними точками) придется взять не один, а несколько пикселей.

Тебе нужен bezierCurveTo.
https://msiter.ru/references/html5-canvas/beziercurveto

Контрольные точки (см.картинку в статье) лежат на касательных, проходящих через твои точки. Остаётся только смекнуть углы наклона этих касательных.

Для любой точки (кроме двух крайних) можно считать, что касательная параллельна линии, проходящей через соседнюю точку слева и соседнюю точку справа. Какую касательную брать для первой и последней точки, сходу не придумывается, тут поэкспериментируй сам..

Ну и второй момент - где именно на этих касательных ставить контрольные точки. Навскидку подойдёт вариант брать по 1/3 единичного расстояния по оси Х, хотя опять же тут надо экспериментировать.

Nexus 29.08.2020 00:59

Alexandroppolus, на дату публикации поста обратите внимание.
Вряд ли автор все 6 лет дожидается ответа :)


Часовой пояс GMT +3, время: 04:00.