Informacje o nowych artykułach oraz akcjach edukacyjnych prosto na Twojej skrzynce e-mail!

CherryFramework 4.0 – dodawanie wykresów oraz obsługa shortcode

Cherry Chart

Pierwszą z wtyczek, które opiszę, będzie Cherry Chart. Za pomocą tego pluginu możemy szybko i sprawnie dodawać wykresy na stronę internetową. Co więcej do dyspozycji mamy następujące rodzaje prezentacji danych:

  • pasek postępu,
  • wykres kołowy,
  • wykres pierścieniowy,
  • pasek.

Za pomocą Cherry Chart stworzymy powyższe wykresy na obydwóch stronach i porównamy je ze sobą.

Na początku przechodzimy do panelu administracyjnego pierwszej strony i przełączamy się do sekcji Charts (Wykresy), która pojawiła się po instalacji wtyczki Cherry Charts. Dalej klikamy przycisk Add new chart (Dodaj nowy wykres), po czym pojawi się nowe okno z ustawieniami dla tworzenia wykresu (rys. 3):

Charts1-2

W analogiczny sposób przechodzimy do tworzenia wykresu na stronie drugiej (rys. 4):

Charts1a

Porównując okno z opcjami wtyczki na dwóch stronach www, można zobaczyć, że mają one różny wygląd. Na stronie 1 nie działają przyciski „+” i „–”, i nie ma opcji wyboru koloru sektorów i tła wykresu z wyskakującego okna (kolory można tylko wpisywać ręcznie w formacie szesnastkowym). Na stronie 2 takie opcje są dostępne. Różnica miedzy funkcjonalnością pomiędzy opcjami na stronie 1 i stronie 2 wskazuje na to, że ostatnie związane są z CherryFramework. To oznacza, że wtyczka niestety nie jest całkowicie niezależna od frameworku.

Przejdźmy teraz do tworzenia wykresów, zacznijmy od paska postępu. W polu Chart typ (Typ wykresu) wybieramy wykres: Progress bar (Pasek postępu) i ustawiamy parametr Radial (Promeniowy). Inne możliwe warianty to Horizontal (Horyzontalny), Vertical (Wertykalny). 

Także dla tego typu wykresu dostępne są również inne opcje, pozwalające wgrać odpowiednie dane i stylizować wykres pod własne potrzeby. Dotyczą one:

  1. Rozmiaru wykresu:
    • Inner cutout percentage czyli odległość paska od środka ekranu,
    • Width czyli szerokość,
    • Height czyli wysokośćCharts4
  2.  Treści wykresu:
    • Progress bar template czyli szablon pasku postępu,
    • Chart icon – ikona dla wykresu,
    • Chart icon size – roomier irony,
    • Chart icon color – kolor ikony.Charts5
  3. Danych wykresu:Charts6
  4. Wyglądu wykresu
    • Item #n color – kolor n-go elementu (sektora) wykresu,
    • Background color – color tła,
    • Items opacity – przezroczystość elementów,
    • Background opacity – przezroczystość tła,
    • Chart stroke thickness – grubość linii,
    • Chart stroke color – kolor linii,
    • Chart stroke opacity – przezroczystość linii.Charts7
  5. Autorstwa:Charts8

Przedstawione wyżej opcje pozwalają dopasować wykres pod własne potrzeby. W naszym przypadku będziemy jednak korzystać się z ustawień domyślnych, gdyż naszym głównym celem jest porównanie wykresu z tymi samymi ustawieniami na dwóch różnych stronach.

Na sam końcu przypisujemy nazwę do naszego wykresu: „Pasek dostępu” i zapiszemy go. W taki sam sposób tworzymy wykres na stronie 2.

