マニュアルキャンセル

cfchart

検索

最終更新日 : 2022年1月19日 | 次にも適用 : ColdFusion, ColdFusion 2016

CFML リファレンスユーザーガイド
ColdFusion 関数
ColdFusion のタグ
1. ColdFusion タグの概要
2. カテゴリ別の ColdFusion タグ
  1. アプリケーションフレームワークタグ
    1. cfapplication
    2. cfassociate
    3. cferror
    4. cfimport
    5. cfinterface
    6. cflock
    7. CFScript の
    8. cfthread
  2. 通信タグ
  3. データベース操作タグ
  4. データ出力タグ
    1. cfchart
    1. cfchartdata
    2. cfchartseries
    3. cfchartset
    4. cfcol
    5. cfcontent
    6. cfdocument
    7. cfdocumentitem
    8. cfdocumentsection
    9. cfflush
    10. cfheader
    11. cflog
    12. cfoutput
    13. cfpresentation
    14. cfpresentationslide
    15. cfpresenter
    16. cfprocessingdirective
    17. cfprint
    18. cfreport
    19. cfreportparam
    20. cfsilent
    21. cftable
  5. デバッグタグ
    1. cfdump
    2. cftimer
    3. cftrace
  6. 例外処理タグ
    1. cfcatch
    2. cferror
    3. cffinally
    4. cfrethrow
    5. cfthrow
    6. cftry
  7. 拡張タグ
    1. cfchart
    2. cfchartdata
    3. cfchartseries
    4. cfcollection
    5. cfcomponent
    6. cfexecute
    7. cfftp
    8. function
    9. cfindex
    10. cfinterface
    11. cfinvoke
    12. cfinvokeargument
    13. cfobject
    14. cfproperty
    15. cfreport
    16. cfreportparam
    17. cfreturn
    18. cfsearch
    19. cfsharepoint
    20. cfspreadsheet
    21. cfwddx
    22. cfxml
  8. ファイル管理タグ
  9. フロー制御タグ
    1. cfabort
    2. cfbreak
    3. cfcase
    4. cfcontinue
    5. cfdefaultcase
    6. cfelse
    7. cfelseif
    8. cfexecute
    9. cfexit
    10. cfif
    11. cfinclude
    12. cflocation
    13. cfloop
    14. cfrethrow
    15. cfswitch
    16. cfthrow
    17. cftry
  10. フォームタグ
    1. cfapplet
    2. cfcalendar
    3. cffileupload
    4. cfform
    5. cfformgroup
    6. cfformitem
    7. cfgrid
    8. cfgridcolumn
    9. cfgridrow
    10. cfgridupdate
    11. cfinput
    12. cfpdf
    13. cfpdfform
    14. cfpdfformparam
    15. cfpdfparam
    16. cfpdfsubform
    17. cfselect
    18. cfslider
    19. cftextarea
    20. cftree
    21. cftreeitem
  11. インターネットプロトコルタグ
    1. cfajaximport
    2. cfajaxproxy
    3. cfftp
    4. cffeed
    5. cfimap
    6. cfhttp
    7. cfhttpparam
    8. cfldap
    9. cfmail
    10. cfmailparam
    11. cfmailpart
    12. cfpop
    13. cfsprydataset
  12. ページ処理タグ
    1. cfcache
    2. cfcontent
    3. cfflush
    4. cfheader
    5. cfhtmlhead
    6. cfinclude
    7. cfprocessingdirective
    8. cfsetting
    9. cfsilent
  13. セキュリティタグ
  14. 変数操作タグ
    1. cfcookie
    2. cfdump
    3. cfparam
    4. cfregistry
    5. cfsavecontent
    6. cfschedule
    7. cfset
    8. cfsetting
  15. その他のタグ
    1. cfimage
    2. cflog
    3. cfregistry
3. タグ a～b
4. タグ c
5. タグ f
6. タグ g～h
  1. cfgraph
  2. cfgraphdata
  3. cfgrid
  4. cfgridcolumn
  5. cfgridrow
  6. cfgridupdate
  7. cfheader
  8. cfhtmlhead
  9. cfhtmltopdf
  10. cfhtmltopdfitem
  11. cfhttp
  12. cfhttpparam
7. タグ i
  1. cfif
  2. cfimage
  3. cfimap
  4. cfimapfilter
  5. cfimpersonate
  6. cfimport
  7. cfinclude
  8. cfindex
  9. cfinput
  10. cfinsert
  11. cfinterface
  12. cfinvoke
  13. cfinvokeargument
8. タグ j～l
9. タグ m～o
10. タグ p～q
  1. cfparam
  2. cfpdf
  3. cfpdfform
  4. cfpdfformparam
  5. cfpdfparam
  6. cfpdfsubform
  7. cfpod
  8. cfpop
  9. cfpresentation
  10. cfpresentationslide
  11. cfpresenter
  12. cfprint
  13. cfprocessingdirective
  14. cfprocparam
  15. cfprocresult
  16. cfprogressbar
  17. cfproperty
  18. cfquery
  19. cfqueryparam
11. タグ r～s
  1. cfregistry
  2. cfreport
  3. cfreportparam
  4. cfrethrow
  5. cfreturn
  6. cfsavecontent
  7. cfschedule
  8. cfscript
  9. cfsearch
  10. cfselect
  11. cfservlet
  12. cfservletparam
  13. cfset
  14. cfsetting
  15. cfsharepoint
  16. cfsilent
  17. cfslider
  18. cfspreadsheet
  19. cfsprydataset
  20. cfstoredproc
  21. cfswitch
12. タグ t
  1. cftable
  2. cftextarea
  3. cftextinput
  4. cfthread
  5. cfthrow
  6. cftimer
  7. cftooltip
  8. cftrace
  9. cftransaction
  10. cftree
  11. cftreeitem
  12. cftry
13. タグ u～z
  1. cfupdate
  2. cfwddx
  3. cfwebsocket
  4. cfwindow
  5. cfxml
  6. cfzip
  7. cfzipparam
CFML リファレンス
クラウドサービス

ユーザーにとって読みづらい、理解しにくいデータを表現する場合、サイトやアプリケーションでは常にチャートを使用します。タグ cfchart を使用して、人を引き付けるインタラクティブなグラフを作成し、それらのグラフをアプリケーション内で使用してください。

説明

チャートを生成し、表示します。

カテゴリ

データ出力タグ、拡張タグ

シンタックス

<! --- このシンタックスでは JSON ファイルを使用してチャートスタイルを指定。--->
<cfchart format=&quot;html&quot; style = &quot;JSON filename&quot;> </cfchart>

