TAChart Tutorial: Getting started/ja: what changed

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

Old	New		Line
1	1		## はじめに
2	2
3	3		![](/wiki-images/2/2f/Tachart_getting_started_step6.png)
4	4
5	5		Lazarusフォームにグラフ等を追加したい場合は、[[TAChart\|TAChartを]]見てください。これは、グラフ等を描画するための標準のLazarusパッケージです。
6	6
7	7		このチュートリアルでは、TAChartによっていくつかの基本的な数学関数を描画します。関数の3つの折れ線グラフを作成します。
8	8
9	9		- y=cos(x),
10	10		- y=sin(x), and
11	11		- y=cos(x)*sin(x).
12	12
13	13		おそらく、ここで「series」と「chart」という言葉を詳しく説明する必要があるかもしれません。グラフの図全体が「chart」であり、各関数グラフは「series」と呼ばれる曲線（直線）として表示されます。（データの各点を線で接続する）折れ線グラフを使用するため、「LineSeries」を使用します。もちろん、TAChartでは、棒グラフ、面グラフ、円グラフ、またはスプライン曲線やフィット曲線などの高度なタイプなど、他の多くのタイプの曲線（直線）を使用できます。
14	14
15	15		## 必要なもの
16	16
17	17		このガイドは非常に基本的なものになります。もちろん、 [[Object Pascal]] 言語とLazarus [[IDE\|IDEを]]使用するための基本的な知識は必要です。
18	18
19	19		TAChartパッケージはLazarusに含まれているので、インターネット上で探す必要はありません。
20	20
21		-	`ただし、TAChartは活発に開発されており、一部の機能はバージョンごとに変更される可能性があるため、あまり古いバージョンのLazarusは使用しないでください。`
	21	+	```text
	22	+	ただし、TAChartは活発に開発されており、一部の機能はバージョンごとに変更される可能性があるため、あまり古いバージョンのLazarusは使用しないでください。
	23	+	```
22	24
23	25		このチュートリアルは順番に段階を追って実行するのが最適です。ただし、必要に応じて、この記事の最後にある完成したプロジェクトのソースコード [[Source code\|source code]] を使用することもできます。
24	26
25	27		## 新規プロジェクト（Chartの追加）
26	28
27	29		![](/wiki-images/9/95/TAChart_component_palette.png)
28	30
29	31		まず、Lazarusで新しいプロジェクトを作成し、コンポーネントパレット [[Component Palette\|component palette]] で [[Chart tab\|"Chart"タブのページを]]選択します。一番左のアイコンである [[TChart]] コンポーネントをクリックして、フォームに追加します。標準的なx軸とy軸を持つ空の図が表示されます。
30	32
31	33		![](/wiki-images/6/63/TAChart_GettingStarted_Step1.png)
32	34
33	35		## グラフ（series）の追加
34	36
35	37		次にグラフ（series）を追加しましょう。
36	38
37		-	`そのためには、グラフをダブルクリックします（または右クリックして、コンテキストメニューから[edit series（系列の編集）]を選択します）。 TAChart seriesエディタが表示されます。それはまだ空白ですが、「追加（＋）」を選択すると、TAChartパッケージ内で使用可能なすべてのグラフ（series）のタイプのメニューが表示されます。「line series（折れ線グラフ）」を選択します。チャートに割り当てられる合計3つの折れ線グラフを作成するには、これをあと2回繰り返します。それらにはまだデータがないため、チャートにはまだグラフは表示されていません。データがない→なにも表示しない。それでは始めましょう。`
	39	+	```text
	40	+	そのためには、グラフをダブルクリックします（または右クリックして、コンテキストメニューから[edit series（系列の編集）]を選択します）。 TAChart seriesエディタが表示されます。それはまだ空白ですが、「追加（＋）」を選択すると、TAChartパッケージ内で使用可能なすべてのグラフ（series）のタイプのメニューが表示されます。「line series（折れ線グラフ）」を選択します。チャートに割り当てられる合計3つの折れ線グラフを作成するには、これをあと2回繰り返します。それらにはまだデータがないため、チャートにはまだグラフは表示されていません。データがない→なにも表示しない。それでは始めましょう。
	41	+	```
