Як створити кругову діаграму в Sketch

У багатьох користувачів виникає питання, чи можливо створити кругову діаграму за допомогою програми. Ось відповідь на це питання.

На жаль, немає нативного способу для створення для створення кругових діаграм у Sketch, однак, є два способи, як це зробити. Обидва мають свої плюси та мінуси.

Перший спосіб – за допомогою Angular Gradient

Для початку треба буде створити коло інструментом Oval (O). Тримайте шифт, коли перетягуєте овал, щоб зробити його ідеальним колом. Змініть його заповнення (fill) на Angular Gradient. Якщо на колі є край, приберіть його вимкнувши галочку border в інспекторі або правою мишкою клацніть на колір кольору і натисніть Remove.

Ми можемо помітити два кольори на одній позиції. Кожен дільник сегменту представлений початковим і кінцевим кольором.

1-hovohkw-81njflt7s0en7a

Давайте поділимо кругову діаграму. Ми створимо діаграму з 5-ма сегментами. Щоб цього добитися ви або натисніть “+”, коли ваш курсор над зовнішньою стороною кола, або просто двічі клікніть на Gradient Fill у інспекторі. Щоб розмістити колір по центру інших двох кольорів виберіть колір, який ви хочете розмістити і натисніть клавішу “=”. Це дуже корисно для створення акуратної діаграми.

1-7rtvjfzs01prfo-_snkuuw

Тепер, коли ми розділили діаграму, давайте додамо кольорів до сегментів. Для початку нам треба додати ще один колір в ту ж позицію де розміщені дільники. Тут ми задамо початковий і кінцевий колір для дільників сегментів.

1-nklxmflpirfvqdiv2or_lw

Ця хитра частина, тож її збагнути можна не одразу. Зовнішній колір представляє початковий колір сегменту, а внутріній колір – представляє кінцевий колір сегменту. Якщо ви не можете підібрати правильний колір для певного сегменту перемістіть зовнішній колір трохи далі на якийсь бік.

1-xlyfj7lwjpkqavzez5apta

Тепер ми можемо легко переконвертувати у діаграму-пончик, якщо потрібно. Щоб це зробити нам спершу доведеться зберегти градієнтні наповнення на панелі. Натисніть на іконку плюс на панелі gradient fill, щоб зберегти їх. Відімкніть Fill і створіть край з потрібною товщиною. Тепер просто застосуйте Angular Gradient, який ми щойно зберегли і вуаля!

1-_gweorxp1jgschat2_xueq

Плюсом цього підходу є те, що ви повністю контролюєте вашу кругову діаграму, але при цьому треба зробити багато роботи.

Другий спосіб – за допомогою Sketchy Pies

Для іншого способу створення діаграми нам знадобиться плагін Sketchy Pies. Він дозволяє автоматично створювати діаграму, вказавши кольори для кожного сегменту, через кому.

1-hj06sqdijtb8jtpw8ryjqa

Це найлегший спосіб створення кругових діаграм у Sketch. Але він потребує трохи додаткових зусиль, якщо ви хочете, щоб ваші сегменти були на однаковими.

Отже, щоб змінити розмір сегментів вам треба спочатку вибрати сегмент у списку шарів. Натисніть на зубець у панелі Border і змініть значення dash.

1-hg-aqx_ygwhjw_d-7qcmvg

Вам сподобалося?

Читайте щотижня наші кращі статі про дизайн!

email рассылки

Корисна розсилка!

Все найцікавіше про дизайн і дизайнерів!
А ще свіжі вакансії і трішки гумору)

Ваш email:
email рассылки
Позначки:

One Comment

  1. ValentinaZZ

    Очень просто и понятно. На работе приходится упорядочивать много данных, подводить итоги работы за день. Хочу, что бы отчеты выглядели красиво. Возьму теперь на заметку круговую диаграмму. Так же она отлично подойдет для презентаций.

Залишити відповідь