<! --- このシンタックスでは cfchart タグの属性を使用してチャートスタイルを指定。--->  
<cfchart alpha = &quot;value between 0 and 1&quot; arrows = &quot;JSON string representation&quot; aspect3D = &quot;JSON string representation&quot; background = &quot;JSON string representation&quot; base64=&quot;true | false&quot; bevel = &quot;JSON string representation&quot; border = &quot;JSON string representation&quot; backgroundColor = &quot;hexadecimal value|web color&quot; chartHeight = &quot;integer number of pixels&quot; chartWidth = &quot;integer number of pixels&quot; crosshair = &quot;JSON string representation&quot; dataBackgroundColor = &quot;hexadecimal value|web color&quot; fill = &quot;JSON string representation&quot; font = &quot;font name&quot; fontBold = &quot;yes|no&quot; fontItalic = &quot;yes|no&quot; fontSize = &quot;font size&quot; foregroundColor = &quot;hexadecimal value|web color&quot; format = &quot;jpg|png|html&quot; gridlines = &quot;integer number of lines&quot; height = &quot;height in pixels&quot; width = &quot;width in pixels&quot; ID = &quot;chart identifier&quot; labels = &quot;JSON string representation&quot; legend = &quot;JSON string representation&quot; labelFormat = &quot;number|currency|percent|date&quot; marker = &quot;JSON string representation&quot; markerSize = &quot;integer number of pixels&quot; name = &quot;string&quot; pieSliceStyle = &quot;solid|sliced&quot; plot = &quot;JSON string representation&quot; plotarea = &quot;JSON string representation&quot; preview = &quot;JSON string representation&quot; refresh = &quot;canvas|flash|svg|vml&quot; renderer = &quot;canvas|flash|svg|vml&quot; scales = &quot;comma-seperated list of axes&quot; scaleFrom = &quot;integer minimum value&quot; scaleTo = &quot;integer maximum value&quot; seriesPlacement = &quot;default|cluster| stacked|percent&quot; show3D = &quot;yes|no&quot; showBorder = &quot;yes|no&quot; showLegend = &quot;yes|no&quot; showMarkers = &quot;yes|no&quot; showXGridlines = &quot;yes|no&quot; showYGridlines = &quot;yes|no&quot; sortXAxis = &quot;yes|no&quot; tipBGColor = &quot;hexadecimal value|web color&quot; title = &quot;title of chart&quot; tooltip = &quot;JSON string representation&quot; url = &quot;onClick destination page&quot; xAxis = &quot;JSON string representation&quot; xAxis2 = &quot;JSON string representation&quot; xAxisTitle = &quot;title text&quot; xAxisType = &quot;scale|category&quot; xAxisValues = &quot;Array of values&quot; xOffset = &quot;number between -1 and 1&quot; yAxis = &quot;JSON string representation&quot; yAxis2 = &quot;JSON string representation&quot; yAxisTitle = &quot;title text&quot; yAxisType = &quot;scale|category&quot; yAxisValues = &quot;Array of values&quot; yOffset = &quot;number between -1 and 1&quot; zoom = &quot;JSON string representation&quot; </cfchart>

注意：このタグの属性は attributeCollection 属性で指定でき、その値は構造体になります。attributeCollection 属性で構造体の名前を指定し、タグの属性名を構造体のキーとして使用します。

履歴

バージョン	変更
ColdFusion（2018 リリース）アップデート 5	base64 属性が追加されました。
ColdFusion（2018 リリース）	応答性に優れたクライアントサイドのグラフのサポートを追加しました。パーセント値で高さと幅を指定できます。
ColdFusion 11	ColdFusion 10 に導入されたサーバーサイドのチャート作成（高度なインタラクティブ形式のチャートを作成できる機能）がさらに強化され、視覚的により優れたチャートを作成できるようになりました。この新しいルックアンドフィールは、次のタグ属性では使用できませんので注意してください。 cfchart labelFormat 値としてパーセントを含む seriesPlacement sortXAxis xAxisType yAxisType xOffset yOffset cfchartseries markerStyle：letterx、mcross、snow および rcrosspaintStyle
	XML 形式のスタイルは削除されました。 ColdFusion には、（古いチャート作成システムで使用される）XML スタイルを（新しいチャート作成システムで使用される）JSON スタイルに変換するためのユーティリティが用意されています。この変換を実行するには、<cfusion_home>/bin フォルダー内にある次の cfchart_xmltojson.bat（または cfchart_xmltojson.sh）を使用する必要があります。 cfchart_xmltojson.bat <xml_file_path> 変換後の JSON スタイルは、XML ファイルと同じ場所に作成されます。
ColdFusion 10	以下の新しい属性が追加されました。 alpha arrows aspect3D background bevel border crosshair fill format height id labels legend plot plotarea preview refresh renderer scales type tooltip width xaxis axis2 xaxisvalues yaxis yaxis2 yaxisvalues zoom
ColdFusion 8	チャートスタイルファイル（charting¥styles ディレクトリにある XML ファイル）に showLegend という新しい属性が追加されました。この属性は各ポイントのエントリを表示します。この属性は系列を 1 つだけ含むチャートに対してのみ使用できます。デフォルトでは、showLegend の値は true に設定されます。この機能をオフにするには、すべてのチャートスタイルファイルで設定を変更するか、カスタムスタイルファイルを使用します。
ColdFusion MX 7.01	マニュアルが修正され、fontSize 属性で整数以外の数値を使用可能であるという記述に変更されました。
ColdFusion MX 7	style 属性と title 属性が追加されました。 8 桁の 16 進数字を使用して RGB カラーおよび透明度を指定できるようになりました。 rotated 属性が削除されました。
ColdFusion MX 6.1	xAxisType 属性と yAxisType 属性が追加されました。補間の動作が変更されました。タグは、複数の系列を持つ折れ線グラフのデータポイントを補間するようになりました。
ColdFusion MX	このタグが追加されました。

非推奨

FORMAT="flash" は、Adobe ColdFusion（2016 リリース）では非推奨になりました。

非推奨になった機能の完全なリストについては、非推奨の機能を参照してください。

属性