38	42
39	43		![](/wiki-images/6/6f/TAChart_GettingStarted_Step1a.png)
40	44
41	45		その前に、オブジェクトインスペクターツリーを見てみましょう。 TAChartはクラスとコンテナの非常に複雑なアーキテクチャを使用しているため、オブジェクトツリーを理解することも重要です。プロジェクトの現在の状態では、TChartコンポーネントを親としてその子に3本の折れ線グラフ（line series）、およびさらに縦軸（y軸、left）と横軸（x軸、Bottom）を子として持つAxisListが表示されています。 series（グラフ曲線）名は、Chart \<番号\> \<グラフタイプ（SeriesType）\> \<番号\>という形式で構成されます。
42	46
43	47		![](/wiki-images/c/ce/Tachart_getting_started_object_tree.png)
44	48
45		-	`SinSeries（sin曲線）``、 ``CosSeries（cos曲線）``、 ``SinCosSeries（sincos曲線）``などのようにわかりやすい名前を付けたいときは？そのためには各series（グラフ曲線）をクリックし、オブジェクトインスペクター内の対応するフィールド（Nameプロパティ）でseries ``名``（グラフ曲線 ``名``）を変更します。`
	49	+	```text
	50	+	SinSeries（sin曲線）、 CosSeries（cos曲線）、 SinCosSeries（sincos曲線）などのようにわかりやすい名前を付けたいときは？そのためには各series（グラフ曲線）をクリックし、オブジェクトインスペクター内の対応するフィールド（Nameプロパティ）でseries 名（グラフ曲線名）を変更します。
	51	+	```
