Sign in Join
Wiki copytemporary

TAChart Tutorial: Getting started/ru: what changed

Revision 1 to 2. Removed lines have a minus sign; added lines have a plus sign.

OldNewLine
11## Введение
22
33![](/wiki-images/2/2f/Tachart_getting_started_step6.png)
44
55Если вам хочется добавить график или диаграмму на форму, вам надо ознакомиться с [[TAChart]]. Это стандартный пакет Lazarus для рисования графиков и диаграмм.
66
77В этом руководстве мы нарисуем с помощью TAChart несколько элементарных математических функций. Мы создадим диаграмму с тремя рядами данных (line series) для функций
88
99- y=cos(x),
1010- y=sin(x), и
1111- y=cos(x)*sin(x).
1212
1313Возможно здесь стоит пояснить слова "series" и "chart" (диаграмма): вся диаграмма в целом — это "chart", а каждая из функций будет отображаться в виде кривой, называемой "series". Мы соединим точки линейными отрезками и поэтому будем использовать название "line series". TAChart, конечно, позволяет использовать много других типов данных, например, столбики (bar series), площади (area series), круговые диаграммы (pie series), или даже такие продвинутые типы как сплайны или fit series.
1414
1515## Что нужно?
1616
1717Это руководство будет очень элементарным. Конечно, вам необходимы базовые знания языка [[Object Pascal]] и Lazarus [[IDE]].
1818
1919TAChart включён в Lazarus, так что нет необходимости искать этот пакет где-то в Интернете. Однако не используйте слишком старые версии Lazarus, так как TAChart активно развивается и некоторые особенности могут меняться от версии к версии.
2020
2121Лучше всего изучите это руководство шаг за шагом. Но если хотите, можете использовать [[Source code|исходный код]] завершённого проекта в конце этой статьи.
2222
2323## Новый проект
2424
2525![](/wiki-images/9/95/TAChart_component_palette.png)
2626
2727Для начала создадим в Lazarus новый проект и выберем в [[Component Palette|палитре компонентов]] страницу [[Chart tab|"Chart"]]. Кликнем по самой левой иконке, компоненту [[TChart]], и добавим его на форму. Увидите пустую диаграмму со стандартными осями X и Y.
2828
2929![](/wiki-images/6/63/TAChart_GettingStarted_Step1.png)
3030
3131## Добавление серий
3232
3333Теперь давайте добавим серию. Для этого дважды кликнем по нашей диаграмме (или кликнем правой клавишей и выберем "Редактор диаграмм" в контекстном меню). Появится редактор серий TAChart. Он ещё пуст, но когда нажмём "Добавить", то увидим меню со всеми типами серий доступных в пакете TAChart. Выберем "График(line series)". Повторим дважды, чтобы создать три графика, приданных этой диаграмме. Они ещё не отображаются на диаграмме, потому что ещё не содержат данных. Нет данных — нет отображения. Мы поправим это за минуту.
3434
3535![](/wiki-images/6/6f/TAChart_GettingStarted_Step1a.png)
3636
3737Перед тем, как мы это сделаем, посмотрим на дерево инспектора объектов. TAChart использует довольно сложную архитектуру классов и контейнеров, поэтому важно понимать дерево объектов. В нашем проекте мы видим компонент TChart и его потомков: три графика (line series) и AxisList с левой(Left) и нижней (Bottom) осями тоже в качестве потомков. Имена графиков (series) созданы в соответствии с шаблоном `Chart<number><SeriesType><Number>`.
3838
3939![](/wiki-images/c/ce/Tachart_getting_started_object_tree.png)
4040
4141Почему бы нам не дать им более понятные имена, например, `SinSeries`, `CosSeries`, and `SinCosSeries`? Для этого кликните на каждой серии и поменяйте `Name` в соответствующем поле инспектора объектов.
4242
4343## Добавление данных
4444
4545Теперь пора добавить данные. Простейший способ — создать данные вместе с формой, т.е. мы пишем обработчик для события формы `OnCreate`. Конечно, в «реальном» проекте, вы добавите данные по-другому, например, после нажатия кнопки, которое может запустить вычисления или чтение данных из файла.
4646
4747``` pascal
4848procedure TForm1.FormCreate(Sender: TObject);
4949const
5050 N = 100;
5151 MIN = -10;
5252 MAX = 10;
5353var
5454 i: Integer;
5555 x: Double;
5656begin
5757 for i:=0 to N-1 do begin
5858 x := MIN + (MAX - MIN) * i /(N - 1);
5959 SinSeries.AddXY(x, sin(x));
6060 CosSeries.AddXY(x, cos(x));
6161 SinCosSeries.AddXY(x, sin(x)*cos(x));
6262 end;
6363end;
6464```
6565
6666Эта [[Procedure|процедура]] создаёт 100 точек с данными на каждую серию. Значения x вычисляются эквидистантными между `MIN` и `MAX`, т.е. -10 and 10. Важными строками являются вызовы [[Method|метода]]`AddXY` по всем сериям. Этот метод берёт координаты x и y каждой точки и добавляет их во внутренний список. Существуют также перегруженные версии этих методов где можно передать текстовую метку для каждой точки, а также индивидуальный цвет, но нам здесь не нужна эта функция.
6767
6868Вышеупомянутый список — так называемый исходник диаграммы (chart source) — это класс [[Class|класс]], который обеспечивает данные для построения диаграммы. Вы можете использовать встроенный источник данных (chart source), или связать серии с самостоятельным источником. На палитре компонентов есть много источников данных, например
6969
7070- `TListChartSource` запоминает данные в списке (этот тип используется нашими сериями по умолчанию)
7171- `TDBChartSource` обращается к записям и полям в базе данных
7272- `TUserDefinedChartSource` даёт очень общий доступ к данным, хранимым, например, в массиве записей, определённых пользователем
7373- `TCalculatedChartSource` позволяет анализировать одну серию и отображать результаты в другой серии.
7474
7575Но достаточно об источниках диаграммы — встроенных источников достаточно для этого ознакомительного проекта.
7676
7777![](/wiki-images/b/b8/Tachart_getting_started_step2.png)
7878
7979Скомпилируем программу. Мы видим три кривых, и ось x автоматически покрывает наш диапазон данных между -10 и 10. Ну не слишком плохо, но далеко от совершенства: диаграмма очень запутанная, нельзя различить индивидуальные линии, и трудно сказать какие серии какой функции принадлежат.
8080
8181## Форматирование серий
8282
8383Почему бы не изменить цвет каждой линии? Для этого нужно найти серию в дереве объектов и в инспекторе объектов изменить [[Property|свойство]] `SeriesColor` на желаемый вами — `SeriesColor` это цвет линии соединяющей точки.
8484
8585После перекомпиляции увидите окрашенные линии. Но пока мы не можем различить разные функции. Нам нужна легенда.
8686
8787## Добавление легенды
8888
8989Выделите диаграмму и в инспекторе объектов прокрутите до пункта `Legend`, затем откройте вложенные свойства. В конце есть свойство `Visible`, которое по умолчанию `false` — установите его `true` и перекомпилируйте.
9090
9191![](/wiki-images/2/2e/Tachart_getting_started_step3.png)
9292
9393Вот это уже лучше. Не хватает только пояснительного текста к сериям, такого как `y = sin(x)`. Для этой цели каждая серия имеет свойство `Title` — текст, который отобразится в легенде вместе с символом соответствующей серии. Поэтому придётся заново пройтись по всем сериям и установить свойство `Title` в `y=sin(x)`, `y=cos(x)`, and `y=sin(x)*cos(x)` соответственно.
9494
9595![](/wiki-images/5/5f/Tachart_getting_started_step4.png) ![](/wiki-images/2/20/Tachart_getting_started_step4a.png)
9696
9797Теперь после компиляции диаграмма почти идеальна. Почти — потому что легенда довольно велика и диаграмма оказалась втиснутой в оставшееся пространство. Конечно мы могли бы увеличить размер формы. А не можем ли мы поместить легенду под диаграммой? Без проблем: возвращаемся к свойству диаграммы `Legend` и устанавливаем `Alignment` в `laBottomCenter`. Также надо установить `ColumnCount` значение `3`, иначе элементы легенды будут расположены не в линию, а столбцом.
9898
9999![](/wiki-images/3/37/Tachart_getting_started_step5.png)
100100
101101Ой! — третий элемент легенды не влез из-за недостаточной ширины окна. Выравняйте диаграмму по `alClient` и немного увеличьте ширину окна.
102102
103103## Тонкая настройка
104104
105105Надо улучшить ещё несколько вещей: Оси должны иметь названия, типа "ось x" и "ось y", соответственно, а также должен быть заголовок сверху диаграммы.
106106
107107Для поименования оси x выберем в дереве объектов пункт `Bottom` дочернего компонента TChart — AxisList, или перейдём к `BottomAxis` в инспекторе объектов. Во вложенных свойствах найдём `Title`, который снова имеет вложенные свойства. Текст в поле `Caption` будет заголовком вверху диаграммы. Не забудьте установить свойство `Visible` в `true`. Можете также установить стиль шрифта заголовка жирным — это свойство находится под `LabelFont`. То же самое повторим с `LeftAxis`.
108108
109109Та же самая процедура может быть использована для установки заголовка диаграммы: прокрутим до свойства диаграммы `Title`, введём заголовок в поле `Text` (здесь можете даже использовать многострочный текст), и снова установим свойство `Visible` в `true`.
110110
111111И наконец, если вы предпочитаете использовать белый фон области диаграммы, он изменяется свойством `BackColor` компонента TChart. А если сетка должна быть менее заметной, то она лучше будет выглядеть цветом `clSilver`. Используем свойства LeftAxis и BottomAxis `Grid.Color` для их изменения.
112112
113113## Готово!
114114
115115В итоге наша диаграмма выглядит вот так. Мило, да? И это было совсем не трудно.
116116
117117Если хотите узнать побольше о TAChart, посмотрите официальную [[TAChart documentation/ru|документацию по TAChart]], и изучите некоторые из многих демо-примеров, которые идут вместе с TAChart. Они находятся в папке `components\tachart\demo` дистрибутива Lazarus.
118118
119119![](/wiki-images/2/2f/Tachart_getting_started_step6.png)
120120
121121## Исходный код
122122
123123Исходный код этого учебного проекта находится в папке *tutorials/getting_started* дистрибутива TAChart.
124124
125125### Файл проекта (Project file)
126126
127127``` pascal
128128program project1;
129129
130130{$mode objfpc}{$H+}
131131
132132uses
133133 {$IFDEF UNIX}{$IFDEF UseCThreads}
134134 cthreads,
135135 {$ENDIF}{$ENDIF}
136136 Interfaces, // this includes the LCL widgetset
137137 Forms, Unit1, tachartlazaruspkg
138138 { you can add units after this };
139139
140140{$R *.res}
141141
142142begin
143143 RequireDerivedFormResource := True;
144144 Application.Initialize;
145145 Application.CreateForm(TForm1, Form1);
146146 Application.Run;
147147end.
148148```
149149
150150### Unit1.pas
151151
152152``` pascal
153153unit Unit1;
154154
155155{$mode objfpc}{$H+}
156156
157157interface
158158
159159uses
160160 Classes, SysUtils, FileUtil, TAGraph, TASeries, Forms, Controls, Graphics,
161161 Dialogs;
162162
163163type
164164
165165 { TForm1 }
166166
167167 TForm1 = class(TForm)
168168 Chart1: TChart;
169169 SinSeries: TLineSeries;
170170 CosSeries: TLineSeries;
171171 SinCosSeries: TLineSeries;
172172 procedure FormCreate(Sender: TObject);
173173 private
174174 { private declarations }
175175 public
176176 { public declarations }
177177 end;
178178
179179var
180180 Form1: TForm1;
181181
182182implementation
183183
184184{$R *.lfm}
185185
186186{ TForm1 }
187187
188188procedure TForm1.FormCreate(Sender: TObject);
189189const
190190 N = 100;
191191 MIN = -10;
192192 MAX = 10;
193193var
194194 i: Integer;
195195 x: Double;
196196begin
197197 for i:=0 to N - 1 do begin
198198 x := MIN + (MAX - MIN) * i / (N - 1);
199199 SinSeries.AddXY(x, sin(x));
200200 CosSeries.AddXY(x, cos(x));
201201 SinCosSeries.AddXY(x, sin(x)*cos(x));
202202 end;
203203
204204end;
205205
206206end.
207207```
208208
209209### Файл формы Unit.lfm
210210
211-``` pascal
211+``` lfm
212212object Form1: TForm1
213213 Left = 14
214214 Height = 244
215215 Top = 137
216216 Width = 347
217217 Caption = 'Form1'
218218 ClientHeight = 244
219219 ClientWidth = 347
220220 OnCreate = FormCreate
221221 LCLVersion = '1.1'
222222 object Chart1: TChart
223223 Left = 0
224224 Height = 244
225225 Top = 0
226226 Width = 347
227227 AxisList = <
228228 item
229229 Grid.Color = clSilver
230230 Minors = <>
231231 Title.LabelFont.Orientation = 900
232232 Title.LabelFont.Style = [fsBold]
233233 Title.Visible = True
234234 Title.Caption = 'y axis'
235235 end
236236 item
237237 Grid.Color = clSilver
238238 Alignment = calBottom
239239 Minors = <>
240240 Title.LabelFont.Style = [fsBold]
241241 Title.Visible = True
242242 Title.Caption = 'x axis'
243243 end>
244244 BackColor = clWhite
245245 Foot.Brush.Color = clBtnFace
246246 Foot.Font.Color = clBlue
247247 Legend.Alignment = laBottomCenter
248248 Legend.ColumnCount = 3
249249 Legend.Visible = True
250250 Title.Brush.Color = clBtnFace
251251 Title.Font.Color = clBlue
252252 Title.Font.Style = [fsBold]
253253 Title.Text.Strings = (
254254 'My first chart'
255255 )
256256 Title.Visible = True
257257 Align = alClient
258258 ParentColor = False
259259 object SinSeries: TLineSeries
260260 Title = 'y=sin(x)'
261261 LinePen.Color = clRed
262262 end
263263 object CosSeries: TLineSeries
264264 Title = 'y=cos(x)'
265265 LinePen.Color = clBlue
266266 end
267267 object SinCosSeries: TLineSeries
268268 Title = 'y=sin(x)*cos(x)'
269269 LinePen.Color = clGreen
270270 end
271271 end
272272end
273273```
274274
275275---
276276*From the Free Pascal wiki, page "TAChart Tutorial: Getting started/ru", as it stood on 2023-05-31 after a change by AMXS52, out of the wiki's dump of 2024-05-26. Copyright stays with the author who wrote it, according to the old wiki's [[Licensing]] page. If you have concerns about this material, [message the admin](/wiki-contact).*

Back to history