属性	必須／オプション	デフォルト	説明
alpha	オプション	1	背景のアルファ（透明度）レベルです。有効な値は、0（透明）～ 1（不透明）です。
arrows	オプション		データやその他のチャート項目を指すための矢印を作成します。to、from、size、label などの値が含まれる構造体の配列の JSON 文字列表現です。後述の例を参照してください。
aspect3D	オプション		3D の側面の角度を定義する構造体の JSON 文字列表現です。有効な構造体キーは、angle、depth、true3d です。true3d キーは、チャートで本当の 3D エンジンを使用するのか、等角図法を使用するのかを決定します。true3d を無効にすると、等角図法が使用されます。後述の例を参照してください。
background	オプション		背景に関連する次のキーの構造体です。 color：背景色を設定します。 color-1：矢印の最初の背景色を設定します。 color-2：矢印の 2 番目の背景色（グラデーションで使用）を設定します。 transparent：下層の色やチャートが表示されるように、背景画像の透明度を設定します。 fit：背景の領域に合わせた幅と高さを定義します。 repeat：イメージの繰り返しタイプを定義します。 image：背景画像のパスを定義します。すべてのチャート形式で URL がサポートされています。format="jpg" および format="png" の場合は、絶対パスもサポートされます。format="html" および format="flash" の場合は、相対パスもサポートされます。 position：背景画像の位置を定義します。後述の例を参照してください。
backgroundColor	オプション		ラベルの周囲および凡例の周囲の、データの背景とチャートボーダーとの間の領域の色です。16 進数の値またはサポートされる色の名前を指定します。「使用方法」にある名前のリストを参照してください。16 進数の値を入力するには、「##xxxxxx」または「##xxxxxxxx」という形式を使用します。ここで、x は 0～9 または A～F です。シャープ記号（#）は 2 つ使用するか、または使用しないでください。
base64	オプション	False	この属性はサーバーサイドのチャート作成に使用されます。
bevel	オプション		ベベルに関連する次のキーの構造体です。 color：ベベルの色を定義します。 blur-x：x 方向のベベルのエッジの鋭さ／滑らかさを定義します。 blur-y：y 方向のベベルのエッジの鋭さ／滑らかさを定義します。 angle：ベベルの角度を定義します。 distance：# \| #px 単位の距離で、ベベルが表示されるオブジェクトからの距離を示します。
border	オプション		境界線に関連する次のキーの構造体です。 color：ボーダーの色を設定します。 radius：丸みがある角の半径を定義します。 width：ボーダーの幅を定義します。
chartHeight	オプション	240	チャートの縦幅です。ピクセル値（整数）で指定します。
chartWidth	オプション	320	チャートの横幅です。ピクセル値（整数）で指定します。
crosshair	オプション		十字に関連する次のキーの構造体です。 line-color：十字線の色を設定します。 alpha：線のアルファ透明度レベルを定義します。 line-style：線のスタイルを定義します。後述の例を参照してください。
dataBackgroundColor	オプション	white	チャートデータの周囲領域のカラーです。16 進値、またはサポートされているカラー名で指定します。「使用方法」セクションのカラー名のリストを参照してください。 16 進数の値を入力するには、「##xxxxxx」または「##xxxxxxxx」という形式を使用します。ここで、x は 0～9 または A～F です。シャープ記号（#）は 2 つ使用するか、または使用しないでください。
fill	オプション		塗りつぶしに関連する次のキーの構造体です。 angle：直線状の塗りつぶしが表示されるときの角度を設定します。塗りつぶしの角度が 0 の場合、上部（background-color-1）から下部（background-color-2）まで垂直のグラデーションが表示されます。 offset-x：背景のグラデーションの x 軸のオフセットを設定します。 offset-y：背景のグラデーションの y 軸のオフセットを設定します。後述の例を参照してください。
font	オプション	arial	テキストフォント名です。 arial times courier arialunicodeMS。このオプションは、UNIX 上で 2 バイト文字セットを使用する場合、または Windows 上で Flash のファイルタイプで 2 バイト文字セットを使用する場合には必須です。
fontBold	オプション	no	テキストをボールドにするかどうかを指定します。 yes no
fontItalic	オプション	no	テキストをイタリックにするかどうかを指定します。 yes no
fontSize	オプション	11	フォントサイズ。整数以外の数値を指定した場合は、直近の整数に切り上げられます。
foregroundColor	オプション	black	テキスト、グリッド線、ラベルのカラーです。16 進値、またはサポートされているカラー名で指定します。「使用方法」セクションのカラー名のリストを参照してください。 16 進数の値を入力するには、「##xxxxxx」または「##xxxxxxxx」という形式を使用します。ここで、x は 0～9 または A～F です。シャープ記号（#）は 2 つ使用するか、または使用しないでください。
format	必須		グラフを保存するときのファイル形式です。 html jpg png
gridlines	オプション	10（上端と下端も含む）	軸を含め、値軸に表示するグリッド線の数です。正の整数で指定します。
height	オプション		チャートの縦幅です。整数のピクセル値で指定します。
ID	オプション		チャートの ID です。基盤となるチャートオブジェクトを取得するために使用します。
labels	オプション		チャートにカスタムテキストや画像（例えば、作成者やチャートの情報）を表示するために使用する構造体の配列です。後述の例を参照してください。
labelFormat	オプション	number	Y 軸のラベルの形式です。 number currency percent date
legend	オプション		凡例の属性（background-color や margin-top など）を定義するために使用する構造体です。後述の例を参照してください。
markerSize	オプション	（自動）	データポイントマーカーのサイズです（ピクセル単位）。整数で指定します。
name	オプション		ページ変数名です。文字列で指定します。グラフをバイナリデータとして生成し、指定した変数に割り当てます。チャートは表示されません。 cffile タグ内でこの name 値を使用すれば、チャートをファイルに書き出すことができます。
pieSliceStyle	オプション	sliced	これは、cfchartseries の type 属性の値が pie の場合に適用されます。 solid：円グラフを項目ごとに分割せずに表示します。 sliced：円グラフを項目ごとに分割して表示します。
plot	オプション		チャートのスタイル設定に使用するキー（animation、aspect、margin、marker など）の構造体です。後述の例を参照してください。
plotarea	オプション		チャート領域のスタイル設定に使用するキー（position、margin など）の構造体です。
preview	オプション		チャートのプレビューを制御するためのキー（visible、margin など）の構造体です。追加のキーは次のとおりです。 live：プレビューのアクティブ領域が移動したときにチャートを更新するかどうかを設定します。デフォルトは、クラシックテーマの場合は false、Light／Dark テーマの場合は true です。マウスを離したときにのみ、グラフが更新されます。 preserve-zoom：チャートの変更時やリロード時にズームレベルを保持するかどうかを設定します。後述の例を参照してください。
refresh	オプション		動的チャートを作成するためのキー（type、url、interval など）の構造体です。後述の例を参照してください。
renderer	オプション		レンダリング方法を指定します。format="html" 設定を削除してから、この renderer を「flash」に設定する必要があります。サポートされている値は flash、svg および vml です。
scaleFrom	オプション	データによって決まる	Y 軸の最小値です。整数で指定します。
scales	オプション		チャートをプロットする座標軸のカンマ区切りリストです（例：x,y2）。後述の例を参照してください。
scaleTo	オプション	データによって決まる	Y 軸の最大値です。整数で指定します。
seriesPlacement	オプション	default	複数のデータ系列があるチャート内の系列の相対位置を指定します。 default：ColdFusion では、グラフのタイプに基づいて相対位置が決定されます。 cluster stacked percent
show3D	オプション	no	チャートに 3 次元効果を付けて表示するかどうかを指定します。 yes no
showBorder	オプション	no	チャートの周囲にボーダーを表示するかどうかを指定します。 yes no
showLegend	オプション	yes	チャートに複数のデータ系列がある場合に、凡例を表示するかどうかを指定します。 yes no
showMarkers	オプション	yes	折れ線グラフ、曲線グラフおよび散布グラフのデータポイントにマーカーを表示するかどうかを指定します。 yes no
showXGridlines	オプション	no	X 軸のグリッド線を表示するかどうかを指定します。 yes no
showYGridlines	オプション	yes	Y 軸のグリッド線を表示するかどうかを指定します。 yes no
sortXAxis	オプション	no	列ラベルを X 軸に沿ってアルファベット順に表示するかどうかを指定します。 yes no xAxisType 属性が scale の場合は無視されます。
style	オプション		チャートのスタイルを指定する XML ファイルまたは文字列です。ColdFusion 11 では、XML 形式のスタイルは削除されました。
title	オプション		チャートのタイトルです。
tipbgcolor	オプション	white	ヒントの背景色です。Flash 形式のグラフファイルのみに適用されます。 16 進数の値またはサポートされる色の名前を指定します。「使用方法」にある名前のリストを参照してください。 16 進数の値を入力するには、「##xxxxxx」という形式を使用します。ここで、x は 0～9 または A～F です。シャープ記号（#）は 2 つ使用するか、または使用しないでください。
tooltip	オプション		ツールヒントのスタイル設定に使用するキー（background、font、border など）の構造体です。
type	オプション		チャートのタイプです。
url	オプション		ユーザーがデータ系列の項目をクリックしたときに開く URL を指定します。onClick での移動先ページです。 URL の文字列内には変数を指定できます。ColdFusion により、変数の現在の値が渡されます。 $VALUE$：選択した行の値です。選択しない場合、値は空の文字列になります。 $ITEMLABEL$：選択した項目のラベルです。選択しない場合、値は空の文字列になります。 $SERIESLABEL$：選択した系列のラベルです。選択しない場合、値は空の文字列になります。例："somepage.cfm?item=$ITEMLABEL$&series=$SERIESLABEL$&value=$VALUE$ "javascript:..."：クライアントサイドのスクリプトを実行します。
width	オプション	320	チャートの幅です（単位：ピクセル）。
xAxis	オプション		x 軸のスタイル設定に使用するキー（format、guide、item、zooming、label など）の構造体です。後述の例を参照してください。
xAxis2	オプション		チャートの上部に表示される 2 番目の x 軸のスタイル設定に使用するキー（format、guide、item、label など）の構造体です。
xAxisTitle	オプション		x 軸に表示されるタイトルです。テキストで指定します。
xAxisType	オプション	category	X 軸がデータを表すか、または数値を表すかを指定します。 category：X 軸はデータカテゴリを表します。データは sortXAxis 属性に従って並べ替えられます。 scale：X 軸は数値を表します。すべてのcfchartdata アイテム属性値は数値でなければなりません。X 軸は自動的に数値順に並べ替えられます。
xAxisvalues	オプション		y 軸に表示する値の値の配列です。
xOffset	オプション	0.1	チャートを表示するときの水平方向の傾きを決める角度です。show3D="yes" の場合に適用されます。指定できる数値の範囲は -1～1 です。「-1」は左方向に 90 度、「1」は右方向に 90 度傾けることを意味します。
yaxis	オプション		y 軸のスタイル設定に使用するキー（format、guide、item、label など）の構造体です。
yaxis2	オプション		チャートの上部に表示される 2 番目の y 軸のスタイル設定に使用するキー（format、guide、item、label など）の構造体です。
yAxisTitle	オプション		y 軸のタイトルです。テキストで指定します。
yAxisType	オプション	category	y 軸は常にデータ値に使用されるので、現時点では効果ありません。
yaxisvalues	オプション		y 軸に表示する値の配列です。
yOffset	オプション	0.1	チャートを表示するときの垂直方向の傾きを決める角度です。show3D="yes" の場合に適用されます。指定できる数値の範囲は -1～1 です。ここで、「-1」は左方向に 90 度、「1」は右方向に 90 度傾けることを意味します。
zoom	オプション		チャートをズームしたときに適用されるキー（alpha、background、bevel など）の構造体です。後述の例を参照してください。