46	52
47	53		## データの追加
48	54
49	55		次に、データを追加します。最も簡単な方法は、フォームが作成されるときにデータも作成することです。つまり、フォームの `OnCreate` イベントのハンドラーに処理を記述します。もちろん、「実際の」プロジェクト（より実用的なプログラム）では、計算を開始するボタンのクリック後やファイルからデータを読み込んだ後など、他のタイミングでデータが追加されるでしょう。
50	56
51	57		``` pascal
52	58		procedure TForm1.FormCreate(Sender: TObject);
53	59		const
54	60		N = 100;
55	61		MIN = -10;
56	62		MAX = 10;
57	63		var
58	64		i: Integer;
59	65		x: Double;
60	66		begin
61	67		for i:=0 to N-1 do begin
62	68		x := MIN + (MAX - MIN) * i /(N - 1);
63	69		SinSeries.AddXY(x, sin(x));
64	70		CosSeries.AddXY(x, cos(x));
65	71		SinCosSeries.AddXY(x, sin(x)*cos(x));
66	72		end;
67	73		end;
68	74		```
69	75
70	76		この手続き（ [[Procedure\|procedure]] ）では、series（グラフ曲線）ごとに100個のデータポイントを作成します。 xの値は、 `MIN` と `MAX`の間で等間隔になるように計算されます。ここでは-10から10までを100等分した0.2間隔です。重要なのは、各series（グラフ曲線）毎に `AddXY` [[Method\|method]] を呼び出すことです。このメソッドは、各データポイントのx座標とy座標を取得し、それらを内部リストに追加します。このメソッドのオーバーロードバージョンもあり、各データポイントのテキストラベルと個別の色を渡すこともできますが、ここではこの機能は必要ありません。
71	77
72	78		上記のリストは、いわゆるチャートソースです。これは、プロット用のデータを提供するクラス（ [[Class\|class]] ）です。組み込みのチャートソースを使用することも、シリーズを別のチャートソースにリンクすることもできます。コンポーネントパレットには、次のようなさまざまなチャートソースがあります。
73	79
74	80		- `TListChartSource` これはデータをリストに格納します（このタイプはseriesで内部的に使用されます）
75	81		- `TDBChartSource` データベース内のレコードとフィールドへのインターフェイス
76	82		- `TUserDefinedChartSource` これにより、たとえば、ユーザー定義レコードの配列に格納されているデータへの非常に一般的なアクセスが可能になります
77	83		- `TCalculatedChartSource` これにより、あるseriesを分析し、結果を別のseriesに表示できます。
78	84
79	85		ただし、ChartSourceで十分です。この入門プロジェクトでは、組み込みのソースで十分です。
80	86
81	87		![](/wiki-images/b/b8/Tachart_getting_started_step2.png)
82	88
83	89		では、プログラムをコンパイルしましょう。3つの曲線が表示され、x軸は自動的に-10から10までのデータ範囲をカバーします。まあそれほど悪くはありませんが、完璧にはほど遠いです：この図は非常に紛らわしいですし個々の線を区別することはできません。また、どのseries（グラフ曲線）がどの関数のものなのかわかりません。
84	90
85	91		## Series（グラフ曲線）の書式
86	92
87	93		各series（グラフ曲線）の色を変えてみませんか？これを行うには、オブジェクトツリーで各series（グラフ曲線）を選択し、以下のオブジェクトインスペクターで、プロパティ [[Property\|property]] `SeriesColor` を必要に応じて変更します。 `SeriesColor` は、データポイントを結ぶ線の色です。
88	94
89	95		再コンパイルすると、シリーズが色付きで表示されます。しかし、それでも異なる機能を区別することはできません。必要なのはlegend（凡例）です。
90	96
91	97		## 凡例（legend）の追加
92	98
93	99		グラフ（SeriesではなくChart）を強調表示し、オブジェクトインスペクターで、 `Legend` （凡例）まで下にスクロールして、サブプロパティを開きます。サブプロパティの一番下に、デフォルトで `false` である `Visible` があります。したがって、それを `true` に設定して、再コンパイルします。
94	100
95	101		![](/wiki-images/2/2e/Tachart_getting_started_step3.png)
96	102
97	103		少し良くなってきました。足りないのは、「`y = sin(x)`」のような各series（グラフ曲線）の説明です。そのために、各series（グラフ曲線）にはプロパティ `Title` があります。これは、対応するseries（グラフ曲線）の記号とともに、各エントリの凡例に表示されるテキストです。したがって、すべてのシリーズをもう一度確認し、オブジェクトインスペクターを使用して、 `Title` をそれぞれ `y=sin(x)`, `y=cos(x)`、および `y=sin(x)*cos(x)`に設定する必要があります。（こちらはChartのプロパティではなくそれぞれのseries（グラフ曲線）のプロパティです）
98	104
99	105		![](/wiki-images/5/5f/Tachart_getting_started_step4.png) ![](/wiki-images/2/20/Tachart_getting_started_step4a.png)
100	106
101	107		これで、再コンパイルすると、チャートはほぼ完璧になります。「ほぼ完璧」です-凡例がかなり大きく、図が残りのスペースに押し込まれているためです。もちろん、フォームのサイズを大きくすることもできます。しかし、図の下に凡例を配置することはできませんか？できます。チャート（SeriesではなくChart）のプロパティ `Legend` に戻り、 `Alignment` を `laBottomCenter`に設定します。また、 `ColumnCount` を `3`に設定する必要があります。そうしないと、凡例が1行にならずに1項目ごとの3行になってしまいます。
102	108
103	109		![](/wiki-images/3/37/Tachart_getting_started_step5.png)
104	110
105	111		おっと！ --ウィンドウの幅が十分でないため、3番目の凡例が途中で切り捨てられています。チャート（Chart）のAline（配置）プロパティを `alClient` にして（Formいっぱいまで広がる）、ウィンドウ（Form）の幅を少し増やすと凡例が欠けることなくすべて表示されます。
106	112
107	113		## 微調整
108	114
109	115		さらにいくつか改善できる点があります。軸にはそれぞれ「x軸」や「y軸」などのタイトルが必要であり、グラフの上にもタイトルが必要です。
110	116
111	117		x軸のタイトルを設定するには、オブジェクトツリーでTChartのAxisList子コンポーネントの `Bottom` :TChartAxisを選択するか、オブジェクトインスペクタのChartのプロパティ `BottomAxis` に移動します。 `Title` プロパティが見つかるのでそのサブプロパティを開きます。 `Caption` フィールドのテキストは、グラフのx軸の近くにタイトルとして表示されます。 `Visible` を `true`に設定することを忘れないでください。タイトルのフォントスタイルを太字に設定することもできます。そのプロパティは `LabelFont`の下にあります。 y軸（左軸 `Left axis`）についても同じことを繰り返します。（Left:TChartAxisコンポーネントのTitleプロパティまたはChartのLeftAxisプロパティのTitleサブプロパティのどちらでも可能）
112	118
113	119		基本的に同じ手順を使用してグラフのタイトルを設定できます。グラフ（Chart）のプロパティ `Title`までスクロールし、 `Text` フィールドにタイトル文字を入力して（ここで複数行のテキストを使用することもできます）、 `Visible` を再び`true` に設定します。
114	120
115	121		そして最後に、チャート領域の白い背景を使用することをお勧めします。これは、TChartのプロパティ `BackColor` によって変更されます。また、グリッドはあまり強調しないでください。つまり、カラー `clSilver`を使用すると見栄えが良くなる可能性があります。左軸と下軸のプロパティ `Grid.Color` を使用して変更します。
116	122
117	123		## 完成！
118	124
119	125		作成したグラフ（Chart）は最終的に次のようになります。見栄えのいいものに出来上がりました。難しくはありませんでしたね。
120	126
121	127		TAChartについて詳しく知りたい場合は、公式のTAChartドキュメント（ [[TAChart documentation]]）を参照し、TAChartに付属している多くのデモのうちのいくつかを試してみるといいでしょう。これらは、Lazarusのインストールされたフォルダの `components\tachart\demo` フォルダーにあります。
122	128
123	129		![](/wiki-images/2/2f/Tachart_getting_started_step6.png)
124	130
125	131		## ソースコード
126	132
127	133		このチュートリアルプロジェクトのソースコードは、Lazarusがインストールされたフォルダのcomponents \\ tachartのtutorials \\ getting_startedフォルダーにあります。
128	134
129	135		### Project file （getting_started.lpr）
130	136
131	137		``` pascal
132	138		program project1;
133	139
134	140		{$mode objfpc}{$H+}
135	141
136	142		uses
137	143		{$IFDEF UNIX}{$IFDEF UseCThreads}
138	144		cthreads,
139	145		{$ENDIF}{$ENDIF}
140	146		Interfaces, // this includes the LCL widgetset
141	147		Forms, Unit1, tachartlazaruspkg
142	148		{ you can add units after this };
143	149
144	150		{$R *.res}
145	151
146	152		begin
147	153		RequireDerivedFormResource := True;
148	154		Application.Initialize;
149	155		Application.CreateForm(TForm1, Form1);
150	156		Application.Run;
151	157		end.
152	158		```
153	159
154	160		### Pascal Source Code （Unit1.pas）
155	161
156	162		``` pascal
157	163		unit Unit1;
158	164
159	165		{$mode objfpc}{$H+}
160	166
161	167		interface
162	168
163	169		uses
164	170		Classes, SysUtils, FileUtil, TAGraph, TASeries, Forms, Controls, Graphics,
165	171		Dialogs;
166	172
167	173		type
168	174
169	175		{ TForm1 }
170	176
171	177		TForm1 = class(TForm)
172	178		Chart1: TChart;
173	179		SinSeries: TLineSeries;
174	180		CosSeries: TLineSeries;
175	181		SinCosSeries: TLineSeries;
176	182		procedure FormCreate(Sender: TObject);
177	183		private
178	184		{ private declarations }
179	185		public
180	186		{ public declarations }
181	187		end;
182	188
183	189		var
184	190		Form1: TForm1;
185	191
186	192		implementation
187	193
188	194		{$R *.lfm}
189	195
190	196		{ TForm1 }
191	197
192	198		procedure TForm1.FormCreate(Sender: TObject);
193	199		const
194	200		N = 100;
195	201		MIN = -10;
196	202		MAX = 10;
197	203		var
198	204		i: Integer;
199	205		x: Double;
200	206		begin
201	207		for i:=0 to N - 1 do begin
202	208		x := MIN + (MAX - MIN) * i / (N - 1);
203	209		SinSeries.AddXY(x, sin(x));
204	210		CosSeries.AddXY(x, cos(x));
205	211		SinCosSeries.AddXY(x, sin(x)*cos(x));
206	212		end;
207	213
208	214		end;
209	215
210	216		end.
211	217		```
212	218
213	219		### Lazarus Form （Unit.lfm)
214	220
215		-	~~``` pascal~~
	221	+	``` lfm
