メインコンテンツまでスキップ
バージョン: 20 R7 BETA

GRAPH

GRAPH ( graphArea ; graphNumber ; xLabels {; yElements} {; yElements2 ; ... ; yElementsN} )

引数説明
graphAreaPictureピクチャー変数
graphNumberInteger, Object倍長整数:グラフタイプ番号 オブジェクト(64-bit版のみ):グラフ設定
xLabelsArrayX軸ラベル
yElementsArrayグラフにするデータ (最大8個)

説明

GRAPHコマンドは、ピクチャー変数に、配列のデータを使用してグラフを作成します。

このコマンドで生成されるグラフは、統合されたSVGレンダリングエンジンを使用して描画されます。グラフにはピクチャー変数に関連付けられたインターフェース機能があります。 (表示フォーマットの設定などに使用できる) アプリケーションモードのコンテキストメニュー、スクロールバー等。

注: SVG (Scalable Vector Graphics) はグラフィックファイルフォーマット (.svg 拡張子) です。XMLに基づき、このフォーマットは広く使用され、特にWebブラウザで表示できます。詳細は以下のWebサイトを参照してください: http://www.w3.org/Graphics/SVG/SVG EXPORT TO PICTURE コマンドを使用して、統合されたSVGエンジンを利用することもできます。

graphPicture 引数にはフォーム中でグラフを表示するピクチャー変数名を渡します。

第二引数は、描画されるグラフタイプを指定します。これには二つのオプションがあります:

  • Longint型である graphNumber引数を渡す (全てのバージョンの4Dで可能): この場合、1から8までの数値を渡す必要があります。グラフタイプについては例題1 に説明があります。グラフ描画後、graphNumを変更し、GRAPH コマンドをもう一度実行することでタイプを変更することができます。その後 GRAPH SETTINGS コマンドを呼び出す事で特定のグラフ特性を修正することができます。例題1を参照してください。
  • Object型である graphSettings引数を渡す (ただしWindows用4D Serverではサポートされません): この場合、定義する様々なグラフ特性を含んだオブジェクトを渡す必要があります。このためには、"Graph Parameters" テーマ内にある定数を使用することができます (以下参照)。このシンタックスでは一回の呼び出しで、グラフタイプと同時に特定の設定 (凡例、xmin、等) を定義する事ができます。これにより、ユーザーは生成されたグラフを通常のSVGピクチャーとして保存し、FireFox、Chrome、IE、Safariなどの標準のブラウザーを使用してそれらを表示する事ができるようにします(生成されたグラフはブラウザーに埋め込まれているSVGスタンダードに追従します)。それに加え、このシンタックスではその他の様々な設定を変更できるため、例えばバーの間のスペース、マージン、バーの色等をカスタマイズすることができます。これについては例題2、3、4を参照して下さい。警告: このシンタックスを使用する場合、GRAPH SETTINGS コマンドは呼び出してはいけません。

引数 xLabels は、X軸(グラフの一番下)に使用するラベルを定義します。このデータは文字列、日付、時間、数値タイプのいずれでも構いません。 xLabelsyElementsの配列要素数はそれぞれ同じでなければなりません。

引数yElementsで指定するデータは、グラフにするデータです。このデータは数値でなければなりません。最大8つのデータセットをグラフ化することができます。円グラフは、最初のyElementsのみをグラフ化します。

自動ID

SVGグラフ中で見つけられる要素には自動で特定のIDが割り当てられます:

ID説明
ID_graph_1 ~ ID_graph_8棒、折れ線、面...
ID_graph_shadow_1 ~ ID_graph_shadow_8グラフの影...
ID_bullet_1 ~ ID_bullet_8点 (折れ線および散布図のみ)
ID_pie_label_1 ~ ID_pie_label_8円グラフのラベル (円グラフのみ)
ID_legend凡例
ID_legend_1 ~ ID_legend_8凡例のタイトル
ID_legend_border凡例の境界線
ID_legend_border_shadow凡例境界線の影
ID_x_valuesX軸の値
ID_y_valuesY軸の値
ID_y0_axisZ軸の値
ID_background背景
ID_background_shadow背景の影
ID_x_gridX軸のグリッド
ID_x_grid_shadowX軸のグリッドの影
ID_y_gridY軸のグリッド
ID_y_grid_shadowY軸のグリッドの影
graphSettings属性

graphSettings引数を使用する場合、そこに定義したい様々なプロパティを含んだオブジェクトを渡します。"Graph Parameters"定数テーマ内にある、以下の定数を使用する事ができます:

定数コメント
Graph background color文字列graphBackgroundColorとりうる値: SVG で使用可能な色名やRGB値 (テキスト)。
例: "#7F8E00"、"Pink"、"#0a1414"
Graph background opacity文字列graphBackgroundOpacityとりうる値: 0-100 の整数
デフォルトの値: 100
Graph background shadow color文字列graphBackgroundShadowColorとりうる値: SVG で使用可能な色名やRGB値 (テキスト)。
例: "#7F8E00"、"Pink"、"#0a1414"
Graph bottom margin文字列bottomMarginとりうる値: 実数
デフォルトの値: 12
Graph colors文字列colorsとりうる値: テキスト配列。各グラフシリーズのカラー。
デフォルト値: Blue-green (#19BAC9), Yellow (#FFC338), Purple (#573E82), Green (#4FA839), Orange (#D95700), Blue (#1D9DF2), Yellow-green (#B5CF32), Red (#D43A26)
Graph column gap文字列columnGapとりうる値: 倍長整数
デフォルト値: 12
棒の間の空白を設定します。
タイプ1、2、3のみ
Graph column width max文字列columnWidthMaxとりうる値: 実数
デフォルトの値: 200
タイプ1、2、3のみ
Graph column width min文字列columnWidthMinとりうる値: 実数
デフォルトの値: 10
タイプ1、2、3のみ
Graph default height文字列defaultHeightとりうる値: 実数
デフォルトの値:** 400。graphType=7 (円グラフ) の場合は 600。
Graph default width文字列defaultWidthとりうる値: 実数
デフォルトの値:** 600。graphType=7 (円グラフ) の場合は 800。
Graph display legend文字列displayLegendとりうる値: ブール
デフォルトの値: True
Graph document background color文字列documentBackgroundColorとりうる値: SVG準拠のカラー表現(テキスト)、例えば"#7F8E00", "Pink", あるいは "#0a1414"など。
グラフとして保存されているSVGピクチャーが他で開かれた場合、ドキュメントの背景カラーはSVGレンダリングエンジンがSVG tiny 1.2 標準をサポートする場合に限り表示されます(IE、FirefoxではサポートされていますがChromeではサポートされていません)。
Graph document background opacity文字列documentBackgroundOpacityとりうる値: 0-100の間の整数値(デフォルトの値: 100)。SVGとして保存されているグラフが他で開かれた場合、ドキュメントの背景の透明度は、SVGレンダリングエンジンが SVG tiny 1.2 をサポートする場合に限り表示されます(IE、Firefox、ではサポートされますがChromeではサポートされません)。
Graph font color文字列fontColorとりうる値: SVG で使用可能な色名やRGB値 (テキスト)。
例: "#7F8E00"、"Pink"、"#0a1414"
Graph font family文字列fontFamily取りうる値: フォントファミリー名
デフォルト値: "Arial"
Graph font size文字列fontSizeとりうる値: 倍長整数値
デフォルトの値: 12。 graphType=7 (円グラフ)の場合、はGraph pie font sizeを参照して下さい。
Graph left margin文字列leftMarginとりうる値: 実数
デフォルトの値: 12
Graph legend font color文字列legendFontColorとりうる値: SVG で使用可能な色名やRGB値 (テキスト)。
例: "#7F8E00"、"Pink"、"#0a1414"
Graph legend icon gap文字列legendIconGapとりうる値: 実数値
デフォルトの値: Graph legend icon height/2
Graph legend icon height文字列legendIconHeightとりうる値: 実数
デフォルトの値: 20
Graph legend icon width文字列legendIconWidthとりうる値: 実数
デフォルトの値: 20
Graph legend labels文字列legendLabelsとりうる値: テキスト配列。ない場合、4Dはテキストなしのアイコンを表示します。
Graph line width文字列lineWidthとりうる値: 実数
デフォルトの値: 2
タイプ4のみ
Graph number format文字列numberFormat取りうる値: 数値フォーマット文字列。例: "###,###,##0"
デフォルトの値: "" (フォーマットなし)
Graph pie direction文字列pieDirection取り得る値: 1 あるいは -1
デフォルトの値: 1
1は時計回り方向を意味し、-1は反時計回りを意味します
Graph pie font size文字列pieFontSizeとりうる値: 実数
デフォルトの値: 16
タイプ7のみ
Graph pie shift文字列pieShiftとりうる値: 実数
デフォルトの値: 8
タイプ7のみ
Graph pie start angle文字列pieStartAngle取り得る値: 実数値(正または負)
デフォルト値: 0、つまり開始角度は0° (上向き方向)を意味します。
正の値はカレントのパイの方向と同じ方向を表します。負の値はカレントのパイの方向と逆の方向を表します。
Graph plot height文字列plotHeightとりうる値: 実数
デフォルトの値: 12
タイプ4のみ
Graph plot radius文字列plotRadiusとりうる値: 実数
デフォルトの値: 12
タイプ6のみ
Graph plot width文字列plotWidthとりうる値: 実数
デフォルトの値: 12
タイプ4のみ
Graph right margin文字列rightMarginとりうる値: 実数
デフォルトの値: 2
Graph top margin文字列topMarginとりうる値: 実数
デフォルトの値: 2
Graph type文字列graphTypeとりうる値: 倍長整数 [1から8] 1 = 棒グラフ, 2 = 比率棒グラフ, 3 = 積み上げ棒グラフ, 4 =線グラフ , 5 = 面グラフ, 6 = 点グラフ, 7 = 円グラフ, 8 = ピクチャーグラフ
デフォルトの値: 1

nullの場合、グラフは描画されず、エラーメッセージが表示されます。範囲外の場合も、グラフは描画されず、エラーメッセージが表示されます。

ピクチャータイプのグラフ(値=8)を編集する場合、4D/Resources/GraphTemplates/Graph_8_Pictures/のフォルダをデータベースののResourcesフォルダにコピーし、必要な編集を行う必要があります。4Dファイルではなく、ローカルのピクチャーファイルが使用されます。
ピクチャーの名前には特にパターンはありません。4Dはフォルダ内に含まれるファイルを並べ替えし、最初のファイルを最初のグラフに割り当てます。これらのファイルはSVGまたは画像タイプのファイルが使用可能です。
Graph xGrid文字列xGridとりうる値: ブール値
デフォルト値: True
タイプ7以外の全て
Graph xMax文字列xMaxとりうる値: 数値、日付、時間(xLabels 引数と同じ型です)
グラフ上ではxMaxより低い値のみが描画されます。xMaxは4、5、またはxPop=trueである6のグラフタイプに対してのみ、xLabels引数が数値、日付、時間のいずれかの型であった場合にのみ使用されます。これがない場合、あるいはxMin>xMaxであった場合、4Dは自動的にxMaxの値を計算します。
Graph xMin文字列xMinとりうる値: 数値、日付、時間(xLabels 引数と同じ型です)
グラフ上ではxMinより高い値のみが描画されます。xMinは4、5、またはxPop=trueである6のグラフタイプに対してのみ、xLabels引数が数値、日付、時間のいずれかの型であった場合にのみ使用されます。これがない場合、あるいはxMin>xMaxであった場合、4Dは自動的にxMinの値を計算します。
Graph xProp文字列xPropとりうる値: ブール値
デフォルトの値: False
x軸が比例する場合にはTrue、標準のx軸の場合にはFalseを返します。xPropはグラフタイプ4,5,6に対してのみ使用されます。
Graph yGrid文字列yGridとりうる値: ブール
デフォルトの値: True
タイプ7以外の全て
Graph yMax文字列yMaxとりうる値: 数値
ない場合、4Dは自動的にyMaxの値を計算します。
タイプ7以外の全て
Graph yMin文字列yMinとりうる値: 数値
ない場合、4Dは自動的にyMinの値を計算します。
タイプ7以外の全て

例題 1

graphNumberを使用するシンタックス: 以下の例は、グラフィックエンジンを使用して得ることのできる異なるグラフタイプを示します。コードはフォームメソッドあるいはオブジェクトメソッドに記述されます:

 var vGraph : Picture // SVG エンジンを使用する場合に指定する
 ARRAY TEXT(X;2) // X軸の配列を作成
 X{1}:="1995" // X ラベル#1
 X{2}:="1996" // X ラベル#2
 ARRAY REAL(A;2) // Y軸の配列を作成
 A{1}:=30 // データ挿入
 A{2}:=40
 ARRAY REAL(B;2) // Y軸の配列を作成
 B{1}:=50 // データ挿入
 B{2}:=80
 vType:=1 // グラフタイプを初期化
 GRAPH(vGraph;vType;X;A;B) // グラフ描画
 GRAPH SETTINGS(vGraph;0;0;0;0;False;False;True;"France";"USA") // グラフの凡例をセット

以下の図はレンダリングエンジンごとのグラフの結果を示します。

  • vType=1: 棒グラフ
  • vType=2: **比率棒グラフ
  • vType=3: **積上げ棒グラフ
  • vType=4: 線グラフ
  • vType=5: 面グラフ
  • vType=6: 点グラフ
  • vType=7: 円グラフ
  • vType=8: ピクチャーグラフ

例題 2

graphSettingsを使用するシンタックス: 以下の例では、時間の値に基づいた、シンプルな線グラフを描画する場合を考えます:

 var vGraph : Picture //グラフ変数
 ARRAY TIME(X;3) //X軸の配列を作成
 X{1}:=?05:15:10? //X ラベル #1
 X{2}:=?07:15:10? //X ラベル #2
 X{3}:=?12:15:55? //X ラベル #3
 
 ARRAY REAL(A;3) //Y軸の配列を作成
 A{1}:=30 //何かデータを挿入
 A{2}:=22
 A{3}:=50
 
 ARRAY REAL(B;3) //Y軸の配列をもう一つ作成
 B{1}:=50 //何かデータを挿入
 B{2}:=80
 B{3}:=10
 
 var vSettings : Object //グラフ設定を初期化
 
 OB SET(vSettings;Graph type;4) //線タイプ
 
 ARRAY TEXT(aLabels;2) //グラフの凡例を設定
 aLabels{1}:="Mary"
 aLabels{2}:="John"
 OB SET ARRAY(vSettings;Graph legend labels;aLabels)
 
 GRAPH(vGraph;vSettings;X;A;B) //グラフを描画

例題 3

同じ値を使いながら、カスタムの設定を追加することで異なるビューを得ることができます:

 var vGraph : Picture //グラフ変数
 ARRAY TIME(X;3) //X軸の配列を作成
 X{1}:=?05:15:10? //X ラベル #1
 X{2}:=?07:15:10? //X ラベル #2
 X{3}:=?12:15:55? //X ラベル #3
 
 ARRAY REAL(A;3) //Y軸の配列を作成
 A{1}:=30 //何かデータを挿入
 A{2}:=22
 A{3}:=50
 
 ARRAY REAL(B;3) //Create another array for the y-axis
 B{1}:=50 //何かデータを挿入
 B{2}:=80
 B{3}:=10
 
 var vSettings : Object //グラフ設定を初期化
 
 OB SET(vSettings;Graph type;4) //線型
 
 ARRAY TEXT(aLabels;2) //グラフの凡例を設定
 aLabels{1}:="Mary"
 aLabels{2}:="John"
 OB SET ARRAY(vSettings;Graph legend labels;aLabels)
 
  //options
 OB SET(vSettings;Graph xProp;True) //プロポーショナルに設定
 OB SET(vSettings;Graph xGrid;False) //垂直グリッドを除去
 OB SET(vSettings;Graph xMin;?03:00:00?) //境界線を定義
 OB SET(vSettings;Graph xMax;?20:00:00?)
 
 GRAPH(vGraph;vSettings;X;A;B) //グラフを描画

例題 4

この例では、いくつかの設定をカスタマイズする場合を考えます:

 var vGraph : Picture //グラフ変数
 ARRAY TEXT(X;5) //X軸の配列を作成
 X{1}:="Monday" //X ラベル #1
 X{2}:="Tuesday" //X ラベル #2
 X{3}:="Wednesday" //X ラベル #3
 X{4}:="Thursday" //X ラベル #4
 X{5}:="Friday" //X ラベル #5
 
 ARRAY LONGINT(A;5) //Y軸の配列を作成
 A{1}:=30 //何かデータを挿入
 A{2}:=22
 A{3}:=50
 A{4}:=45
 A{5}:=55
 
 ARRAY LONGINT(B;5) //Y軸の配列をもう一つ作成
 B{1}:=50 //何かデータを挿入
 B{2}:=80
 B{3}:=10
 B{4}:=5
 B{5}:=72
 
 var vSettings : Object //グラフ設定を初期化
 
 OB SET(vSettings;Graph type;1) //バー型
 
 ARRAY TEXT(aLabels;2) //グラフの凡例を設定
 aLabels{1}:="Mary"
 aLabels{2}:="John"
 OB SET ARRAY(vSettings;Graph legend labels;aLabels)
 
  //オプション
 OB SET(vSettings;Graph yGrid;False) //垂直グリッドを除去
 OB SET(vSettings;Graph background color;"#573E82") //背景色を設定
 OB SET(vSettings;Graph background opacity;40)
 ARRAY TEXT($aTcols;2) //グラフの色を設定
 $aTcols{1}:="#B5CF32"
 $aTcols{2}:="#D43A26"
 OB SET ARRAY(vSettings;Graph colors;$aTcols)
 GRAPH(vGraph;vSettings;X;A;B) //グラフを描画

参照

Graph Parameters
GRAPH SETTINGS
SVG EXPORT TO PICTURE

プロパティ

コマンド番号169
スレッドセーフである