使用方法

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 でこれらのオプションを設定するには、サーバーの設定／チャートを選択します。
次の属性はサポートされていません：format、 labelformat 、 seriesplacement の percent の値、sort、xAxis、 url 、xAxisType、xOffset、yAxisType、yOffset。

注意：

DOCTYPE ではなく <!DOCTYPE html> を使用している場合、cfchart はブラウザーでサポートされている互換モードを使用します。標準の HTML 出力の場合、幅と高さは HTML 標準単位、つまり px、% などにする必要があります。互換モードでは、幅と高さの単位は px として解釈されます。

注意：

cfchart コードで <!DOCTYPE html> を使用する場合、format="html" は機能しません。

基本的なチャートの作成

次のサンプルコードを使用して、最初の基本的なチャートを作成します。

<cfchart format=&quot;html&quot; type=&quot;bar&quot; showlegend=&quot;false&quot; chartHeight=&quot;600&quot; chartWidth=&quot;400&quot; title=&quot;Basic Chart&quot;> <cfchartseries> <cfchartdata item=&quot;2015&quot; value=20> <cfchartdata item=&quot;2016&quot; value=40> <cfchartdata item=&quot;2017&quot; value=60> </cfchartseries> </cfchart>

出力

3D チャートの作成

上のチャートを 3D チャートに変換するには、次の例に示すように、cfchart タグ内に show3d 属性を指定し、true に設定します。

<cfchart format=&quot;html&quot; type=&quot;bar&quot; showlegend=&quot;false&quot; chartHeight=&quot;400&quot; chartWidth=&quot;600&quot; title=&quot;Basic Chart&quot; show3d=&quot;true&quot;> <cfchartseries> <cfchartdata item=&quot;2015&quot; value=20> <cfchartdata item=&quot;2016&quot; value=40> <cfchartdata item=&quot;2017&quot; value=60> </cfchartseries> </cfchart>

出力

チャートの JSON スタイルのカスタマイズ

cfchart では JSON ベースのスタイルを使用します。このスタイルは簡単にカスタマイズできます。ColdFusion には、チャートのタイプごとにデフォルトのスタイルが用意されています。ただし、独自のスタイルファイルを使用することで、このスタイルを上書きできます。次の例では、カスタムのスタイルファイルを使用して、タイトルのフォントと背景をカスタマイズします。

my_custom_style.json

{
 &quot;graphset&quot; : [ { &quot;type&quot; : &quot;bar&quot;, &quot;title&quot; : { &quot;font-size&quot; : 18, &quot;color&quot; : &quot;#FF0000&quot;, &quot;bold&quot; : true, &quot;font-family&quot; : &quot;Verdana&quot;, &quot;background-color&quot; : &quot;#cccccc&quot;, &quot;border-color&quot; : &quot;#cccccc&quot;, &quot;border-width&quot; : 1
   }
  }
 ]
}

この JSON を、次のように cfm ファイルで使用します。

<cfchart format=&quot;html&quot; type=&quot;bar&quot; showlegend=&quot;false&quot; chartHeight=&quot;400&quot; chartWidth=&quot;600&quot; style=&quot;my_custom_style.json&quot; title=&quot;Sales report&quot;> <cfchartseries> <cfchartdata item=&quot;2012&quot; value=#randrange(10,100)#> <cfchartdata item=&quot;2013&quot; value=#randrange(10,100)#> <cfchartdata item=&quot;2014&quot; value=#randrange(10,100)#> <cfchartdata item=&quot;2015&quot; value=#randrange(10,100)#> <cfchartdata item=&quot;2016&quot; value=#randrange(10,100)#> <cfchartdata item=&quot;2017&quot; value=#randrange(10,100)#> </cfchartseries> </cfchart>

出力

2 つの系列がある棒グラフの作成

次の cfm ファイルを使用して、2 つの系列がある棒グラフを作成します。

<cfchart format=&quot;html&quot; chartHeight=&quot;400&quot; chartWidth=&quot;600&quot; showLegend=&quot;no&quot; title=&quot;Two-series chart&quot;> <cfchartseries type=&quot;bar&quot; serieslabel=&quot;WBC&quot; markerstyle=&quot;circle&quot; color=&quot;red&quot;> <cfchartdata item=&quot;Day 1&quot; value=&quot;19.2&quot;/> <cfchartdata item=&quot;Day 2&quot; value=&quot;15.2&quot;/> <cfchartdata item=&quot;Day 3&quot; value=&quot;15.1&quot;/> <cfchartdata item=&quot;Day 4&quot; value=&quot;12.6&quot;/> <cfchartdata item=&quot;Day 5&quot; value=&quot;14.2&quot;/> </cfchartseries> <cfchartseries type=&quot;bar&quot; serieslabel=&quot;HCT&quot; markerstyle=&quot;diamond&quot; color=&quot;blue&quot; > <cfchartdata item=&quot;Day 1&quot; value=&quot;39.2&quot;/> <cfchartdata item=&quot;Day 2&quot; value=&quot;35.2&quot;/> <cfchartdata item=&quot;Day 3&quot; value=&quot;35.1&quot;/> <cfchartdata item=&quot;Day 4&quot; value=&quot;32.6&quot;/> <cfchartdata item=&quot;Day 5&quot; value=&quot;34.2&quot;/> </cfchartseries> </cfchart>

出力

折れ線グラフの作成

次の cfm ファイルを使用して、折れ線グラフを作成します。

<cfchart format=&quot;html&quot; chartHeight=&quot;400&quot; chartWidth=&quot;600&quot; showLegend=&quot;no&quot; title=&quot;Line chart&quot;> <cfchartseries type=&quot;line&quot; serieslabel=&quot;WBC&quot; markerstyle=&quot;circle&quot; color=&quot;red&quot;> <cfchartdata item=&quot;Day 1&quot; value=&quot;19.2&quot;/> <cfchartdata item=&quot;Day 2&quot; value=&quot;15.2&quot;/> <cfchartdata item=&quot;Day 3&quot; value=&quot;15.1&quot;/> <cfchartdata item=&quot;Day 4&quot; value=&quot;12.6&quot;/> <cfchartdata item=&quot;Day 5&quot; value=&quot;14.2&quot;/> </cfchartseries> </cfchart>

