Лекція 6
Компонента Chart
Розглянемо компонент Chart. Цей компонент дозволяє будувати різні діаграми та графіки, які виглядають дуже ефектно (рис. 1). Компонент Chart має безліч властивостей, методів, подій, так що якщо всі їх розглядати, то цьому довелося б присвятити не одну лекцію. Тому обмежимося розглядом лише основних характеристик Chart. А з рештою ви можете ознайомитися у вбудованій довідці Delphi або просто випробувати їх, експериментуючи здіаграмами.
|
Рис. 1 Приклад програми з діаграмами: початковий стан (а) і стан при зміні типу діаграми і збільшенні фрагмента графіка (б) |
а) |
|
|
|
б) |
|
Компонент Chart є контейнером об'єктів Series типу TChartSeries - серій даних, що характеризуються різними стилями відображення. Кожен компонент може включати кілька серій. Якщо ви хочете відображати графік, то кожна серія буде відповідати одній кривій на графіку. Якщо ви хочете відображати діаграми, то для деяких видів діаграм можна накласти один на одну кілька різних серій, для інших (наприклад, для кругових діаграм) це, ймовірно, буде виглядати непривабливо. Однак, і в цьому випадку ви можете задати для одного компонента Chart кілька серій однакових даних з різним типом діаграми. Тоді, роблячи в кожний момент часу активною одну з них, ви можете надати користувачеві вибір типу діаграми, що відображає цікаві для нього дані.
Додайте один, або два (якщо захочете відтворити рис. 1) компонента Chart на форму і подивіться властивості в Інспекторі Об'єктів Наведемо пояснення деяких з них.
|
AllowPanning |
Визначає можливість користувача прокручувати видиму частину графіка під час виконання, натискаючи праву кнопку миші. Можливі значення: pmNone - прокрутка заборонена, pmHorizontal, pmVertical або pmBoth - дозволена відповідно прокрутка тільки в горизонтальному напрямку, тільки у вертикальному або в обох напрямках. |
|
AllowZoom |
Дозволяє користувачеві змінювати під час виконання масштаб зображення, вирізаючи фрагменти діаграми або графіка курсором миші (на рис.1 б внизу показаний момент перегляду фрагмента графіка, цілкомп редставленого на рис. 1 а). |
|
Title |
Визначає заголовок діаграми. |
|
Foot |
Визначає підпис під діаграмою. За замовчуванням відсутня. Текст підпису визначається підвластивістю Text. |
|
Frame |
Визначає рамку навколо діаграми. |
|
Legend |
Легенда діаграми – список позначок. |
|
MarginLeft , MarginRight , MarginTop, MarginBottom |
Значення лівого, правого,верхнього та нижнього полів. |
|
BottomAxis, LeftAxis, RightAxis |
Ці властивості визначають характеристики відповідно нижньої, лівої і правої осей. Задання цих властивостей має сенс для графіків і деяких типів діаграм. |
|
LeftWall, BottomWall, BackWall |
Ці властивості визначають характеристики відповідно лівої, нижньої і задньої граней області тривимірного відображення графіка (див. рис. 1 а, нижній графік). |
|
SeriesList |
Список серий даних, відображуваних в компоненті. |
|
View3d |
Дозволяє або забороняє тривимірне відображення діаграми. |
|
View3DOptions |
Характеристики тривимірного відображення. |
|
Chart3DPercent |
Масштаб тривимірності (на рис. 1 це товщина діаграми і ширина стрічок графіка). |
Поряд з багатьма з перелічених властивостей в Інспекторі Об'єктів розташовані кнопки з трьома крапками з правого боку, які дозволяють викликати ту чи іншу сторінку Редактора Діаграм – багатосторінкового вікна, яке дозволяє встановити потрібні властивості діаграм. Виклик редактора Діаграм можливий також подвійним натиском миші на компоненті Chart або натиском на ньому правою кнопкою миші і вибором команди Edit Chart з розгорнутого меню.
Якщо ви бажаете написати додаток, показаний на рис. 1 потрібно натиснути двічі лівою кнопкою миші на верхньому компоненті Chart. Ви потрапите у вікно Редактора Діаграм (рис. 2) на сторінку Chart, яка має кілька закладок. Перш за все вас буде цікавити на ній закладка Series. Клацніть на кнопці Add – додати серію. Ви потрапите у вікно (рис. 3), в якому ви можете вибрати тип діаграми або графіка. У даному випадку виберіть Pie - кругову діаграму. Скориставшись закладкою Titles ви можете задати заголовок діаграми, закладка Legend дозволяє задати параметри відображення легенди діаграми (списку позначень) або взагалі прибрати її з екрану, закладка Panel визначає вид панелі, на якій відображається діаграма, закладка 3D дає вам можливість змінити зовнішнійвигляд вашої діаграми: нахил, зсув, товщину і т.д.
Коли ви працюєте з Редактором Діаграм, і вибрали тип діаграми, в компонентах Chart на вашій формі відображається її вид із занесеними в неї умовними даними (див. рис. 4).
|
Рис. 2 Редактор Діаграм, сторінка Chart, закладка Series |
|
|
Рис. 3 Вибір типу діаграми в редакторі Діаграм |
|
Тому ви відразу можете спостерігати результат застосування різних опцій до вашого додатку, що дуже зручно.
Сторінка Series, яка також має ряд закладок, дає вам можливість вибрати додаткові характеристики відображення серії. Зокрема, для кругової діаграми на закладці Format корисно включити опцію Circled Pie, яка забезпечить при будь-якому розмірі компонента Chart відображення діаграми у вигляді кола. На закладці Marks кнопки групи Style визначають, що буде написано на ярличках, які відносяться до окремих сегментів діаграми: Value - значення, Percent - відсотки, Label - назви даних і т.д. У прикладі рис. 1 включена кнопка Percent, aна закладці General встановлений шаблон відсотків, що забезпечує відображення тільки цілих значень.
|
Рис. 4 Форма додатка рис. 1 із занесеними в неї умовними даними |
|
Ви можете, якщо хочете, додати на цей компонент Chart ще одну тотожну серію,натиснувши на закладці Series сторінки Chart кнопку Clone, а потім для цієї нової серії натиснути кнопку Change (змінити) і вибрати інший тип діаграми, наприклад, Bar. Звісно, два різних типи діаграми на одному малюнку будуть виглядати погано. Але ви можете вимкнути індикатор цієї нової серії на закладці Series, а потім надати користувачеві змогу вибрати той чи інший вид відображеннядіаграми (нижче буде показано, як це робиться).
Вийдіть з редактора Діаграм, виділіть у вашому додатку нижній компонент Chart і повторіть для нього задання властивостей за допомогою Редактора Діаграм. У даному випадку вам треба буде поставити дві серії, якщо хочете відображати на графіку дві криві, і вибрати тип діаграми Line. Оскільки мова йде про графіки, ви можете скористатися закладками Axis і Walls для задання координатних характеристик осей і тривимірних граней графіка.
На цьому проектування зовнішнього вигляду програми завершується. Залишилося написати код, що задає дані, які ви хочете відображати. Для тестового додатку давайте задамо в круговій діаграмі просто деякі константні дані, а в графіках - функції синус і косинус.
Для завдання відображуваних значень треба використовувати методи серій Series. Зупинимося лише на трьох основних методах.
Метод Clear очищає серію від занесених раніше даних.
Метод Add:
Add (Const AValue: Double; Const ALabel: String;
AColor: TColor)
дозволяє додати в діаграму нову точку. Параметр AValue відповідає додаваному значенню, параметр ALabel - назва, яка буде відображатися на діаграмі і в легенді, AColor - колір. Параметр ALabel - не обов'язковий, його можна задатипорожнім.
Метод AddXY:
AddXY (Const AXValue, AYValue: Double;
Const ALabel: String; AColor: TColor)
дозволяє додати нову точку в графік функції. Параметри AXValue і AYValue відповідають аргументу та функції. Параметри ALabel і AColor ті ж, що і в методі Add.
Таким чином, процедура, яка забезпечує завантаження даних в нашому прикладі, може мати вигляд:
const
A1=155;
A2=251;
A3=203;
A4=404;
var
i: word;
begin
With Series1 do
begin
Clear;
Add(A1, 'Цех 1', clYellow);
Add(A2, 'Цех 2', clBlue);
Add(A3, 'Цех 3', clRed);
Add(A4, 'Цех 4', clPurple);
end;
Series2.Clear;
Series3.Clear;
for i:=0 to 100 do
begin
Series2.AddXY(0.02*Pi*i, sin(0.02*Pi*i), '', clRed);
Series3.AddXY(0.02*Pi*i, cos(0.02*Pi*i), '', clBlue);
end;
end;
Цю процедуру можна включити в обробку по натисканні по якій-небудь кнопці, у команду меню, або просто в подію OnCreate форми. Оператори Clear потрібні, якщо в процесі роботи додатка ви збираєтеся оновлювати дані. Без цих операторів повторне виконання методів Add і AddXY тільки додасть нові точки,не видаливши вже існуючі.
Якщо ви передбачили, наприклад, для даних, що відображаються в діаграмі, дві серії Series1 і Series4 різних видів - Pie і Bar, то можете ввести процедуру, яка змінює на вимогу користувача тип діаграми. Цю процедуру можна ввести в подію OnClick якої-небудь кнопки, у команду меню або, наприклад, просто в обробку натиску миші на компоненті Chart. Для того, щоб завантажити дані в Series4 і зробити цю діаграму в перший момент невидимою, можна вставити в кінці наведеної раніше процедури оператори
Series4.Assign(Series1);
Series4.Active:=false;
Перший з цих операторів переписує дані, розташовані в Series1, в серію Series4. Адругий оператор робить невидимою серію Series4. Зміна типу діаграми здійснюєпроцедура
Series1.Active := not Series1.Active;
Series4.Active := not Series4.Active;
На рис. 1 б ви можете бачити результат перемикання користувача на інший вид діаграми.