Sign in Join
Wiki copytemporary

TAChart Tutorial: Getting started/ja: what changed

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

Title: TAChart Tutorial: Getting started/ja

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