出力

2 つの系列がある折れ線グラフの作成

次の cfm ファイルを使用して、2 つの系列がある折れ線グラフを作成します。

<cfchart format=&quot;html&quot; chartHeight=&quot;400&quot; chartWidth=&quot;600&quot; showLegend=&quot;no&quot; title=&quot;Two-series Line chart&quot;> <cfchartseries type=&quot;line&quot; serieslabel=&quot;WBC&quot; markerstyle=&quot;circle&quot; color=&quot;red&quot;> <cfchartdata item=&quot;Day 1&quot; value=&quot;19.2&quot;/> <cfchartdata item=&quot;Day 2&quot; value=&quot;15.2&quot;/> <cfchartdata item=&quot;Day 3&quot; value=&quot;15.1&quot;/> <cfchartdata item=&quot;Day 4&quot; value=&quot;12.6&quot;/> <cfchartdata item=&quot;Day 5&quot; value=&quot;14.2&quot;/> </cfchartseries> <cfchartseries type=&quot;line&quot; serieslabel=&quot;HCT&quot; markerstyle=&quot;diamond&quot; color=&quot;blue&quot; > <cfchartdata item=&quot;Day 1&quot; value=&quot;39.2&quot;/> <cfchartdata item=&quot;Day 2&quot; value=&quot;35.2&quot;/> <cfchartdata item=&quot;Day 3&quot; value=&quot;35.1&quot;/> <cfchartdata item=&quot;Day 4&quot; value=&quot;32.6&quot;/> <cfchartdata item=&quot;Day 5&quot; value=&quot;34.2&quot;/> </cfchartseries> </cfchart>

出力

円グラフの作成

次のように cfchartdata 内にハードコーディングした値を使用して円グラフを作成できます。

<cfchart format=&quot;png&quot; chartWidth=&quot;600&quot; chartHeight=&quot;400&quot; pieSliceStyle=&quot;sliced&quot;> <cfchartseries type=&quot;pie&quot; serieslabel=&quot;Website Traffic 2016&quot;> <cfchartdata item=&quot;January&quot; value=&quot;#randRange(500000,1000000)#&quot;> <cfchartdata item=&quot;February&quot; value=&quot;#randRange(500000,1000000)#&quot;> <cfchartdata item=&quot;March&quot; value=&quot;#randRange(500000,1000000)#&quot;> <cfchartdata item=&quot;April&quot; value=&quot;#randRange(500000,1000000)#&quot;> <cfchartdata item=&quot;May&quot; value=&quot;#randRange(500000,1000000)#&quot;> <cfchartdata item=&quot;June&quot; value=&quot;#randRange(500000,1000000)#&quot;> </cfchartseries> </cfchart>

出力

データベースのデータを使用した円グラフの作成

データベースからデータをインポートし、値列に基づいて円グラフを作成することもできます。

<cfquery name=&quot;qEmployee&quot; datasource=&quot;cfdocexamples&quot; maxRows=&quot;6&quot;> SELECT FirstName, LastName, Salary FROM EMPLOYEE </cfquery> <cfchart format=&quot;html&quot; pieslicestyle=&quot;solid&quot; chartWidth=&quot;600&quot; chartHeight=&quot;400&quot;> <cfchartseries query=&quot;qEmployee&quot; type=&quot;pie&quot; serieslabel=&quot;Salary Details 2016&quot; valuecolumn=&quot;Salary&quot; itemcolumn=&quot;FirstName&quot;> </cfchartseries> </cfchart>

出力

動的に更新されるチャートの作成

動的チャートの主な用途は、データのリアルタイム表示です。このような場合、チャートに新しいデータを一定間隔で表示する必要があります。

フル更新フィードを使用すると、チャート全体を一定間隔で更新できます。古い値には関連性がなく、最新の数値を表示するだけでいい場合は、フル更新チャートを使用します。

このようなチャートでは、指定した間隔でチャートが最新データの取得を試みる URL が必要です。

<! --- refresh.cfm ---> <cfchart format=&quot;html&quot; refresh=&quot;#{&quot;type&quot;=&quot;full&quot;,&quot;interval&quot;:&quot;2&quot;,&quot;url&quot;:&quot;feed.cfm&quot;}#&quot; chartWidth=&quot;800&quot; chartHeight=&quot;600&quot;/>

<! --- feed.cfm ---> <cfscript> values1=values2=values3=[]; for (i=1;i<=5;i++){ values1[i]=randRange(20,40); } for (i=1;i<=5;i++){ values2[i]=randRange(40,60); } for (i=1;i<=5;i++){ values3[i]=randRange(60,80); } </cfscript> { &quot;graphset&quot; : [ { &quot;type&quot; : &quot;bar&quot;, &quot;refresh&quot; : { &quot;type&quot; : &quot;full&quot;, &quot;interval&quot; : 2 }, &quot;title&quot; : { &quot;text&quot; : &quot;Full Refresh Chart&quot; }, &quot;series&quot; : [ { &quot;values&quot; : <cfoutput>#serializeJSON(values1)#</cfoutput> }, { &quot;values&quot; : <cfoutput>#serializeJSON(values2)#</cfoutput> }, { &quot;values&quot; : <cfoutput>#serializeJSON(values3)#</cfoutput>
     }] 
  }]
}

ダウンロード

ファイルを取得する

クリックすると出力が表示されます。これは MP4 ムービーファイルです。

arrows 属性の使用

<cfscript> arrows=[{&quot;backgroundColor&quot;:&quot;red&quot;,&quot;label&quot;:{&quot;text&quot;:&quot;Data for 2017&quot;,&quot;bold&quot;:true,&quot;backgroundColor&quot;:&quot;white&quot;}, &quot;size&quot;:6,&quot;from&quot;:{&quot;x&quot;:200,&quot;y&quot;:100},&quot;to&quot;:{&quot;x&quot;:400,&quot;y&quot;:200}}]; </cfscript> <cfchart format=&quot;html&quot; type=&quot;bar&quot; showlegend=&quot;false&quot; chartHeight=&quot;400&quot; chartWidth=&quot;600&quot; title=&quot;Chart with arrow&quot; show3d=&quot;true&quot; arrows=&quot;#arrows#&quot;> <cfchartseries > <cfchartdata item=&quot;2015&quot; value=20> <cfchartdata item=&quot;2016&quot; value=40> <cfchartdata item=&quot;2017&quot; value=60> </cfchartseries> </cfchart>

出力

true3d=false の場合の aspect3d 属性の使用

<cfscript> aspect3d={&quot;angle&quot;:90,&quot;depth&quot;:100,&quot;true3d&quot;:false}; </cfscript> <cfchart format=&quot;html&quot; chartHeight=&quot;400&quot; chartWidth=&quot;600&quot; showLegend=&quot;no&quot; title=&quot;Two-series chart&quot; aspect3d=&quot;#aspect3d#&quot; show3d=&quot;true&quot;> <cfchartseries type=&quot;bar&quot; serieslabel=&quot;WBC&quot; markerstyle=&quot;circle&quot; color=&quot;red&quot;> <cfchartdata item=&quot;Day 1&quot; value=&quot;19.2&quot;/> <cfchartdata item=&quot;Day 2&quot; value=&quot;15.2&quot;/> <cfchartdata item=&quot;Day 3&quot; value=&quot;15.1&quot;/> <cfchartdata item=&quot;Day 4&quot; value=&quot;12.6&quot;/> <cfchartdata item=&quot;Day 5&quot; value=&quot;14.2&quot;/> </cfchartseries> <cfchartseries type=&quot;bar&quot; serieslabel=&quot;HCT&quot; markerstyle=&quot;diamond&quot; color=&quot;blue&quot; > <cfchartdata item=&quot;Day 1&quot; value=&quot;39.2&quot;/> <cfchartdata item=&quot;Day 2&quot; value=&quot;35.2&quot;/> <cfchartdata item=&quot;Day 3&quot; value=&quot;35.1&quot;/> <cfchartdata item=&quot;Day 4&quot; value=&quot;32.6&quot;/> <cfchartdata item=&quot;Day 5&quot; value=&quot;34.2&quot;/> </cfchartseries> </cfchart>

