Delphi. Программирование с использованием средств для отображения графической информации
Цель лабораторной работы: изучить возможности построения графиков с помощью компонента отображения графической информации TСhart. Написать и отладить программу построения на экране графика заданной функции.
Как строится график с помощью компонента TChart
Обычно результаты расчетов представляются в виде графиков и диаграмм. Система DELPHI имеет мощный пакет стандартных программ вывода на экран и редактирования графической информации, который реализуется с помощью визуально отображаемого на форме компонента TChart (рис. 8.1).
 |
Построение графика (диаграммы) производится после вычисления таблицы значений функции y=f(x) на интервале [Xmin, Xmax]с заданным шагом. Полученная таблица передается в специальный двумерный массив SeriesK (K – номер графика) компонента TСhart с помощью метода Add. Компонент PChart осуществляет всю работу по отображению графиков, переданных в объект SeriesK: строит и размечает оси, рисует координатную сетку, подписывает название осей и самого графика, отображает переданную таблицу в виде всевозможных графиков или диаграмм. При необходимости, с помощью встроенного редактора EditingChart компоненту TСhart передаются данные о толщине, стиле и цвете линий, параметрах шрифта подписей, шагах разметки координатной сетки и другие настройки. В процессе работы программы изменение параметров возможно через обращение к соответствующим свойствам компонента TChart. Так, например, свойство Chart1.BottomAxis содержит значение максимального предела нижней оси графика и при его изменении во время работы программы автоматически изменяется изображение графика (см. нижеприведенную программу).
Пример написания программы
Задание: составить программу, отображающую графики функций sin(x) и cos(x) на интервале [Xmin, Xmax]. Предусмотреть возможность изменения разметки координатных осей, а также шага построения таблицы.
Настройка формы
Панель диалога программы организуется в виде, представленном на рис.8.1.
Для ввода исходных данных используются окна TEdit. Компонент TChart вводится в форму путем нажатия пиктограммы 
в меню компонентов Standard.
Работа с компонентом TChart
 |
