39.1.

Створення графічних примітивів

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

Так, на рис. 39.1 представлено приклад гістограми, побудованої в графічному вікні. Вона складається з таких графічних примітивів, як відрізок — вісь гістограми та прямокутників — стовпців з даними. Розглянемо, як створити такі елементи в графічному вікні.

У 8-му класі ми вже виводили в графічному вікні зображення із файла. Напевно, ви пам’ятаєте, що для цього необхідно було спочатку створити графічне полотно з використанням конструктора Canvas. Для створення графічних примітивів також потрібно створити це полотно та розташувати в графічному вікні.

Так, наприклад, це можуть бути такі команди:

Далі розглянемо створення графічних примітивів.

Створення відрізка

Для створення відрізка використовують метод createjine. Цей метод має таку структуру:

Тут x1, y1 — координати початку відрізка; x2, y2 — координати кінця відрізка; fill — колір лінії (за умовчанням чорний); arrow — напрям стрілок кінців відрізка. Може приймати такі значення: NONE — стрілки відсутні (за умовчанням), FIRST — на початку, LAST — в кінці, BOTH — з обох боків.

Так, на рис. 39.2 наведено приклад побудови відрізка з використанням команди:

Створення прямокутника

Для створення прямокутника використовують метод create_rectangle. Цей метод має таку структуру:

Тут x1 , y1 — координати верхнього лівого кута прямокутника; x2, y2 — координати нижнього правого кута прямокутника; fill — колір заливки (за умовчанням чорний); outline — колір межі (за умовчанням чорний). Так, на рис. 39.3 наведено приклад побудови прямокутника з використанням команди:

Створення написів

Крім відрізків та прямокутників, у гістограмі присутні підписи. їх виводять з допомогою методу create_text. Цей метод має таку структуру:

Тут x, у — координати нижнього лівого кута напису; fill — колір тексту (за умовчанням чорний); text — текст, який необхідно вивести. Наприклад,

ВПРАВА 39.1. ПОБУДОВА ГІСТОГРАМИ

Завдання. Побудувати гістограму відвідування спортивних секцій учнями школи відповідно до зразка (рис. 39.1).

Створення графічного вікна, полотна та осі x

1. Уведіть команди створення графічного вікна із заголовком Спортивні секції.

2. Додайте команди створення та розташування у вікні графічного полотна:

3. Додайте команду виведення зображення осі х.

4. Запустіть програму на виконання та переконайтеся, що вісь х побудована в нижній частині вікна та має стрілку, спрямовану праворуч.

5. Додайте команди створення двох списків: sport, що містить перелік спортивних секцій, та k — кількості відвідувачів у секціях:

Побудова ряду даних (прямокутників)

Спочатку розглянемо, яким чином можна визначити координати першого прямокутника. Для побудови прямокутника необхідно скористатися кодом, що має таку конструкцію:

Тут x1, y1 — це координати верхнього лівого кута. Нехай x1=20. Висота прямокутника — це перше значення списку k, а саме, k[0].

Вісь х розташована на відстані 200 px. Отже, y1=200-k[1]. Ширина стовпця дорівнює 40 px, отже, x2=20+40=60. Оскільки нижній правий кут лежить на осі х, то y2=200. Таким чином, для побудови першого прямокутника необхідно скористатися командою:

Врахуємо, що відступ між стовпцями 20 пікселів, отже, для побудови другого стовпця це буде команда:

Аналогічно можна вивести команду і для інших прямокутників. Але, оскільки між прямокутниками однакова відстань, то для побудови прямокутників краще скористатися оператором циклу:

Тут і — лічильник, що визначає номер прямокутника. х має початкове значення 20 і на кожному кроці змінюється на 60.

6. Додайте розглянутий вище код. Запустіть програму та перевірте правильність побудови прямокутників.

Створення написів

7. У тілі циклу додайте команду виведення написів під стовпцями. Самостійно визначте місце розташування команди у програмному коді.

У даній команді вказано, що написи буде зміщено на 20 пікселів по осі х, відносно початку розташування прямокутників, а також опущено на 15 пікселів униз. Написи секцій буде взято із масиву sport.

8. У тілі циклу додайте команду виведення значень даних над стовпцями. Самостійно визначте місце розташування команди у програмному коді.

9. Запустіть програму та перевірте правильність її виконання.

ВПРАВА 39.2. ПОБУДОВА ГРАФІКА

Коли дані, що містить масив, змінюються через однакові проміжки часу, для їхнього візуального відображення доцільно будувати графіки. Процес побудови графіків у Python розглянемо, виконуючи практичну вправу.

Завдання. Побудувати графік випадіння опадів за кожний місяць по Україні відповідно до зразка (рис. 39.4). При натисненні кнопки Створити список має бути сформований список опадів на кожний місяць, де значенням є випадкове число від 40 до 120. При натисненні кнопки Побудувати графік має здійснюватися побудова графіка за даними зі списку.

Створення списку опадів