出力

true3d=true の場合の aspect3d 属性の使用

<cfscript> aspect3d={&quot;angle&quot;:90,&quot;depth&quot;:100,&quot;true3d&quot;:true}; </cfscript> <cfchart format=&quot;html&quot; chartHeight=&quot;400&quot; chartWidth=&quot;600&quot; showLegend=&quot;no&quot; title=&quot;Two-series chart&quot; aspect3d=&quot;#aspect3d#&quot; show3d=&quot;true&quot;> <cfchartseries type=&quot;bar&quot; serieslabel=&quot;WBC&quot; markerstyle=&quot;circle&quot; color=&quot;red&quot;> <cfchartdata item=&quot;Day 1&quot; value=&quot;19.2&quot;/> <cfchartdata item=&quot;Day 2&quot; value=&quot;15.2&quot;/> <cfchartdata item=&quot;Day 3&quot; value=&quot;15.1&quot;/> <cfchartdata item=&quot;Day 4&quot; value=&quot;12.6&quot;/> <cfchartdata item=&quot;Day 5&quot; value=&quot;14.2&quot;/> </cfchartseries> <cfchartseries type=&quot;bar&quot; serieslabel=&quot;HCT&quot; markerstyle=&quot;diamond&quot; color=&quot;blue&quot; > <cfchartdata item=&quot;Day 1&quot; value=&quot;39.2&quot;/> <cfchartdata item=&quot;Day 2&quot; value=&quot;35.2&quot;/> <cfchartdata item=&quot;Day 3&quot; value=&quot;35.1&quot;/> <cfchartdata item=&quot;Day 4&quot; value=&quot;32.6&quot;/> <cfchartdata item=&quot;Day 5&quot; value=&quot;34.2&quot;/> </cfchartseries> </cfchart>

出力

background 属性の使用

<cfscript> background={}; background={&quot;color&quot;:&quot;red&quot;,&quot;color-2&quot;:&quot;green&quot;}; </cfscript> <cfchart format=&quot;html&quot; scalefrom=&quot;0&quot; scaleto=&quot;1200000&quot; showlegend=&quot;true&quot; chartheight=&quot;400&quot; chartwidth=&quot;600&quot; background=&quot;#background#&quot; > <cfchartseries type=&quot;bar&quot; serieslabel=&quot;Website Traffic 2016&quot; seriescolor=&quot;blue&quot;> <cfchartdata item=&quot;January&quot; value=&quot;503100&quot;> <cfchartdata item=&quot;February&quot; value=&quot;720310&quot;> <cfchartdata item=&quot;March&quot; value=&quot;688700&quot;> <cfchartdata item=&quot;April&quot; value=&quot;986500&quot;> <cfchartdata item=&quot;May&quot; value=&quot;1063911&quot;> <cfchartdata item=&quot;June&quot; value=&quot;1115321&quot;> </cfchartseries> <cfchartseries type=&quot;bar&quot; serieslabel=&quot;Website Traffic 2015&quot; seriescolor=&quot;yellow&quot;> <cfchartdata item=&quot;January&quot; value=&quot;#RandRange(300000, 900000)#&quot;> <cfchartdata item=&quot;February&quot; value=&quot;#RandRange(300000, 900000)#&quot;> <cfchartdata item=&quot;March&quot; value=&quot;#RandRange(300000, 900000)#&quot;> <cfchartdata item=&quot;April&quot; value=&quot;#RandRange(300000, 900000)#&quot;> <cfchartdata item=&quot;May&quot; value=&quot;#RandRange(300000, 900000)#&quot;> <cfchartdata item=&quot;June&quot; value=&quot;#RandRange(300000, 900000)#&quot;> </cfchartseries> </cfchart>

出力

border 属性の使用

<cfscript> border={&quot;color&quot;:&quot;blue&quot;,&quot;radius&quot;:6,&quot;width&quot;:2}; </cfscript> <cfchart format=&quot;html&quot; type=&quot;bar&quot; showlegend=&quot;false&quot; chartHeight=&quot;400&quot; chartWidth=&quot;600&quot; border=&quot;#border#&quot;> <cfchartseries > <cfchartdata item=&quot;2015&quot; value=20> <cfchartdata item=&quot;2016&quot; value=40> <cfchartdata item=&quot;2017&quot; value=60> </cfchartseries> </cfchart>

出力

crosshair 属性の使用

<cfscript> crosshair={&quot;line-color&quot;:&quot;green&quot;,&quot;line-style&quot;:&quot;dashed&quot;,&quot;alpha&quot;=1}; </cfscript> <cfchart format=&quot;html&quot; chartHeight=&quot;400&quot; chartWidth=&quot;600&quot; showLegend=&quot;no&quot; title=&quot;Two-series chart&quot; crosshair=&quot;#crosshair#&quot;> <cfchartseries type=&quot;bar&quot; serieslabel=&quot;WBC&quot; markerstyle=&quot;circle&quot; color=&quot;red&quot;> <cfchartdata item=&quot;Day 1&quot; value=&quot;19.2&quot;/> <cfchartdata item=&quot;Day 2&quot; value=&quot;15.2&quot;/> <cfchartdata item=&quot;Day 3&quot; value=&quot;15.1&quot;/> <cfchartdata item=&quot;Day 4&quot; value=&quot;12.6&quot;/> <cfchartdata item=&quot;Day 5&quot; value=&quot;14.2&quot;/> </cfchartseries> <cfchartseries type=&quot;bar&quot; serieslabel=&quot;HCT&quot; markerstyle=&quot;diamond&quot; color=&quot;blue&quot; > <cfchartdata item=&quot;Day 1&quot; value=&quot;39.2&quot;/> <cfchartdata item=&quot;Day 2&quot; value=&quot;35.2&quot;/> <cfchartdata item=&quot;Day 3&quot; value=&quot;35.1&quot;/> <cfchartdata item=&quot;Day 4&quot; value=&quot;32.6&quot;/> <cfchartdata item=&quot;Day 5&quot; value=&quot;34.2&quot;/> </cfchartseries> </cfchart>

出力

fill 属性の使用

<cfscript> fill={&quot;angle&quot;:45,&quot;background-color-1&quot;:&quot;gray&quot;,&quot;background-color-2&quot;:&quot;yellow&quot;}; </cfscript> <cfchart format=&quot;html&quot; chartHeight=&quot;400&quot; chartWidth=&quot;600&quot; showLegend=&quot;no&quot; title=&quot;Two-series chart&quot; fill=&quot;#fill#&quot;> <cfchartseries type=&quot;bar&quot; serieslabel=&quot;WBC&quot; markerstyle=&quot;circle&quot; color=&quot;red&quot;> <cfchartdata item=&quot;Day 1&quot; value=&quot;19.2&quot;/> <cfchartdata item=&quot;Day 2&quot; value=&quot;15.2&quot;/> <cfchartdata item=&quot;Day 3&quot; value=&quot;15.1&quot;/> <cfchartdata item=&quot;Day 4&quot; value=&quot;12.6&quot;/> <cfchartdata item=&quot;Day 5&quot; value=&quot;14.2&quot;/> </cfchartseries> <cfchartseries type=&quot;bar&quot; serieslabel=&quot;HCT&quot; markerstyle=&quot;diamond&quot; color=&quot;blue&quot; > <cfchartdata item=&quot;Day 1&quot; value=&quot;39.2&quot;/> <cfchartdata item=&quot;Day 2&quot; value=&quot;35.2&quot;/> <cfchartdata item=&quot;Day 3&quot; value=&quot;35.1&quot;/> <cfchartdata item=&quot;Day 4&quot; value=&quot;32.6&quot;/> <cfchartdata item=&quot;Day 5&quot; value=&quot;34.2&quot;/> </cfchartseries> </cfchart>

