() translation by (you can also view the original English article)
W tym poradniku, pokażę ci jak zaprojektować wykres kołowy za pomocą Sketch. Możesz ręcznie tworzyć wykresy kołowe za pomocą kształtów, masek i pióra, jednakże zamierzam pokazać ci dwa podejścia, które są znacznie szybsze i bardziej precyzyjne.
Obejrzyj poradnik
Metoda #1
To najprostsze podejście, które wiąże się z użyciem wtyczki. Sketchy Pies została opracowana przez Aby Nimbalkar i służy do tworzenia wykresów kołowych z okrągłych kształtów.
Zacznij od stworzenia koła. Następnie, zaznaczając go, przejdź do Plugins > Sketchy Pies > Convert to Pie Chart. Otworzy się okno, w którym możesz wpisać kody HEX kolorów oddzielone przecinkiem. Dodaj ile tylko chcesz, a następnie kliknij OK; twój wykres jest gotowy!
Sekcje wykresu są zbudowane z obramowań. Możesz edytować każdą z nich poprzez zmianę właściwości obramowania. Kolor sekcji zależy od koloru obramowań, można również zmienić wartość Dash, aby sterować rozmiarem sekcji.
Możesz również określić rozmiary sekcji podczas tworzenia wykresu. Dokonuje się to poprzez dołączenie do każdej koloru wartości procentowych, na przykład: #444444:20%,#555555:80% lub wartości dziesiętnych #444444:.2,#555555:.8.
Metoda #2
Tworzenie wykresów kołowych za pomocą gradientów kątowych jest trochę bardziej skomplikowane, ale właśnie to zamierzmy teraz zrobić! Dodaj koło, a następnie przejdź do opcji Angular Fill znajdującej się na pasku właściwości. Dodaj dwa znaczniki kolorów dla każdej sekcji, którą chcesz umieścić na wykresie kołowym:
Możesz umieścić znaczniki kolorów precyzyjnie przy gradiencie za pomocą klawiszy numerycznych na klawiaturze. Po naciśnięciu klawisza 2, znacznik koloru znajdzie się dokładnie w 20% gradientu. Rozpoczęcie każdej nowej sekcji powinno być umieszczone dokładnie tam, gdzie kończy się poprzednia sekcja.
Uwaga: korzystam z programu Sketch w wersji 41.2, zwróć uwagę, że na granicy sekcji widać poszarpaną linię. W poprzednich wersjach to nie występowało, więc jestem pewien, że to błąd programu Sketch. Daj mi znać, czy problem występuje z innych wersjach!