Для изменения параметров компонента TChart необходимо дважды щелкнуть по нему мышью в окне формы. Появится окно редактирования EditingChat1 ( рис. 8.2). Для создания нового объекта Series1 щелкнуть по кнопке Add на странице Series. В появившемся диалоговом окне TeeChart Gallery выбрать пиктограмму с надписью Line (график выводится в виде линий). Если нет необходимости представления графика в трехмерном виде, отключить независимый переключатель 3D. После нажатия на кнопку OK появится новая серия с название Series1. Для изменения названия нажать кнопку Title… В появившемся однострочном редакторе набрать имя отображаемой функции — “sin(x)”. Аналогичным образом создать объект Series2 для функции cos(x).
Для изменения надписи над графиком на странице Titles в многострочном редакторе набрать: “Графики функций”.
Для разметки осей выбрать страницу Axis и научиться устанавливать параметры настройки осей.
Нажимая различные кнопки меню, познакомиться с другими возможностями EditingChat.
Написание программы обработки события создания формы
В данном месте программы устанавливаются начальные пределы и шаг разметки координатных осей. Когда свойство Chart1.BottomAxis. Automatic имеет значения False, автоматическая установка параметров осей не работает.
Написание программ обработки событий нажатия на кнопки
Процедура TForm1.Button1Click обрабатывает нажатие кнопки “Установить оси”. Процедура TForm1.Button2Click обрабатывает нажатие кнопки “Построить график”. Для добавления координат точек (X, Y) из таблицы значений в двумерный массив объекта SeriesK используется процедура Series1.AddXY(Const AXValue, AYValue: Double; Const AXLabel: String; AColor: TColor) : Longint;, где AXValue, AYValue – координаты точки по осям X и Y; AXLabel может принимать значение ‘’; AСolor задает цвет линий (если равен clTeeColor, то принимается цвет, определенный при проектировании формы).
Текст программы имеет вид:
Windows, Messages, SysUtils, Classes, Graphics, Controls, Forms, Dialogs,
Simple steps to create Delphi chart
This Delphi graphic tutorial demonstrates how to create a simple charts using TChart component.
Bookmark:
Simple steps to create Delphi chart
Use following simple steps to start your first chart using Delphi TChart component:
- Put chart component on the form
- Double click on chart, then you will see chart editing dialog box.
- Click add button in series tab sheet.
- Select the chart style from the list (Line, Bar, Pie ..)
Put following code to add data into the chart
Download This Delphi Tutorials.
Download materials for this article (Delphi — Tutorials)
delphi-chart.zip
File size: 5 KB, File type: zip
Total downloads: 7692, Upload date: February 11 — 2009
YES, I accept the Terms and Conditions and I acknowledge that I have reviewed and understood the agreement.
Luis :: February 20-2009 :: 01:31 AM
Hello, Would you please give me some hints on how to allow a user to choose a chart style, I mean I need a code for example i can select combobox and type 3 options to plot a chart.
Sibusiso :: March 10-2009 :: 01:34 PM
How to make the chart to be visible in intraweb
Widakdov :: November 09-2009 :: 08:49 AM
Dear digital coding ,
How to create a simulated chart using delphi
meng :: April 12-2010 :: 04:29 AM
very good very good very good very good.
Narcís Calvet :: April 12-2010 :: 03:06 PM
This code can be simpler:
You can even replace Chart1[0] (first series in the SeriesList collection in the chart) for Series1, for example:
Series1.AddXY(10, 20);
Series1.AddXY(15, 50);
Series1.AddXY(20, 30);
Series1.AddXY(25, 70);
Series1.AddXY(30, 10);
Series1.AddXY(35, 50);
Series1.AddXY(40, 45);
Series1.AddXY(45, 10);
carol paola galvis :: April 26-2010 :: 03:33 PM
si gracias por el tutorial
Piet :: December 02-2010 :: 10:59 PM
Is it also possible to create a chart, adding a label as a marker to specific data points but not showing the label on the horizontal axes?
For instance:
X: 0 to 100
Y: random
Show X-values on BottomAxis, Y-Values on VertAxis and three labels (markers) on X=23, X=57, X=71
stephen :: January 08-2011 :: 11:51 PM
I have a problem where AddXY doesn’t plot the points during an iteration but as soon the iterations arte finished it blurts out everything. Stepping into the program all the recording of the data at each iteration is fine i.e. X and Y.
so it seems like a refresh. repaint, update issue? i’ve tried using for loops to slow things down and use the chart1.refresh etc commands but no joy. I need real time monitering of X and Y. Have you any ideas how i could do this?
it would be appreciated,
c.g :: February 18-2011 :: 09:30 PM
I am using delphi 3 and cannot get your code to work at all, any suggestions. Thanks
Tchart delphi как построить график
На этом шаге мы рассмотрим компонент TChart .
Компонент TChart является контейнером объектов Series типа TChartSeries — серий данных, характеризующихся различными стилями отображения. Каждый компонент может включать несколько серий. При отображении графика каждая серия соответствует одной кривой на графике. При отображении диаграммы для некоторых видов диаграмм можно наложить друг на друга несколько различных серий. В этом случае можно задать для одного компонента TChart несколько серий одинаковых данных с разными типами диаграммы. Делая в каждый момент времени активной одну из них, можно предоставить пользователю выбор типа диаграммы, отображающей интересующие его данные.
Создание графика
Для того чтобы создать график необходимо разместить компонент TChart на форме или воспользоваться мастером. Если использовать непосредственное размещение на форме, то будет создана диаграмма без использования базы данных. При создании диаграммы с помощью мастера можно применить режим Data Base Chart (Использовать базу данных) . Мастер запускается командой File | New |Other , после чего в появившемся окне необходимо выбрать вкладку Business , на ней — пиктограмму TeeChartWizard (Мастер диаграмм) , затем разработчик может сделать предварительные настройки. Сначала выбирается один из переключателей: Data Base Chart (Использовать базу данных) или Non Data Base Chart (Не использовать базу данных) . Затем выбирается внешний вид диаграммы: она может быть двухмерной или трехмерной, что определяется переключателем 2D/3D . Далее по желанию устанавливаются или сбрасываются флажки. Флажок Show Legend (отображать условные обозначения) определяет наличие дополнительной панели, на которой указывается соответствие цветов фрагментов диаграммы указанным значениям. Флажок Show Marks (Отображать метки) включает небольшие желтые подсказки каждого фрагмента диаграммы. На этом создание диаграммы с помощью мастера заканчивается. После щелчка на кнопке Finish в дизайнере форм появится новая форма, на которой будет расположен объект Chart . Если был выбран режим Non Data Base Chart , то он будет заполнен набором случайно сгенерированных значений, которые в дальнейшем заменятся на необходимые данные. Таким образом в форме будет создана заготовка (рис.1).
Рис.1.Заготовка графика в форме
После двойного щелчка мыши по этой заготовке, будет произведен переход в редактор графика . В среде этого редактора можно установить свойства графика и его серий. Содержимое редактора графика представляет собой табулированный блокнот. Для нового графика первой всегда показывается закладка Chart и для страницы Chart — закладка Series (рис.2).
Рис.2. Редактор графика
Каждая из закладок на странице Chart предназначена для установки параметров того или иного компонента графика:
Series — содержит серии графика . Серией называется набор точек графика . На графике серии соответствует отдельная линия или ряд столбцов. Если в графике несколько серий, то будет визуализировано несколько линий или рядов столбцов.
General — устанавливает общие параметры графика , такие как объемность графика, отступы от краев, возможность увеличения ( Zoom ) и др.
Axis — устанавливает свойства осей (рис.3.).
Рис.3. Редактор графика — окно установки свойств осей
В области ShowAxis определяется, для какой оси устанавливаются параметры — левой, правой, верхней или нижней. На странице, определяемой закладкой Scales , устанавливаются свойства масштаба значений по оси. Automatic устанавливает автоматическое масштабирование данных по оси — минимум и максимум вычисляются динамически, исходя из текущих значений серии. При отмене автоматического масштабирования можно установить автоматическое масштабирование минимального ( Minimum ) или максимального ( Maximum ) значения (отметка Auto ). Для установки значения максимума и (или) минимума вручную следует нажать соответствующую кнопку Change . Шаг масштаба по оси выбирается автоматически, если в Desired Increment установлено значение 0 . Установить фиксированное значение шага можно, нажав кнопку Change . Закладка Title позволяет установить текст заголовка по оси, угол расположения заготовки и шрифт, которым заголовок выводится. Закладка Labels задает параметры меток для оси. Закладка Tiks устанавливает параметры самой линии оси.
Titles — определяет заголовок графика, шрифт, выравнивание и др.
Legend — задает параметры легенды. Легенда — это область графика, где приводится информация о графике . Легенда служит для пояснения графика.
Panel — определяет параметры панели, на которой располагается график.
Paging — устанавливает параметры многостраничного графика.
Walls — задает «стенку» графика.
3D — дает возможность изменить внешний вид диаграммы: наклон, сдвиг, толщину и т.д.
Добавление серии в график
На графике одновременно может располагаться несколько серий. В большинстве случаев их значения строятся по одинаковому закону и две и более серий одновременно показываются в графике для сравнения.
Чтобы добавить в график серию, следует на странице Chart , (закладка Series ) нажать кнопку Add . После этого появится окно выбора типа серии (рис.4.).
Рис.4.Редактор графика — окно выбора типа серии
После выбора типа серии в график добавляется компонент, дочерний от базового типа TChartSeries — TLineSeries, TBarSeries, TPieSeries и т.д. Для примера выберем серию типа Line и нажмем Ok . В окне страницы Chart (закладка Series ) будет показана серия (рис.5.).
Рис.5.Редактор графика — список серии графика
Кнопка Add может использоваться для добавления других серий, кнопка Delete — для удаления текущей серии. После нажатия кнопки Title можно определить заголовок серии, кнопки Clone -создать новый экземпляр такой же серии в этом же графике, кнопки Change — изменить тип текущей серии.
Перейдем с закладки Chart на закладку Series . На этой странице представлен блокнот с закладками Format, General, Marks, Data Source . Рассмотрим свойства серии, которые можно установить на страницах, соответствующих этим закладкам.
Главные свойства серии можно определить на странице Data Source . На ней определяется источник данных для серии. Выпадающий список ниже закладки позволяет определить тип источника данных для серии:
No Data — серии не назначается источник данных. Заготовленный шаблон серии может в разное время использоваться для показа данных из разных источников.
Random Values — набор случайных чисел, может быть полезен при формировании заготовки серии.
Function — функция ( Copy, Average, Low, High, Divide, Multiply, Subtract, Add ) — служит для построения графиков на основании данных в двух или более сериях.
Свойства компонента TChart :
- pmNone — прокрутка запрещена;
- pmHorizontal — прокрутка разрешена в горизонтальном направлении;
- pmVertical — прокрутка разрешена в вертикальном направлении;
- pmBoth — прокрутка разрешена в обоих направлениях.
Для задания отображаемых значений используются методы серии Series . Основные:
Метод Clear очищает серию от занесенных ранее данных.
Так же компонент TChart имеет метод Print , обеспечивающий печать. Предварительно может быть выполнен метод PrintPortrait , задающий книжную (вертикальную) ориентацию бумаги, или метод PrintLandscape , задающий альбомную (горизонтальную) ориентацию. Масштабировать размер печатаемого графика можно, вызвав предварительно метод PrintRect :
Приведем пример: обработчик события OnActivate формы создает график, показанный на рис.6.:
Рис.6.Пример использования компонента TChart
Таким образом компонент TChart предназначен для графического представления числовых данных. Компонент содержит большое количество специфичных свойств, событий и методов. Впервые компонент появился в версии 3.