Tworzenie wykresów za pomocą JavaScript i PHP

Wykres internetowy można utworzyć za pomocą biblioteki po stronie klienta lub biblioteki po stronie serwera na podstawie danych statycznych lub dynamicznych. Jeśli chcesz tworzyć animowane wykresy i chcesz szybciej pobrać wykres, lepiej jest użyć biblioteki wykresów po stronie klienta. Dostępnych jest wiele bibliotek po stronie klienta do tworzenia wykresów dla stron internetowych. Jedną z popularnych bibliotek po stronie klienta jest Płótno które można użyć do tworzenia wykresów internetowych za pomocą stałych danych lub pobierania danych z dowolnej bazy danych.

CanvasJS jest używany z PHP w tym samouczku do tworzenia wykresów internetowych. Ta biblioteka obsługuje różne typy wykresów, takie jak wykres słupkowy, wykres kolumny, dynamiczny wykres kolumny, wykres linii, wykres kołowy, wykres piramidowy, wykres pączków, wykres bąbelkowy itp. Niektóre z nich są tutaj pokazane za pomocą przykładowych danych. Przed rozpoczęciem tego samouczka musisz upewnić się, że Twój serwer WWW i PHP są prawidłowo zainstalowane i działają.

Pobierz na płótnie

Jest dostępny w wersji bezpłatnej i komercyjnej. Możesz pobrać i użyć bezpłatnej wersji tej biblioteki do celów testowych. Przejdź do następującego adresu URL i kliknij Pobierać link do pobrania biblioteki CanvASJS. Rozpakuj plik i przechowuj folder na serwerze WWW po pobraniu, aby go użyć.

https: // canvasjs.com

$ zyspData = tablica (
tablica („x” => 2013, „y” => 440000),
tablica („x” => 2014, „y” => 270000),
tablica („x” => 2015, „y” => 210000, „indexLabel” => „najniższy”),
tablica („x” => 2016, „y” => 600000),
tablica („x” => 2017, „y” => 630000, „indexLabel” => „najwyższy”),
tablica („x” => 2018, „y” => 560000));
?>

Przykład wykresu kolumny

Wyjście:

Następujące dane wyjściowe zostanie wygenerowane, jeśli uruchomisz plik z dowolnego serwera WWW. „Wersja próbna” i „płótno.com ”znaki wodne zostaną wyświetlone dla bezpłatnej wersji.

Po kliknięciu „Więcej możliwości" przycisk z prawego górnego rogu, a następnie zostaną wyświetlone trzy opcje. Możesz wydrukować wykres lub zapisać wykres jako format obrazu JPG lub PNG. Jeśli klikniesz „Zapisz jako Png”Opcja pojawi się następujące okno dialogowe.

Domyślna nazwa pliku obrazu to Wykres.png. Możesz usunąć znaki wodne z obrazu za pomocą dowolnego oprogramowania do edycji zdjęć.

Wykres kołowy:

Poniższy przykład pokazuje popularność różnych rozkładów Linux za pomocą wykresu Pie. Napisz następujący kod w pliku o nazwie wykres kołowy.php i przechowuj plik w vAR/www/html/jschart teczka.

$ popularność = tablica (
tablica („OS” => „Arch Linux”, „y” => 40),
tablica („OS” => „centos”, „y” => 25),
tablica („OS” => „Debian”, „y” => 12),
tablica („OS” => „Fedora”, „y” => 10),
tablica („OS” => „gentoo”, „y” => 8),
tablica („OS” => „Lindows”, „y” => 5)
);
?>

Przykład wykresu kołowego

Wyjście:

Poniższe dane wyjściowe wyświetli się, jeśli uruchomisz plik z serwera WWW. Możesz utworzyć plik obrazu wykresu według kroku, który pokazano w poprzednim przykładzie.

Dynamiczny wykres kolumnowy:

Możesz stworzyć ładnie wyglądający wykres dynamiczny za pomocą tej biblioteki. Załóżmy, że chcesz stworzyć na żywo wykres giełdowy, w którym ceny akcji wzrasta lub zmniejsza się w sposób ciągły. Napisz następujący kod w pliku o nazwie dynamiczny mist.php i przechowuj plik w vAR/www/html/jschart teczka.

$ stockData = tablica (
tablica („stock” => „msft”, „y” => 92.67),
tablica („stock” => „niski”, „y” => 88.89),
tablica („Stock” => „Intc”, „y” => 52.15),
tablica („Stock” => „Adi”, „y” => 91.78),
tablica („Stock” => „Adbe”, „y” => 224.80),
tablica („Stock” => „Abbv”, „y” => 94.30),
tablica („Stock” => „AMD”, „y” => 10.27)
);
?>

Przykład wykresu dynamicznego

Wyjście:
Poniższe dane wyjściowe wyświetli się, jeśli uruchomisz plik z serwera WWW. Możesz utworzyć plik obrazu wykresu w podobny sposób, który jest pokazany w pierwszym przykładzie.

Wykonując powyższe kroki, możesz łatwo tworzyć niezbędne internetowe wykresy animowane za pomocą tej przydatnej biblioteki JavaScript.