コントロールの説明
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 を GXChart として定義 //&serie を Gxchart.serie として定義
この例では次のようなグラフが作成されます:
gxopen にアップロードされているサンプル
コントロールのプロパティ
プロパティ |
説明 |
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 を参照してください。