Wykres na stronie w JavaScript

pytanie zadane 27 kwietnia 2017 w JavaScript przez hydyne Nowicjusz (120 p.)
zmienione kategorie 28 kwietnia 2017 przez draghan

Zaczynam naukę JSa, "podstawy podstaw" jakieś już mam ale chcę zrobić coś większego. Planuję wykonać narzędzie do rysowania kształtów 2D sparametryzowanych według danych podanych przez użytkownika.
Będę wdzięczny za naprowadzenie jak takie coś wykonać. Na początek coś co powinno być w miarę proste, całe narzędzie będzie się składało z takich małych części składowych jak to:

Narzędzie do rysowania części okręgu.
Użytkownik wypełnia w kilku polach wartości a po prawej stronie rysuje się fragment okręgu w określonym miejscu takiego widoku zgodnie z podanymi wymiarami. Na rysunku tym oczywiście widoczna jest tylko ta czerwona linia. Wymiary i osie umieściłem tam tylko informacyjnie. Robiłem takie rzeczy w excelu na wykresie punktowym. Chcę narzędzie które mam w excelu przenieść na stronę internetową. Będzie na tym rysunku/wykresie wiele takich linii tworzących pewien rysunek. Wszystkie wzory i rozwiązanie matematyczne tego mam, kwestia tylko jak to zrobić w JS? Jakie biblioteki? Może jakieś podobne przykłady ktoś zna?

1	komentarz 28 kwietnia 2017 przez radek024 Szeryf (77,160 p.) Myślę, że warto abyś poczytał o canvas - z pewnością to tutaj wykorzystasz.

2 odpowiedzi

odpowiedź 28 kwietnia 2017 przez kGrab Użytkownik (700 p.)

Zgadzam się z sugestią użytkownika radek024. Element canvas i jego obsługa poprzez JS będzie dobrym rozwiązaniem. Możesz też poszukać czy biblioteka jqPlot oferuje coś czego dokładnie poszukujesz sprawdź tutaj: http://www.jqplot.com/examples/pieTest.php

Swoją drogą jqPlot i tak wykorzystuje element canvas, więc na przyszłość dla takich rozwiązań może Ci się to przydać. W języku polskim odnośnie canvas polecam Ci kurs: https://kursownik.pl/kursy/html5_canvas/. Już po pierwszych kilku lekcjach będziesz wiedział jak wstawić element canvas i obsługiwać go dla potrzebnych tobie zastosowań.

Poprzez canvas możesz narysować część okręgu dzięki funkcji: context.arc(x,y,r,sAngle,eAngle,counterclockwise);. Zapraszam po szczegóły do dokumentacji.

Miłej lektury!