Teraz można opublikować nasz wykres bezpośrednio na stronie internetowej. W naszym przypadku zrobimy to za pomocą zwykłego wpisu, ale warto też wspomnieć, że wykresy  można dodawać w dowolne miejsca. Stworzony wykres można opublikować umieszczając go w artykule za pomocą jednego z poniższych sposobów:

  1. Możemy skopiować shortcode wykresu z sekcji Shortcode to paste (Shortcode do skopiowania) (rys. 9) i stworzyć nowy wpis:Charts9Skopiowany shortcode należy wstawić w dowolne miejsce artykułu (rys. 10):Charts10Możemy zapisać zmiany i przejść na stronę www z artykułem (rys. 11):Charts11Jak widać przygotowany przez nas wykres pojawił się na stronie.
  2. Możemy również z poziomu okna edytowanego wpisu wybrać przycisk Wstaw shortcode (rys.12):Charts12Następnie pojawi się okno, w którym można wybrać różne shortcodes. W naszym przypadku należy wybrać shortcode Chart (Wykres) (rys. 13):Charts13Dalej w nowym oknie przechodzimy do pola Chart ID (ID wykresu), w którym należy podać numer ID wykresu. Zobaczyć go można pod czas edycji wykresu w polu Shortcode to paste. W naszym przypadku, id to 6. Również w tym oknie można zmodyfikować styl wykresu, który my zostawiamy bez zmian. Wstawiamy nasz shortcode do artykułu za pomocą przycisku Wstaw shortcode (rys.14):Charts14Dzięki temu stworzony przez nas shortcode pojawi się w artykule (rys. 10). Po tym jak zmiany będą zapisane, otrzymamy stronę www zawierającą wykres (rys.11).Proszę zwrócić uwagę, że podany sposób działa tylko przy zainstalowanej i aktywowanej wtyczce Cherry Shortcodes.

Porównując wykresy paska postępu na stronach 1 oraz 2 widać, że wyglądają one tak samo. To znaczy, że funkcje wtyczki działają poprawnie również bez zainstalowanego CherryFramework.

Dalej porównamy sobie pozostałe wykresy, które będziemy tworzyć w taki sam sposób jak i pasek postępu. W rezultacie będą one wyglądać następująco:

  1. Wykres kołowyCharts15
  2. Wykres pierścieniowy:Charts16

Stworzone powyżej wykresy na stronach 1 i 2 będą wyświetlane w jednakowy sposób. To potwierdza, że wtyczka jest praktyczni niezależna od CherryFramework. Jedyny problem jest z niektórymi opcjami stylizacji, które nie działają poprawnie na stronie bez frameworku.

Wtyczka CherryCharts jest bardzo prostym instrumentom dla tworzenia wykresów na stronę www, w porównywaniu do innych dostępnych na rynku rozwiązań. Wykonuje ona w pełni swoją rolę i ma wszystkie potrzebne funkcje dla tworzenia wykresów na stronie www.  A po usunięciu niektórych problemów z opcjami związanymi z CherryFramework stanie się dobrym rozwiązaniem dla tworzenia infografiki.

Strony: 1 2 3 4 5 6

Spodobało się?

Jeśli tak, to zarejestruj się do newslettera aby otrzymywać informacje nowych artykułach oraz akcjach edukacyjnych. Gwarantuję 100% satysfakcji i żadnego spamowania!

, , , , , , , , ,

Dodaj komentarz

guest
3 Komentarzy
Najstarsze
Najnowsze Najlepiej oceniane
Inline Feedbacks
View all comments
feamoignargfaionakfj9ajfopamjv
feamoignargfaionakfj9ajfopamjv
11 października 2015 15:14
lukas124
11 października 2015 15:26

Tak, ale to jest zdjęcie ilustracyjne ;)

PS: Sam używam Sublime Text.

feamoignargfaionakfj9ajfopamjv
feamoignargfaionakfj9ajfopamjv
11 października 2015 18:52
Reply to  lukas124

Jak dla mnie, nie ma nic lepszego. Chociaż kiedyś muszę wreszcie spróbować Vim ;)

Pin It on Pinterest