出力

labels 属性の使用

<cfscript> labels=[{&quot;text&quot;:&quot;Sample comparison line chart&quot;,&quot;font-family&quot;:&quot;Verdana&quot;,&quot;font-size&quot;:18}]; </cfscript> <cfchart format=&quot;html&quot; chartHeight=&quot;400&quot; chartWidth=&quot;600&quot; showLegend=&quot;no&quot; labels=&quot;#labels#&quot;> <cfchartseries type=&quot;line&quot; serieslabel=&quot;WBC&quot; markerstyle=&quot;circle&quot; color=&quot;red&quot;> <cfchartdata item=&quot;Day 1&quot; value=&quot;19.2&quot;/> <cfchartdata item=&quot;Day 2&quot; value=&quot;15.2&quot;/> <cfchartdata item=&quot;Day 3&quot; value=&quot;15.1&quot;/> <cfchartdata item=&quot;Day 4&quot; value=&quot;12.6&quot;/> <cfchartdata item=&quot;Day 5&quot; value=&quot;14.2&quot;/> </cfchartseries> <cfchartseries type=&quot;line&quot; serieslabel=&quot;HCT&quot; markerstyle=&quot;diamond&quot; color=&quot;blue&quot; > <cfchartdata item=&quot;Day 1&quot; value=&quot;39.2&quot;/> <cfchartdata item=&quot;Day 2&quot; value=&quot;35.2&quot;/> <cfchartdata item=&quot;Day 3&quot; value=&quot;35.1&quot;/> <cfchartdata item=&quot;Day 4&quot; value=&quot;32.6&quot;/> <cfchartdata item=&quot;Day 5&quot; value=&quot;34.2&quot;/> </cfchartseries> </cfchart>

出力

legend 属性の使用

<cfscript> legend={&quot;background-color&quot;:&quot;lightgray&quot;}; </cfscript> <cfchart format=&quot;html&quot; title=&quot;Graph&quot; chartHeight=&quot;400&quot; chartWidth=&quot;600&quot; showLegend=&quot;yes&quot; legend=&quot;#legend#&quot;> <cfchartseries type=&quot;line&quot; serieslabel=&quot;WBC&quot; markerstyle=&quot;circle&quot; color=&quot;red&quot;> <cfchartdata item=&quot;Day 1&quot; value=&quot;19.2&quot;/> <cfchartdata item=&quot;Day 2&quot; value=&quot;15.2&quot;/> <cfchartdata item=&quot;Day 3&quot; value=&quot;15.1&quot;/> <cfchartdata item=&quot;Day 4&quot; value=&quot;12.6&quot;/> <cfchartdata item=&quot;Day 5&quot; value=&quot;14.2&quot;/> </cfchartseries> <cfchartseries type=&quot;line&quot; serieslabel=&quot;HCT&quot; markerstyle=&quot;diamond&quot; color=&quot;blue&quot; > <cfchartdata item=&quot;Day 1&quot; value=&quot;39.2&quot;/> <cfchartdata item=&quot;Day 2&quot; value=&quot;35.2&quot;/> <cfchartdata item=&quot;Day 3&quot; value=&quot;35.1&quot;/> <cfchartdata item=&quot;Day 4&quot; value=&quot;32.6&quot;/> <cfchartdata item=&quot;Day 5&quot; value=&quot;34.2&quot;/> </cfchartseries> </cfchart>

出力

plot 属性の使用