216	222		object Form1: TForm1
217	223		Left = 14
218	224		Height = 244
219	225		Top = 137
220	226		Width = 347
221	227		Caption = 'Form1'
222	228		ClientHeight = 244
223	229		ClientWidth = 347
224	230		OnCreate = FormCreate
225	231		LCLVersion = '1.1'
226	232		object Chart1: TChart
227	233		Left = 0
228	234		Height = 244
229	235		Top = 0
230	236		Width = 347
231	237		AxisList = <
232	238		item
233	239		Grid.Color = clSilver
234	240		Minors = <>
235	241		Title.LabelFont.Orientation = 900
236	242		Title.LabelFont.Style = [fsBold]
237	243		Title.Visible = True
238	244		Title.Caption = 'y axis'
239	245		end
240	246		item
241	247		Grid.Color = clSilver
242	248		Alignment = calBottom
243	249		Minors = <>
244	250		Title.LabelFont.Style = [fsBold]
245	251		Title.Visible = True
246	252		Title.Caption = 'x axis'
247	253		end>
248	254		BackColor = clWhite
249	255		Foot.Brush.Color = clBtnFace
250	256		Foot.Font.Color = clBlue
251	257		Legend.Alignment = laBottomCenter
252	258		Legend.ColumnCount = 3
253	259		Legend.Visible = True
254	260		Title.Brush.Color = clBtnFace
255	261		Title.Font.Color = clBlue
256	262		Title.Font.Style = [fsBold]
257	263		Title.Text.Strings = (
258	264		'My first chart'
259	265		)
260	266		Title.Visible = True
261	267		Align = alClient
262	268		ParentColor = False
263	269		object SinSeries: TLineSeries
264	270		Title = 'y=sin(x)'
265	271		LinePen.Color = clRed
266	272		end
267	273		object CosSeries: TLineSeries
268	274		Title = 'y=cos(x)'
269	275		LinePen.Color = clBlue
270	276		end
271	277		object SinCosSeries: TLineSeries
272	278		Title = 'y=sin(x)*cos(x)'
273	279		LinePen.Color = clGreen
274	280		end
275	281		end
276	282		end
277	283		```
278	284
279	285		---
280	286		From the Free Pascal wiki, page "TAChart Tutorial: Getting started/ja", as it stood on 2020-11-05 after a change by Higukenn, 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