1

Лабораторная работа №25

DBChart. Графики и диаграммы

Тема: DBChart. Графики и диаграммы

Цель: Изучение основных свойств и методов компонента DBChart ,
изменение внешнего вида диаграмм графиков.
Оборудование: IBM – совместимые компьютеры.
Место проведения: Компьютерный класс.
Техника безопасности: См. инструкцию.

Теоретическая часть

Для построения графиков и диаграмм используются компоненты

Chart с вкладки Additional, и DBChart с вкладки Data Controls палитры
компонентов. Это равноценные компоненты, отличие состоит в том,
что DBChart принимает данные из указанного набора данных - таблицы или
запроса, а при использовании Chart данные приходится вносить
самостоятельно.

Это довольно сложные компоненты, они имеют множество свойств,

которые в свою очередь сами являются сложными объектами. Если
описывать компоненты графиков и диаграмм подробно, то получится
небольшая книга, поэтому изучим основные приемы работы с ними.

Простое приложение с графиком

Графики применяются там, где нужно показать динамику подъема или

спада одного или нескольких объектов. Хорошим примером является график
с кривыми, демонстрирующими динамику изменений курсов доллара и евро
к рублю. Диаграммы же применяются для демонстрации сравнительных
показателей разных объектов. Так, например, во время предвыборной
кампании часто демонстрируют диаграмму, где столбики различного роста
показывают, кто из кандидатов набрал больше голосов. Круговые диаграммы
показывают сравнительное отношение каждого объекта к целому, например
круговая диаграмма, показывающая процент депутатов каждой партии от
общего количества депутатов.

Выполнение работы:

Для примера нам понадобится база данных с одной таблицей, в

которую запишем курсы доллара и евро к рублю. Откройте MS Access, в
таблице создайте три поля: CDate, CDollar и CEvro. Саму таблицу
назовите Curs. Заполните таблицу произвольными данными, делая по записи
на каждый день, пусть в таблице будет не менее 10 записей. Данные не
 2

обязательно должны соответствовать действительности, но постарайтесь

сделать их похожими на реальный курс доллара США и евро к рублю,
например:

CDate: 10.12.2018
CDollar: 65,21
CEvro: 74,16

Заполнив таблицу, подключите ее к новому проекту, используя

технологию ADO и необходимые компоненты.

Далее на форму установите пустую панель со свойством Align, равным

alTop (она нам потребуется позже). На свободное место формы установите
компонент DBChart с вкладки Data Controls Палитры компонентов.
Свойство Align компонента установите в alClient, чтобы график занял все
оставшееся место формы. Теперь дважды щелкните по графику, чтобы
открыть редактор серий:

Рис. 1. Редактор серий графика

Все отображаемые на графике данные построены с помощью серий –

объектов Series типа TChartSeries, которые являются отображением данных
отдельного реального объекта. Например, если мы используем график
динамики курса доллара и евро к рублю, то серия доллара будет содержать
ряд точек на графике, которые соответствуют стоимости доллара на каждый
день. Для евро будет создана собственная серия. Все настройки серий можно
делать как с помощью этого редактора, так и программно изменяя
 3

свойства графика. В этом примере потребуется сделать две серии: для

доллара и для евро. Ось X будет содержать дату, а ось Y - значение.

Нажмите кнопку Add (добавить серию). У вас появится окно

выбора графика:

Рис. 2. Окно выбора графика.

Помимо выбора графика мы так же можем оставить или снять

"галочку" 3D, которая включает или выключает объемность.
Объемный график смотрится наряднее и больше подходит для всякого рода
докладов или презентаций. Если же придется строить график в строгой
деловой программе, то объемность будет разумней не использовать. Выбор
типа графика или диаграммы зависит от типа отображаемых данных. В
работе собрались чертить кривую, так что нам больше подойдут
типы Line или Fast Line. Выберем первый из них. Как только мы это сделали,
на компоненте DBChart отобразился график со случайными данными. Это
происходит по умолчанию, чтобы легче было производить настройки серии.
В редакторе серий появилась серия Series1. Выделите ее и щелкните по
кнопке Title (заголовок). Измените заголовок на "Доллар":
 4

Рис. 3. Новая серия

Теперь перейдите на вкладку Series на самом верху окна редактора, а

уже на этой вкладке откройте внутреннюю вкладку Data Source. В
выпадающем списке видите Random Values (случайные значения), которые и
обеспечили показ серии на графике. Нам нужно выбрать Dataset, а в
окне Dataset - набор данных:

Рис. 4. Подключение серии к таблице

 5

В списке Labels можно выбрать поле с данными по доллару, а можно

оставить его пустым, этот список используется для отображения меток, если
они установлены. В списке X выберите поле с датой, автоматически должна
установиться "галочка" DateTime. Эти даты будут отображаться по оси X. А
по оси Y отобразим поле с курсом доллара. Как только закроете редактор
кнопкой Close, на форме появится график курса доллара.