<cfscript> plot={&quot;rules&quot;:[ { &quot;rule&quot;:&quot;%v<700000&quot;, &quot;background-color&quot;:&quot;green&quot; // 700000 未満の値がすべて緑色の棒で }, // グラフに表示されるルールを設定 { &quot;rule&quot;:&quot;%v>700000&quot;, // 700000 より大きい値がすべて赤色の棒で &quot;background-color&quot;:&quot;red&quot; // グラフに表示されるルールを設定 } ]}; </cfscript> <cfchart format=&quot;html&quot; scalefrom=&quot;0&quot; scaleto=&quot;1200000&quot; showlegend=&quot;false&quot; chartheight=&quot;400&quot; chartwidth=&quot;600&quot; plot=&quot;#plot#&quot; title=&quot;Website Traffic 2016&quot;> <cfchartseries type=&quot;bar&quot;> <cfchartdata item=&quot;January&quot; value=&quot;503100&quot;> <cfchartdata item=&quot;February&quot; value=&quot;620310&quot;> <cfchartdata item=&quot;March&quot; value=&quot;688700&quot;> <cfchartdata item=&quot;April&quot; value=&quot;986500&quot;> <cfchartdata item=&quot;May&quot; value=&quot;1063911&quot;> <cfchartdata item=&quot;June&quot; value=&quot;1115321&quot;> </cfchartseries> </cfchart>

出力

preview 属性の使用

<cfscript> n=200; preview={&quot;visible&quot;:true,&quot;live&quot;:true,&quot;preserve-zoom&quot;:true,&quot;border-width&quot;:&quot;3&quot;}; // preview 構造体 myarray=[]; for (i=1;i<=n;i++){ myarray[i]=randrange(1,n); } strengtharray=[]; for (i=1;i<=n;i++){ strengtharray[i]=randrange(15,25); } myquery=QueryNew(&quot;points,data,strength&quot;,&quot;integer,integer,integer&quot;); for (i=1;i<=arraylen(myarray);i++){ queryAddRow(myquery); querySetCell(myquery,&quot;points&quot;,myarray[i]); querySetCell(myquery,&quot;data&quot;,i); querySetCell(myquery,&quot;strength&quot;,strengtharray[i]); } cfchart(format = &quot;html&quot;, title = &quot;Report&quot;, scalefrom=&quot;1&quot;, scaleto=&quot;#n#&quot;,chartheight=&quot;400&quot;,chartwidth=&quot;600&quot;, preview=&quot;#preview#&quot;) { cfchartseries(query=&quot;myquery&quot;,type=&quot;line&quot; ,valuecolumn=&quot;points&quot; ,itemcolumn=&quot;data&quot; , zcolumn=&quot;strength&quot;); } </cfscript>

出力

seriesPlacement 属性の使用

<cfchart format=&quot;html&quot; title=&quot;Graph&quot; chartHeight=&quot;400&quot; chartWidth=&quot;600&quot; showLegend=&quot;yes&quot; seriesPlacement=&quot;stacked&quot;> <cfchartseries type=&quot;bar&quot; serieslabel=&quot;WBC&quot; markerstyle=&quot;circle&quot; color=&quot;red&quot;> <cfchartdata item=&quot;Day 1&quot; value=&quot;19.2&quot;/> <cfchartdata item=&quot;Day 2&quot; value=&quot;15.2&quot;/> <cfchartdata item=&quot;Day 3&quot; value=&quot;15.1&quot;/> <cfchartdata item=&quot;Day 4&quot; value=&quot;12.6&quot;/> <cfchartdata item=&quot;Day 5&quot; value=&quot;14.2&quot;/> </cfchartseries> <cfchartseries type=&quot;bar&quot; serieslabel=&quot;HCT&quot; markerstyle=&quot;diamond&quot; color=&quot;blue&quot; > <cfchartdata item=&quot;Day 1&quot; value=&quot;39.2&quot;/> <cfchartdata item=&quot;Day 2&quot; value=&quot;35.2&quot;/> <cfchartdata item=&quot;Day 3&quot; value=&quot;35.1&quot;/> <cfchartdata item=&quot;Day 4&quot; value=&quot;32.6&quot;/> <cfchartdata item=&quot;Day 5&quot; value=&quot;34.2&quot;/> </cfchartseries> </cfchart>

出力

scales 属性の使用

例 1

<cfchart format=&quot;html&quot; chartHeight=&quot;400&quot; chartWidth=&quot;600&quot; showLegend=&quot;no&quot; title=&quot;Two-series Line chart&quot; scales=&quot;x,y&quot;> <cfchartseries type=&quot;line&quot; serieslabel=&quot;WBC&quot; markerstyle=&quot;circle&quot; color=&quot;red&quot; scales=&quot;x2,y2&quot;> <cfchartdata item=&quot;Day 1&quot; value=&quot;19.2&quot;/> <cfchartdata item=&quot;Day 2&quot; value=&quot;15.2&quot;/> <cfchartdata item=&quot;Day 3&quot; value=&quot;15.1&quot;/> <cfchartdata item=&quot;Day 4&quot; value=&quot;12.6&quot;/> <cfchartdata item=&quot;Day 5&quot; value=&quot;14.2&quot;/> </cfchartseries> <cfchartseries type=&quot;line&quot; serieslabel=&quot;HCT&quot; markerstyle=&quot;diamond&quot; color=&quot;blue&quot; > <cfchartdata item=&quot;Day 1&quot; value=&quot;39.2&quot;/> <cfchartdata item=&quot;Day 2&quot; value=&quot;35.2&quot;/> <cfchartdata item=&quot;Day 3&quot; value=&quot;35.1&quot;/> <cfchartdata item=&quot;Day 4&quot; value=&quot;32.6&quot;/> <cfchartdata item=&quot;Day 5&quot; value=&quot;34.2&quot;/> </cfchartseries> </cfchart>

出力

例 2

<cfchart format=&quot;html&quot; chartHeight=&quot;400&quot; chartWidth=&quot;600&quot; showLegend=&quot;no&quot; title=&quot;Two-series Line chart&quot; scales=&quot;x,y&quot;> <cfchartseries type=&quot;line&quot; serieslabel=&quot;WBC&quot; markerstyle=&quot;circle&quot; color=&quot;red&quot;> <cfchartdata item=&quot;Day 1&quot; value=&quot;19.2&quot;/> <cfchartdata item=&quot;Day 2&quot; value=&quot;15.2&quot;/> <cfchartdata item=&quot;Day 3&quot; value=&quot;15.1&quot;/> <cfchartdata item=&quot;Day 4&quot; value=&quot;12.6&quot;/> <cfchartdata item=&quot;Day 5&quot; value=&quot;14.2&quot;/> </cfchartseries> <cfchartseries type=&quot;line&quot; serieslabel=&quot;HCT&quot; markerstyle=&quot;diamond&quot; color=&quot;blue&quot; scales=&quot;x2,y2&quot;> <cfchartdata item=&quot;Day 1&quot; value=&quot;39.2&quot;/> <cfchartdata item=&quot;Day 2&quot; value=&quot;35.2&quot;/> <cfchartdata item=&quot;Day 3&quot; value=&quot;35.1&quot;/> <cfchartdata item=&quot;Day 4&quot; value=&quot;32.6&quot;/> <cfchartdata item=&quot;Day 5&quot; value=&quot;34.2&quot;/> </cfchartseries> </cfchart>

出力

xAxis 属性の使用

<cfscript> n=200; preview={&quot;visible&quot;:true,&quot;live&quot;:true,&quot;preserve-zoom&quot;:true,&quot;border-width&quot;:&quot;0&quot;}; // preview 構造体 xAxis={&quot;label&quot;:{&quot;text&quot;:&quot;Drag the handles to zoom in to the chart&quot;,&quot;color&quot;:&quot;red&quot;},&quot;zooming&quot;:true}; myarray=[]; for (i=1;i<=n;i++){ myarray[i]=randrange(1,n); } strengtharray=[]; for (i=1;i<=n;i++){ strengtharray[i]=randrange(15,25); } myquery=QueryNew(&quot;points,data,strength&quot;,&quot;integer,integer,integer&quot;); for (i=1;i<=arraylen(myarray);i++){ queryAddRow(myquery); querySetCell(myquery,&quot;points&quot;,myarray[i]); querySetCell(myquery,&quot;data&quot;,i); querySetCell(myquery,&quot;strength&quot;,strengtharray[i]); } cfchart(format = &quot;html&quot;, title = &quot;Report&quot;, scalefrom=&quot;1&quot;, scaleto=&quot;#n#&quot;,chartheight=&quot;600&quot;,chartwidth=&quot;800&quot;, preview=&quot;#preview#&quot;,xaxis=&quot;#xaxis#&quot;) { cfchartseries(query=&quot;myquery&quot;,type=&quot;line&quot; ,valuecolumn=&quot;points&quot; ,itemcolumn=&quot;data&quot; , zcolumn=&quot;strength&quot;); } </cfscript>

zoom 属性の使用

<cfscript> n=200; preview={&quot;visible&quot;:true,&quot;live&quot;:true,&quot;preserve-zoom&quot;:true,&quot;border-width&quot;:&quot;0&quot;}; // preview 構造体 xAxis={&quot;label&quot;:{&quot;text&quot;:&quot;Drag the handles to zoom in to the chart&quot;,&quot;color&quot;:&quot;red&quot;},&quot;zooming&quot;:true}; zoom={&quot;alpha&quot;:&quot;0.3&quot;,&quot;border-color&quot;:&quot;black&quot;,&quot;border-width&quot;:4,&quot;background-color&quot;:&quot;gray&quot;,&quot;label&quot;:{&quot;border-color&quot;:&quot;red&quot;,&quot;border-width&quot;:2,&quot;font-size&quot;:10}}; myarray=[]; for (i=1;i<=n;i++){ myarray[i]=randrange(1,n); } strengtharray=[]; for (i=1;i<=n;i++){ strengtharray[i]=randrange(15,25); } myquery=QueryNew(&quot;points,data,strength&quot;,&quot;integer,integer,integer&quot;); for (i=1;i<=arraylen(myarray);i++){ queryAddRow(myquery); querySetCell(myquery,&quot;points&quot;,myarray[i]); querySetCell(myquery,&quot;data&quot;,i); querySetCell(myquery,&quot;strength&quot;,strengtharray[i]); } cfchart(format = &quot;html&quot;, title = &quot;Report&quot;, scalefrom=&quot;1&quot;, scaleto=&quot;#n#&quot;,chartheight=&quot;600&quot;,chartwidth=&quot;800&quot;, preview=&quot;#preview#&quot;,xaxis=&quot;#xaxis#&quot;,zoom=&quot;#zoom#&quot;) { cfchartseries(query=&quot;myquery&quot;,type=&quot;line&quot; ,valuecolumn=&quot;points&quot; ,itemcolumn=&quot;data&quot; , zcolumn=&quot;strength&quot;); } </cfscript>

ヘルプをすばやく簡単に入手

新規ユーザーの場合