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:

  • style 属性と title 属性が追加されました。
  • 8 桁の 16 進数字を使用して RGB カラーおよび透明度を指定できるようになりました。
  • rotated 属性が削除されました。
  • 列チャートタイプが名前変更されて horizontalbar チャートタイプになりました。

ColdFusion MX 6.1:

  • xAxisType 属性と yAxisType 属性が追加されました。
  • 補間の動作が変更されました。タグは、複数の系列を持つ折れ線グラフのデータポイントを補間するようになりました。

ColdFusion MX: このタグが追加されました。

 
使用方法

cfchart タグでは、グラフを表示する "コンテナ" を定義します。ここでは、高さ、幅、背景色ラベルなどを定義します。cfchartseries タグでは、棒グラフ、折れ線グラフ、円グラフなど、データを表示するチャートのスタイルを定義します。cfchartdata タグでは、データポイントを定義します。

データは、次の形で cfchartseries タグに渡されます。

  • クエリーとして渡されます。
  • cfchartdata タグで定義されたデータポイントとして渡されます。

font 属性の値 ArialUnicodeMS には、次のルールが適用されます。

  • Windows では、Flash 形式のチャート (type = "flash") で 2 バイト文字セットをレンダリングできるようにするためには、この値を選択する必要があります。
  • UNIX では、すべての type 値に対して、2 バイト文字セットをレンダリングできるようにするためには、この値を選択する必要があります。
  • この値を選択した場合、fontBold 属性と fontItalic 属性は無効になります。

次の表に、color 属性で使用できる W3C HTML 4 の色名値または 16 進値を示します。

色名 RGB 値

Aqua

##00FFFF

Black

#000000

Blue

##0000FF

Fuchsia

##FF00FF

Gray

##808080

Green

##008000

Lime

##00FF00

Maroon

##800000

Navy

##000080

Olive

##808000

Purple

##800080

Red

##FF0000

Silver

##C0C0C0

Teal

##008080

White

##FFFFFF

Yellow

##FFFF00

その他の色値を指定する場合は、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"

テキストフォント名です。

  • arial
  • times
  • courier
  • arialunicodeMS。このオプションは、UNIX 上で 2 バイト文字セットを使用する場合、または Windows 上で Flash のファイルタイプで 2 バイト文字セットを使用する場合には必須です。
FONTBOLD  
  オプション
 
Default value: "no"

テキストをボールドにするかどうかを指定します。

  • yes
  • no
FONTITALIC  
  オプション 
 
Default value: "no"

テキストをイタリックにするかどうかを指定します。

  • yes
  • no
FONTSIZE  
  オプション
 
Default value: "11"

フォントサイズです。整数を指定します。

FOREGROUNDCOLOR  
  オプション
 
Default value: "black"

テキスト、グリッド線、およびラベルの色です。

16 進数の値またはサポートされる色の名前を指定します。「使用方法」にある名前のリストを参照してください。

