Существуют ли библиотеки по построению эпюр на JavaScript?

Question

[Максим Иванов]

У меня задача нарисовать графики эпюр для различных стержней, например:



Есть и расчетная формула для построения такого графика:



Я понимаю как построить линию, но не понятно, как сделать штриховки ниже оси X и выше, как это делается (я так полагаю графики только на canvas и можно сделать)?



Эпюры могут быть разными:



Должна быть штриховка, может быть пока и заливку сделать

Если график идет выше оси X (под ним делается заливка до оси x), если график идет ниже оси X, то уже заливка идет над графиков до оси X также

Answer 1

[gleendo]

Нарисуйте в векторе, потом импортируйте на страницу svg и все. зачем париться с canvas?

Comments

[Максим Иванов]

Ну, это конечно интересно, я пока не догадываюсь как автоматизировать такое)

Например, есть эпюра такая:
https://habrastorage.org/files/34c/d58/c14/34cd58c...

Как видите, там могут быть разные ломанные графики

Answer 2

[Николай]

Нужно формализовать задачку. Провести линии легко(можно и канвасом и svg).
По какому принципу закрашиваются секторы? На текущий момент основная проблема в этом. Обязательно ли должна быть такая штриховка для закрашенных секторов? Нельзя ли обойтись заливкой?

Comments

[Максим Иванов]

Должна быть штриховка, может быть пока и заливку сделать

Если график идет выше оси X (под ним делается заливка до оси x), если график идет ниже оси X, то уже заливка идет над графиков до оси X также

[Николай]

Максим Иванов: как вариант - находить пересечения с осью X, рисовать многоугольник используя эти точки ( через lineTo) www.w3schools.com/tags/canvas_lineto.asp, потом заливать. Это в случае с заливкой. На svg - аналогично: рисуем path, потом заливаем при помощи fill. Кстати в случае с svg можно залить паттерном, который будет одной пунктирной линией. tutorials.jenkov.com/svg/fill-patterns.html и получится пунктир.

[Максим Иванов]

А есть готовые примеру, как находят пересечения с осью Х, чтобы сразу в бой попробовать?

[Николай]

Не знаю, есть ли готовые. Но для нахождения того, что прямая пересекает ось нужно решить уравнение kx + b = 0. А чтобы найти k и b - достаточно воспользоваться формулой построения прямой по двум точкам.