Далее перейдите на вкладку Chart и добавьте еще одну серию.

Сделайте все точно также, только отобразите курс евро. Получили график:

Рис. 5. График курсов доллара и евро

Займемся настройкой графика. Вновь откройте редактор графика и

перейдите на вкладку Chart, а в ней на вкладку Titles. В выпадающем списке
видим " Title " (заголовок графика), а в текстовом окне отображается
название графика "TDBChart". Впишите вместо него "Курсы доллара и евро".
Кнопка Font позволяет изменить шрифт заголовка, кнопка Border откроет
окно, в котором можно настроить обрамление. Кнопка Back Color открывает
диалог выбора цвета для фона заголовка, кнопка Pattern также позволяет
настроить фон, придав ему цвет "родителя" - самого графика. Если вы
откроете выпадающий список, то увидите, что помимо " Title " (заголовка)
доступен еще и " Foot " (подвал) - надпись, которая будет выведена внизу.
Напишите там "Пример простого графика".
 6

Самой последней имеется вкладка 3D, на которой можно включить или

выключить объемность графика, а также отрегулировать вращение, наклон
или масштаб. На вкладке Walls (стены) можно отрегулировать "стены" осей,
на рисунке 5 они выделяются желтым и белым цветами.

Вкладка Paging позволяет настроить многостраничные графики, а

вкладка Panel - задать параметры фона. Интересны здесь параметры панели
Gradient, позволяющие задать градиентную заливку. При этом фон будет
плавно переходить из одного цвета в другой.

Вкладка Legend позволяет настроить легенду графика, на рисунке

видите ее в правой части графика с надписями "Доллар" и "Евро".

Перейдем на вкладку Axis (оси). Здесь можно сделать множество

настроек осей. Вначале в левой части окна в разделе Axis нужно выбрать ось.
Мы выберем Left, то есть, ось Y. Правее находится дополнительное окно со
своими собственными вкладками, причем открыта вкладка Scales (шкалы):

Рис. 6. Настройка осей графика

Здесь снимем "галочку" Automatic, которая автоматически

устанавливает размер шкалы. В большинстве случаев этого не требуется, но в
нашей работе получили относительно ровные линии, причем одна из них в
нижней, а другая - в верхней части, что не делает график красивее. Итак,
снимите эту галочку, а затем с помощью кнопок Change немного увеличьте
максимальное значение, и немного уменьшите минимальное. В результате
кривые графика сдвинутся к середине.
 7

Далее можете перейти на внутреннюю вкладку Title, где напишите

"Курс к рублю". Эта надпись является заголовком оси Y. Больше, пожалуй, с
этой осью делать ничего не нужно. Зато ось X у нас вместо дат показывает
значения. Исправим это. В группе радиокнопок Axisвыберем Bottom (нижняя
ось), и перейдем на внутреннюю вкладку Labels. В разделе Style вместо Auto
выберем Value, что изменит надписи к точкам оси X: вместо назначаемых
автоматически, мы четко указали, что нужно взять значение поля, то есть,
дату. В результате этих манипуляций получим уже достаточно
привлекательный график:

Рис. 7. График курсов валют

Сохраните проект, скомпилируйте и загрузите полученную программу.

Посмотрим, что умеет делать этот график в рабочем приложении. Прежде
всего, если вы выделите какой то участок графика левой кнопкой мыши
слева-направо и сверху-вниз, выделенный фрагмент увеличится во все
окно графика. Ухватившись за график правой кнопкой мыши, его можно
будет перемещать. Затем можете сделать обратное выделение левой кнопкой
любого участка графика снизу-вверх и справа-налево, и масштаб графика
восстановится.
 8

Изменить масштаб программно можно с помощью

свойства Zoom объекта View3DOptions графика:

DBChart1.View3DOptions.Zoom:= 100;

Это целое число, содержащее процент масштаба. Значение 100

соответствует нормальному масштабу. Попробуйте изменять масштаб от 1 до
500.

Печать графика

Посмотреть, как реализована печать графика с предварительным

просмотром можно уже на этапе конструирования, в редакторе серий. Для
этого на вкладке Chart редактора серий перейдите на внутреннюю
вкладку General и нажмите кнопку Print Preview. Получите такое окно:

Рис. 8. Окно предварительного просмотра перед печатью

В этом окне можно указать используемый принтер, если он установлен

на компьютере, направление печати (книжный или альбомный вариант),
установить поля, произвести дополнительную настройку и непосредственно
дать команду на печать. Но конечный пользователь не имеет доступа к
редактору серий, поэтому нам нужно вывести это окно программным путем.
 9

Для этого установите кнопку на верхнюю панель, которую оставили