16 進数の値を入力するには、"##xxxxxx" または "##xxxxxxxx" という形式を使用します。ここで、x は 0 ~ 9 または A ~ F です。シャープ記号 (#) は 2 つ使用するか、または使用しないでください。

FORMAT  
  オプション
 
Default value: "flash"

グラフを保存するときのファイル形式です。

  • flash
  • jpg
  • png
GRIDLINES  
  オプション
 
Default value: "10 (上端と下端も含む)"

軸を含め、値軸に表示するグリッド線の数です。正の整数で指定します。

LABELFORMAT  
  オプション
 
Default value: "number"

Y 軸のラベルの形式です。

  • number
  • currency
  • percent
  • date
MARKERSIZE  
  オプション 
 
Default value: "(自動)"

データポイントマーカのサイズです (ピクセル単位)。整数で指定します。

NAME  
  オプション
 

ページ変数名です。文字列で指定します。グラフをバイナリデータとして生成し、指定した変数に割り当てます。チャートは表示されません。cffile タグ内でこの name 値を使用すれば、チャートをファイルに書き出すことができます。

PIESLICESTYLE  
  オプション
 
Default value: "sliced"

cfchartseries の type 属性の値が pie であるときに適用されます。

  • solid: 円グラフを項目ごとに分割せずに表示します。
  • sliced: 円グラフを項目ごとに分割して表示します。
ROTATED  
  オプション
 
Default value: "no"

チャートを 90 度回転させるかどうかを指定します。

  • yes
  • no
SCALEFROM  
  オプション
 
Default value: "データにより決定"

Y 軸の最小値です。整数で指定します。

SCALETO  
  オプション
 
Default value: "データにより決定"

Y 軸の最大値です。整数で指定します。

SERIESPLACEMENT  
  オプション
 
Default value: "default"

複数のデータ系列があるチャート内の系列の相対位置を指定します。

  • default: ColdFusion では、グラフのタイプに基づいて相対位置が決定されます。
  • cluster
  • stacked
  • percent
SHOW3D  
  オプション
 
Default value: "yes"

チャートに 3 次元効果を付けて表示するかどうかを指定します。

  • yes
  • no
SHOWBORDER  
  オプション
 
Default value: "no"

チャートの周囲にボーダーを表示するかどうかを指定します。

  • yes
  • no
SHOWLEGEND  
  オプション
 
Default value: "yes"

チャートに複数のデータ系列がある場合に、凡例を表示するかどうかを指定します。

  • yes
  • no
SHOWMARKERS  
  オプション
 
Default value: "yes"

折れ線グラフ、曲線グラフ、および散布グラフのデータポイントにマーカーを表示するかどうかを指定します。

  • yes
  • no
SHOWXGRIDLINES  
  オプション
 
Default value: "no"

X 軸のグリッド線を表示するかどうかを指定します。

  • yes
  • no
SHOWYGRIDLINES  
  オプション
 
Default value: "yes"

Y 軸のグリッド線を表示するかどうかを指定します。

  • yes
  • no
SORTXAXIS  
  オプション
 
Default value: "no"

列ラベルを X 軸に沿ってアルファベット順に表示するかどうかを指定します。

  • yes:
  • no

xAxisType 属性が scale の場合は無視されます。

STYLE  
  オプション
 

チャートのスタイルを指定する XML ファイルまたは文字列です。

TITLE  
  オプション
 

チャートのタイトルです。

TIPBGCOLOR  
  オプション
 
Default value: "white"

ヒントの背景色です。Flash 形式のグラフファイルのみに適用されます。

16 進数の値またはサポートされる色の名前を指定します。「使用方法」にある名前のリストを参照してください。

16 進数の値を入力するには、"##xxxxxx" という形式を使用します。ここで、x は 0 ~ 9 または A ~ F です。シャープ記号 (#) は 2 つ使用するか、または使用しないでください。

TIPSTYLE  
  オプション
 
Default value: "mouseOver"

現在のチャート要素に関する情報を表示するポップアップウィンドウを開くアクションを決定します。

  • mouseDown: ユーザーがカーソルを要素の位置に置いてマウスをクリックすると、表示されます。Flash 形式のグラフファイルのみに適用されます。その他の形式では、このオプションは、mouseOver と同様に機能します。
  • mouseOver: ユーザーがカーソルを要素の位置に置くと表示されます。
  • none: 表示されません。
URL  
  オプション
 

ユーザーがデータ系列の項目をクリックしたときに開く URL を指定します。onClick での移動先ページです。

URL の文字列内には変数を指定できます。ColdFusion により、変数の現在の値が渡されます。

  • $VALUE$: 選択した行の値です。選択しない場合、値は空の文字列になります。
  • $ITEMLABEL$: 選択したラベルの値です。選択しない場合、値は空の文字列になります。
  • $SERIESLABEL$: 選択した系列の値です。選択しない場合、値は空の文字列になります。

例 :

"somepage.cfm?item=$ITEMLABEL$&series=$
SERIESLABEL$&value=$VALUE$
  • "javascript : ...": クライアントサイドのスクリプトを実行します。
XAXISTITLE  
  オプション
 

X 軸に表示されるタイトルです。テキストで指定します。

XAXISTYPE  
  オプション
 
Default value: "category"

X 軸がデータを表すか、または数値を表すかを指定します。

  • category: X 軸はデータカテゴリを表します。データは sortXAxis 属性に従って並べ替えられます。
  • scale: X 軸は数値を表します。cfchartdata タグの item 属性の値はすべて数値でなければなりません。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 度傾けることを意味します。