CFCHART | |||||||||||||||||||||||||||||||||||
説明
チャートを生成し、表示します。 |
|||||||||||||||||||||||||||||||||||
カテゴリ
データ出力タグ、拡張タグ、『ColdFusion MX 開発ガイド』の第31章の「チャートとグラフの作成」 の「チャートの外観の設定」 | |||||||||||||||||||||||||||||||||||
シンタックスシンタックス 1 <!--- このシンタックスは XML ファイルまたは文字列を使用してチャートのスタイルを指定します。 ---> <cfchart style = "XML string"、"filename"> </cfchart> シンタックス 2 <!--- このシンタックスは cfchart タグの属性を使用してチャートのスタイルを指定します。 ---> <cfchart foregroundColor = "Hex value"、"Web color" chartHeight = "integer number of pixels" chartWidth = "integer number of pixels" dataBackgroundColor = "Hex value"、"Web color" font = "font name" fontBold = "yes"、"no" fontItalic = "yes"、"no" fontSize = "integer font size" foregroundColor = "Hex value"、"Web color" format = "flash"、"jpg"、"png" gridlines = "integer number of lines" labelFormat = "number"、"currency"、"percent"、"date" markerSize = "integer number of pixels" name = "String"> pieSliceStyle = "solid"、"sliced" scaleFrom = "integer minimum value" scaleTo = "integer maximum value" seriesPlacement = "default"、"cluster"、"stacked"、"percent" show3D = "yes"、"no" showBorder = "yes"、"no" showLegend = "yes"、"no" showMarkers = "yes"、"no" showXGridlines = "yes"、"no" showYGridlines = "yes"、"no" sortXAxis = "yes"、"no" tipBGColor = "hex value"、"web color" tipStyle = "MouseDown"、"MouseOver"、"none" title = "title of chart" url = "onClick destination page" xAxisTitle = "title text" xAxisType = "scale"、"category" xOffset = "-1 ~ 1 の数値" yAxisTitle = "title text" yAxisType = "scale"、"category" yOffset = "-1 ~ 1 の数値" </cfchart> |
|||||||||||||||||||||||||||||||||||
関連項目
cfchartdata、cfchartseries |
|||||||||||||||||||||||||||||||||||
ヒストリ
ColdFusion MX 7:
ColdFusion MX 6.1:
ColdFusion MX: このタグが追加されました。
|
|||||||||||||||||||||||||||||||||||
使用方法
cfchart タグでは、グラフを表示する "コンテナ" を定義します。ここでは、高さ、幅、背景色ラベルなどを定義します。cfchartseries タグでは、棒グラフ、折れ線グラフ、円グラフなど、データを表示するチャートのスタイルを定義します。cfchartdata タグでは、データポイントを定義します。 データは、次の形で cfchartseries タグに渡されます。
font 属性の値 ArialUnicodeMS には、次のルールが適用されます。
次の表に、color 属性で使用できる W3C HTML 4 の色名値または 16 進値を示します。
その他の色値を指定する場合は、16 進数の値を入力します。RGB 値を指定する 6 桁の値、または RGB 値と透明度を指定する 8 桁の値を指定できます。8 桁の 16 進値の先頭の 2 桁は透明度を示します。FF は不透明を、00 は透明を表しています。00 ~ FF の範囲の値を使用できます。 一般的なブラウザでサポートされるその他の色名については、www.w3.org/TR/css3-color を参照してください。 また、チャートをメモリにキャッシュするかどうか、キャッシュするチャートの数、および ColdFusion で同時に処理できるチャートリクエストの数などを指定することができます。ColdFusion Administrator でこれらのオプションを設定するには、[サーバーの設定]-[チャート] を選択します。 |
|||||||||||||||||||||||||||||||||||
例<!---次の例では、cfdocexamples データベース内の給与データを分析し、 部門ごとの平均給与を示す棒グラフを作成します。cfchartseries タグの 本文には、クエリーからの利用不可能なデータを含めるために cfchartdata タグが 1 つ 含まれています。 ---> <!--- 未処理データをデータベースから取得します。 ---> <cfquery name="GetSalaries" datasource="cfdocexamples"> SELECT Departmt.Dept_Name, Employee.Dept_ID, Employee.Salary FROM Departmt, Employee WHERE Departmt.Dept_ID = Employee.Dept_ID </cfquery> <!--- クエリーオブクエリーを使用して、各部門の統計データを使用する ---> <!--- 新規クエリーを生成します。 ---> <!--- AVG および SUM で統計を計算します。 ---> <!--- GROUP BY で部門ごとの結果を生成します。 ---> <cfquery dbtype = "query" name = "DataTable"> SELECT Dept_Name, AVG(Salary) AS avgSal, SUM(Salary) AS sumSal FROM GetSalaries GROUP BY Dept_Name </cfquery> <!--- 生成された数値を千の位で四捨五入するように形式を設定し直します。 ---> <cfloop index = "i" from = "1" to = "#DataTable.RecordCount#"> <cfset DataTable.sumSal[i] = Round(DataTable.sumSal[i]/1000)*1000> <cfset DataTable.avgSal[i] = Round(DataTable.avgSal[i]/1000)*1000> </cfloop> <h1>従業員の給与の分析</h1> <!--- クエリーオブクエリーによる棒グラフ ---> <cfchart format="flash" xaxistitle="Department" yaxistitle="Salary Average"> <cfchartseries type="bar" query="DataTable" itemcolumn="Dept_Name" valuecolumn="avgSal"> <cfchartdata item="Facilities" value="35000"> </cfchartseries> </cfchart> |
BACKGROUNDCOLOR | |
オプション | |
ラベルの周囲および凡例の周囲の、データの背景とチャートボーダーとの間の領域の色です。 16 進数の値またはサポートされる色の名前を指定します。「使用方法」にある名前のリストを参照してください。16 進数の値を入力するには、"##xxxxxx" または "##xxxxxxxx" という形式を使用します。ここで、x は 0 ~ 9 または A ~ F です。シャープ記号 (#) は 2 つ使用するか、または使用しないでください。 |
CHARTHEIGHT | |
オプション | |
Default value: "240"
チャートの縦幅です。ピクセル値 (整数) で指定します。 |
CHARTWIDTH | |
オプション | |
Default value: "320"
チャートの横幅です。ピクセル値 (整数) で指定します。 |
DATABACKGROUNDCOLOR | |
オプション | |
Default value: "white"
チャートデータの周囲の領域の色です。 16 進数の値またはサポートされる色の名前を指定します。「使用方法」にある名前のリストを参照してください。 16 進数の値を入力するには、"##xxxxxx" または "##xxxxxxxx" という形式を使用します。ここで、x は 0 ~ 9 または A ~ F です。シャープ記号 (#) は 2 つ使用するか、または使用しないでください。 |
FONT | |
オプション | |
Default value: "arial"
テキストフォント名です。
|
FONTBOLD | |
オプション | |
Default value: "no"
テキストをボールドにするかどうかを指定します。
|
FONTITALIC | |
オプション | |
Default value: "no"
テキストをイタリックにするかどうかを指定します。
|
FONTSIZE | |
オプション | |
Default value: "11"
フォントサイズです。整数を指定します。 |
FOREGROUNDCOLOR | |
オプション | |
Default value: "black"
テキスト、グリッド線、およびラベルの色です。 16 進数の値またはサポートされる色の名前を指定します。「使用方法」にある名前のリストを参照してください。 16 進数の値を入力するには、"##xxxxxx" または "##xxxxxxxx" という形式を使用します。ここで、x は 0 ~ 9 または A ~ F です。シャープ記号 (#) は 2 つ使用するか、または使用しないでください。 |
FORMAT | |
オプション | |
Default value: "flash"
グラフを保存するときのファイル形式です。
|
GRIDLINES | |
オプション | |
Default value: "10 (上端と下端も含む)"
軸を含め、値軸に表示するグリッド線の数です。正の整数で指定します。 |
LABELFORMAT | |
オプション | |
Default value: "number"
Y 軸のラベルの形式です。
|
MARKERSIZE | |
オプション | |
Default value: "(自動)"
データポイントマーカのサイズです (ピクセル単位)。整数で指定します。 |
NAME | |
オプション | |
ページ変数名です。文字列で指定します。グラフをバイナリデータとして生成し、指定した変数に割り当てます。チャートは表示されません。cffile タグ内でこの name 値を使用すれば、チャートをファイルに書き出すことができます。 |
PIESLICESTYLE | |
オプション | |
Default value: "sliced"
cfchartseries の type 属性の値が pie であるときに適用されます。
|
ROTATED | |
オプション | |
Default value: "no"
チャートを 90 度回転させるかどうかを指定します。
|
SCALEFROM | |
オプション | |
Default value: "データにより決定"
Y 軸の最小値です。整数で指定します。 |
SCALETO | |
オプション | |
Default value: "データにより決定"
Y 軸の最大値です。整数で指定します。 |
SERIESPLACEMENT | |
オプション | |
Default value: "default"
複数のデータ系列があるチャート内の系列の相対位置を指定します。
|
SHOW3D | |
オプション | |
Default value: "yes"
チャートに 3 次元効果を付けて表示するかどうかを指定します。
|
SHOWBORDER | |
オプション | |
Default value: "no"
チャートの周囲にボーダーを表示するかどうかを指定します。
|
SHOWLEGEND | |
オプション | |
Default value: "yes"
チャートに複数のデータ系列がある場合に、凡例を表示するかどうかを指定します。
|
SHOWMARKERS | |
オプション | |
Default value: "yes"
折れ線グラフ、曲線グラフ、および散布グラフのデータポイントにマーカーを表示するかどうかを指定します。
|
SHOWXGRIDLINES | |
オプション | |
Default value: "no"
X 軸のグリッド線を表示するかどうかを指定します。
|
SHOWYGRIDLINES | |
オプション | |
Default value: "yes"
Y 軸のグリッド線を表示するかどうかを指定します。
|
SORTXAXIS | |
オプション | |
Default value: "no"
列ラベルを X 軸に沿ってアルファベット順に表示するかどうかを指定します。
xAxisType 属性が scale の場合は無視されます。 |
STYLE | |
オプション | |
チャートのスタイルを指定する XML ファイルまたは文字列です。 |
TITLE | |
オプション | |
チャートのタイトルです。 |
TIPBGCOLOR | |
オプション | |
Default value: "white"
ヒントの背景色です。Flash 形式のグラフファイルのみに適用されます。 16 進数の値またはサポートされる色の名前を指定します。「使用方法」にある名前のリストを参照してください。 16 進数の値を入力するには、"##xxxxxx" という形式を使用します。ここで、x は 0 ~ 9 または A ~ F です。シャープ記号 (#) は 2 つ使用するか、または使用しないでください。 |
TIPSTYLE | |
オプション | |
Default value: "mouseOver"
現在のチャート要素に関する情報を表示するポップアップウィンドウを開くアクションを決定します。
|
URL | |
オプション | |
ユーザーがデータ系列の項目をクリックしたときに開く URL を指定します。onClick での移動先ページです。 URL の文字列内には変数を指定できます。ColdFusion により、変数の現在の値が渡されます。
例 : "somepage.cfm?item=$ITEMLABEL$&series=$ SERIESLABEL$&value=$VALUE$
|
XAXISTITLE | |
オプション | |
X 軸に表示されるタイトルです。テキストで指定します。 |
XAXISTYPE | |
オプション | |
Default value: "category"
X 軸がデータを表すか、または数値を表すかを指定します。
|
XOFFSET | |
オプション | |
Default value: "0.1"
チャートを水平方向に傾斜させるように表示するときの単位数を指定します。show3D="yes" を指定する場合に適用されます。-1 ~ 1 の範囲の数字を使用できます。ここで、"-1" は左方向に 90 度、"1" は右方向に 90 度傾けることを意味します。 |
YAXISTITLE | |
オプション | |
Y 軸に表示されるタイトルです。テキストで指定します。 |
YAXISTYPE | |
オプション | |
Default value: "category"
Y 軸は常にデータ値に使用されるので、現時点では効果がありません。 |
YOFFSET | |
オプション | |
Default value: "0.1 "
チャートを垂直方向に傾斜させるように表示するときの単位数を指定します。show3D="yes" を指定する場合に適用されます。-1 ~ 1 の範囲の数字を使用できます。ここで、"-1" は左方向に 90 度、"1" は右方向に 90 度傾けることを意味します。 |