специально для этого. На кнопке напишите "Печать". Щелкните по ней
дважды, чтобы сгенерировать обработчик нажатия. Однако, прежде чем
вписывать в обработчик код, нам необходимо подключить модуль Teeprevi в
верхний раздел uses, потому что именно в этом модуле описана процедура
ChartPreview(), вызывающая данное окно. Напомню, что для этого нужно
после последнего подключенного модуля поставить запятую, после чего
вписать

Teeprevi

а уже после этого модуля поставить точку с запятой. Код процедуры

нажатия на кнопку будет содержать следующую строку:

ChartPreview(Form1, DBChart1);

Как видим, процедура ChartPreview() имеет два параметра: форму,

содержащую график, и компонент DBChart (если вы изменили имена формы
или графика, установленные по умолчанию, то и здесь нужно будет указать
их). Сохраните проект, скомпилируйте его и попробуйте нажать на кнопку. У
вас должно выйти окно печати.

Основные методы и свойства DBChart

На вкладке General, где мы вызывали окно печати, под кнопкой Print

Preview имеется кнопка Export. Эта кнопка выводит следующее диалоговое
окно:

Рис. 9. Окно экспорта графика

График (диаграмму) можно экспортировать в буфер обмена или

графический файл одного из четырех форматов. Формат BMP наиболее
универсален, но файл получается большого размера. WMF - формат
метафайлов Windows, который обеспечивает хорошее качество изображения
при сравнительно небольшом размере файла. EMF - такой же формат, как
 10

и WMF, но более новый, используемый в 32-разрядных Windows.

Последний TEE формат - специализированный для TDBChart(TChart)
формат, который сохраняет не только сам график, но и все его настройки, что
в дальнейшем позволяет загрузить ранее сохраненный график в компонент
TDBChart.

Сохранение графика программным путем осуществляется следующими

методами:

Procedure SaveToBitmapFile(const Filename: String);

Здесь график сохраняется в указанный в параметре файл формата BMP.

Procedure SaveToMetafile(const Filename: String);

График сохраняется в WMF формат.

Procedure SaveToMetafileEnh(const Filename: String);

График сохраняется в EMF формат.

Procedure SaveChartToFile(AChart:TCustomChart; const AName:

String);

График сохраняется в специализированный формат. Первым

параметром указывается сохраняемый график. Если будете использовать эту
процедуру, не забудьте в раздел uses добавить модуль Teestore, где описан
этот метод. Если вы сохранили график или диаграмму таким образом, то в
дальнейшем можно и загрузить его методом

Procedure LoadChartFromFile(AChart:TCustomChart; const AName:

String);

Следующая группа свойств позволяет вращать трехмерный график,

изменять его масштаб и угол наклона, что позволяет нам в программе
установить богатый инструментарий для пользователя, с помощью которого
он сможет изменять вид графика. При разработке программы эти же
инструменты доступны на вкладке Chart и на внутренней вкладке 3D.
Многие возможности управления графиком зависят от того, включено ли
свойство Orthogonal. При включенной ортогональности многие свойства
становятся недоступными. Изменить состояние этого свойства можно
просто:

DBChart1.View3DOptions.Orthogonal:= False;

Изменить масштаб можно, присвоив свойству Zoom целое число:

 11

DBChart1.View3DOptions.Zoom:= 300;

Напомню, что нормальным масштабом является число 100.

Пользователю можно дать возможность изменять масштаб от 1 до 500, еще
больший масштаб будет уже неудобным.

Свойство Rotation отвечает за горизонтальное вращение графика, и

может быть целым числом от 0 до 360, это число указывает количество
градусов:

DBChart1.View3DOptions.Rotation:= 100;

Свойство Tilt отвечает за вертикальное вращение и также

содержит целое число от 0 до 360 (градусов):

DBChart1.View3DOptions.Tilt:= 120;

Свойство Elevation содержит целое число, указывающее

наклон графика. Число может быть также от 0 до 360:

DBChart1.View3DOptions.Elevation:= 50;

Свойство Perspective указывает соответственно, на

перспективу графика. Это число удобней делать от 0 до 100:

DBChart1.View3DOptions.Perspective:= 30;

Добавить в проект новую форму для настройки графика, и с помощью

события onChange ползунков TrackBar изменять соответствующие свойства:
 12

Рис. 10. Окно настройки графика

Компонент TrackBar хранит значение в свойстве Position, а

минимальное и максимальное значение можно установить при
проектировании в свойствах Min и Max. Чтобы из главного окна можно было
вызывать окно с настройками, а из окна настроек менять параметры графика,
оба модуля придется подключить друг к другу командой File ->Use Unit.

Если ортогональность будет включена, пользователь сможет менять

только масштаб графика, попытки изменить параметры вида графика ни к
чему не приведут.

Студент должен знать: Основные положения теории баз данных,

хранилищ данных, баз знаний, создание базы данных, свойства и методы
компонента DBChart
Студент должен уметь: Создавать объекты баз данных в современных
системах управления базами данных, разработать проект с построением
графиков и диаграмм.