コントロールの説明
GXChart コントロールを使用すると、動的に生成されるグラフを Web サイトに表示できます。GXChart コントロールは、指定したデータに基づいて即座に視覚的なグラフを作成するオンラインサービス、GXchart.com に基づくコントロールです。詳細は
www.gxchart.com を参照してください。
コントロールの使用
このコントロールを使用するには、Chart コントロールを Web パネル (またはトランザクション) にドラッグ アンド ドロップする必要があります。そうすることで、グラフが Web フォームに表示され、そのプロパティが [ プロパティ ] ウィンドウ ( [ 表示 ] メニューから有効化可能) に表示されます。また、Chart コントロールをドロップすると、SDT が統合されて GXChart になります。
つまり、Chart コントロールに、図に表示する必要がある x 値と y 値が格納された GXChart SDT ベースの変数を渡します。GXChart SDT には 2 つのフィールドがあります。
- Categories: X 軸に表示する X 値です。
- Series (collection):
- Name: 系列の名前です。
- Values: Y 値です。系列 (Series) のそれぞれの値は 1 つのカテゴリに属します。つまり、系列には、カテゴリと同じ数の値があるはずです (X = カテゴリ、Y = 系列値)。
GXChart の 1 つの系列には、実際には系列のコレクションが含まれています。そのため、1 つのカテゴリに含まれる複数の値をグラフ化できます。たとえば、特定の期間の収入と支出を表すグラフを作成できます。
例:
&gxChart.Categories.Add("May")
&gxChart.Categories.Add("June")
&gxChart.Categories.Add("July")
&gxChart.Categories.Add("August")
&serie.Name = "Incomes"
&serie.Values.Add(50)
&serie.Values.Add(55)
&serie.Values.Add(60)
&serie.Values.Add(65)
&gxChart.Series.Add(&serie)
&serie =new()
&serie.Name = "Outcomes"
&serie.Values.Add(20)
&serie.Values.Add(25)
&serie.Values.Add(30)
&serie.Values.Add(35)
&gxChart.Series.Add(&serie)
//&gxchart is defined as GXChart //&serie is defined as Gxchart.serie
この例では次のようなグラフが作成されます:
コントロールのプロパティ
| プロパティ |
説明 |
| Title |
グラフのメインタイトル |
| X Axis title |
X 軸に表示するタイトル |
| Y Axis title |
Y 軸に表示するタイトル |
| Width |
画像の幅 (ピクセル単位) |
| Height |
画像の高さ (ピクセル単位) |
| BG Color 1 |
左上隅のグラデーション塗りの背景色 |
| BG Color 2 |
右下隅のグラデーション塗りの背景色 |
| Chart BG Color 1 |
左上隅にあるグラフペインのグラデーション塗りの背景色 (X-Y グラフタイプの場合のみ) |
| Chart BG Color 2 |
右下隅にあるグラフペインのグラデーション塗りの背景色 (X-Y グラフタイプの場合のみ) |
| Draw Shadow |
影の表示ステータスの指定 |
| Draw Border |
境界線のスタイルの指定 |
| Show Values |
各値を表示するかどうかの指定 |
| Opacity (Alpha) |
グラフ項目の透過度 (アルファ値) |
| Legend Position |
凡例の位置 |
| Hatch |
白黒のグラフの塗りつぶし (ハッチング) の指定 |
| Codec |
画像タイプの指定 |
| Title Font Size |
タイトルのフォントサイズの指定 |
| Category Font Size |
凡例のフォントサイズの指定 (カテゴリ、値など) |
| Category Order |
カテゴリの順序の指定 |
Colors
|
データ系列で使用する色
|
| Scale |
目盛りの最初の値の指定 |
詳細は
GXchart 3.0 を参照してください。