Skrypt PHP generujący kołowy wykres SVG

Autor podstrony: Krzysztof Zajączkowski

Stronę tą wyświetlono już: 3686 razy

Nadeszla wiekopomna chwila (jak mówił Pawlak na pogrzebie swego brata), a więc nadeszla wiekopomna chwila, coby zaprezentować wykres kołowy generowany za pomocą mojego własnego skryptu PHP. Na razie wykres ma postać okrojoną i wymaga dopracowania paru elementów, jednakże taką oto okrojoną postać postanowiłem tymczasowo zamieścić na mej stronie.

Kod, umożliwiający utworzenie wykresu ma następującą postać:

use diagrams as dg; $Diag = new dg\SvgDiagramCircle( 600, 300, 40, "Przykład wykresu kołowego", Array("styczeń"=>rand(10, 400), "luty"=>rand(10, 400), "marzec"=>rand(10, 400), "kwiecień"=>rand(10, 400), "maj"=>rand(10, 400),"lipiec"=>rand(10, 400),"sierpień"=>rand(10, 400), "wrzesień"=>rand(10, 400), "październik"=>rand(10, 400), "listopad"=>rand(10, 400), "grudzień"=>rand(10, 400))); $Diag->getSvg();

Jak widać w konstruktorze podać należy następujące parametry:

szerokość wykresu - pikselach;
wysokość wykresu;
wysokość rysowanych wycinków walca wykresu;
tytuł wykresu;
dane w formacie klucz => wartość - w tym przypadku użyte zostały liczby losowe.

Metoda GetSvg() tworzy i "wyświetla" wykres svg.

Jak widać klucze są wypisane w legendzie wraz z stojącymi za nimi wartościami liczbowymi, natomiast na wykresie umieściłem zaokrąglone wartości procentowe. Istnieje możliwość zmiany systemu kolorów poprzez podanie koloru początkowego i końcowego w sposób następujący:

$Diag->setColorSys(new dg\colorRGB(255, 205, 50), new dg\colorRGB(100, 150, 255));

W powyższym kodzie wywołana została metoda SetColorSystem obiektu $diag klasy svgCircleDiagram, która jako argumenty przyjmuje obiekty klasy colorRGB opisującej kolor w systemie RGB. Efekt działania można (a nawet trzeba) zobaczyć na poniższym wykresie.

W wykresie można włączyć odsunięcie elementów okręgu, tak żeby było widać płaszczyzny boczne jego wycinków. W celu włączenia tego efektu konieczne jest użycie następującego kodu:

$Diag->setMove(true);

Wynik ustawienia w powyższej metodzie przesunięcia na true można zobaczyć poniżej.