1. Завантажте файл Вправа_39_2^ із матеріалів до даного параграфа. У наданому файлі здійснено імпорт необхідних модулів та створено елементи інтерфейсу програми: список Lbox та дві кнопки Btn1 та Btn2.

2. Створіть обробник події натиснення кнопки Створити список.

3. В конструкторі кнопки Btn1 додайте команду виклику обробника події Btn1_click.

4. Запустіть програму та перевірте створення списку.

Створення осей

5. Додайте команди створення та розташування у вікні графічного полотна:

6. Додайте команди створення координатних осей:

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

7. Додайте команди створення штрихів та підписів на осі х.

У даному коді створено масив х, що буде містити значення координат штрихів по осі х. Значення по х будуть змінюватися через кожні 20 px, отже, перша координата відносно полотна буде знаходитися на відстані 30 (тут розташовано початок координат) +20=50 px. Отже, загальна формула для значень масиву х має бути 20*i+50, де і змінюється від 0 до 11 включно.

8. Додайте команди створення штрихів та підписів на осі у.

Оскільки максимальне значення, можливе по осі у — це 120, а ціна поділки дорівнює 20, то для створення штрихів та підписів достатньо 6-ти ітерацій. Масив у буде мати такі значення [20,40,...,120].

Отже, для його створення введіть такий код:

9. Нижче у тілі циклу додайте команди створення штрихів та підписів по осі у.

10. Запустіть програму на виконання та перевірте правильність побудови осей.

Побудова графіка

11. Створіть обробник події кнопки Побудувати графік.

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

методу x1=x[i], y1=160-p[i], x2=x[i+1], y2=160-p[i+1]. Отже, x[i] та p[i] -

це поточні елементи масивів, а x[i+1] та p[i+1] — це наступні елементи масивів.

Враховуючи попередні пояснення, уведіть наведений нижче код:

12. В конструкторі кнопки Btn2 додайте команду виклику обробника події Btn2_click.

13. Оскільки створення масиву p відбувалося в іншому обробнику подій, змінна p має бути оголошена глобальною. Додайте оголошення змінної p в якості глобальної в тілі обробника події Btn1_click:

14. Запустіть програму на виконання та перевірте правильність побудови графіка. Сформуйте список ще раз, натиснувши кнопку Створити список та побудуйте графік, натиснувши кнопку Побудувати графік. В результаті новий графік буде накладатися на попередній. Аби цього не відбувалося, потрібно очистити полотно від попереднього зображення.

Щоб очистити полотно від зображення, використовують метод delete, що має таку конструкцію:

15. Додайте команду

до обробника події кнопки Btn2_click перед оператором циклу та перевірте, як буде працювати програма. В результаті натиснення кнопки Побудувати графік буде видалено все, що було побудовано до графіка.

Для видалення лише одного об’єкта, а в нашому випадку перед побудовою нового графіка ми маємо видаляти попередній, в команді створення відрізка графіка необхідно додати властивість tags=ім’я, а в якості параметра методу delete вказати ім’я даного тегу, який ми бажаємо видаляти.

16. В команді створення відрізка графіка додайте властивість tags.

17. Змініть параметр методу detele наступним чином:

18. Запустіть програму та перевірте правильність її виконання.

ВПРАВА 39.3

Завдання. Дано масив даних з прибутками та збитками магазину за один тиждень.

1. За даними масиву побудуйте графік. (Дані для масиву заповніть випадковим чином в діапазоні [-10000;10000]).

2*. Над даними, що мають прибуток, розташуйте напис.

3**. Дані, що мають збиток, позначте червоним квадратним маркером.

ВПРАВА 39.4

Завдання. На змаганнях з фігурного катання спортсмен одержує оцінку свого виступу від 10 суддів. Оцінка, яку може виставити один суддя, визначається кількістю балів від 0 до 6. Після одержання усіх оцінок найкраща та найгірша оцінки відкидаються, і спортсмену нараховується сумарний бал оцінок, що залишилися.

За результатами оцінок суддів побудуйте стовпчасту діаграму. Стовпчики зафарбуйте синім кольором. (Масив оцінок суддів заповніть випадковим чином дійсними числами від 0 до 6 з одним десятковим знаком.) Стовпці, що містять дані з максимальним та мінімальним результатами, зафарбуйте червоним кольором.

Контрольні запитання та завдання

1. Які графічні примітиви використовуються для побудови гістограм та графіків?

2. Як побудувати в графічному вікні відрізок? Які параметри використовують для його побудови?

3. Для чого використовують метод create_rectangle?

3. З допомогою якого методу можна видалити об’єкти з полотна? 4*. Як видалити один із об’єктів з полотна?

Питання для роздумів

1*. Яким має бути програмний код для побудови секторної діаграми?

Завдання для досліджень

1*. Ознайомтеся з методами побудови інших графічних примітивів (еліпса, багатокутника тощо).

 

 

Це матеріал з підручника Інформатика 9 клас Казанцева, Стеценко 2022