cfchart の概要

検索

最終更新日 : 2025年3月31日

ColdFusion

アプリを開く

CFML リファレンスユーザーガイド

ColdFusion 関数

カテゴリ別の ColdFusion 関数
関数 a～b
1. Abs
2. ACos
3. AddSOAPRequestHeader
4. AddSOAPResponseHeader
5. AjaxLink
6. AjaxOnLoad
7. ApplicationStop
8. ArrayAppend
9. ArrayAvg
10. ArrayClear
11. ArrayContains
12. ArrayContainsNoCase
13. ArrayDelete
14. ArrayDeleteAt
15. ArrayDeleteNoCase
16. ArrayEach
17. ArrayFilter
18. ArrayFind
19. ArrayFindAll
20. ArrayFindAllNoCase
21. ArrayFindNoCase
22. ArrayInsertAt
23. ArrayIsDefined
24. ArrayIsEmpty
25. ArrayLen
26. ArrayMap
27. ArrayMax
28. ArrayMin
29. ArrayNew
30. ArrayPrepend
31. ArrayReduce
32. ArrayResize
33. ArraySet
34. ArraySetMetadata
35. ArraySlice
36. ArraySort
37. ArraySum
38. ArraySwap
39. ArrayToList
40. Asc
41. ASin
42. Atn
43. AuthenticatedContext
44. AuthenticatedUser
45. BinaryDecode
46. BinaryEncode
47. BitAnd
48. BitMaskClear
49. BitMaskRead
50. BitMaskSet
51. BitNot
52. BitOr
53. BitSHLN
54. BitSHRN
55. BitXor
56. BooleanFormat
関数 c～d
関数 e～g
関数 h～im
関数 in～k
関数 l
関数 m～r
関数 s
関数 t～z
1. Tan
2. ThreadJoin
3. ThreadTerminate
4. Throw
5. TimeFormat
6. ToBase64
7. ToBinary
8. ToScript
9. ToString
10. Trace
11. Transactionandconcurrency
12. TransactionCommit
13. TransactionRollback
14. TransactionSetSavePoint
15. Trim
16. UCase
17. URLDecode
18. URLEncodedFormat
19. URLSessionFormat
20. Val
21. ValueList
22. VerifyClient
23. Week
24. Wrap
25. WriteDump
26. WriteLog
27. WriteOutput
28. WSGetAllChannels
29. WSGetSubscribers
30. WSPublish
31. WSSendMessage
32. XmlChildPos
33. XmlElemNew
34. XmlFormat
35. XmlGetNodeType
36. XmlNew
37. XmlParse
38. XmlSearch
39. XmlTransform
40. XmlValidate
41. Year
42. YesNoFormat

ColdFusion のタグ

ColdFusion タグの概要
カテゴリ別の ColdFusion タグ
1. アプリケーションフレームワークタグ
  1. cfapplication
  2. cfassociate
  3. cferror
  4. cfimport
  5. cfinterface
  6. cflock
  7. CFScript の
  8. cfthread
2. 通信タグ
3. データベース操作タグ
4. データ出力タグ
  1. cfchart
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
タグ a～b
タグ c
タグ f
タグ 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
タグ 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
タグ j～l
タグ m～o
タグ 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
タグ 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
タグ 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
タグ u～z
1. cfupdate
2. cfwddx
3. cfwebsocket
4. cfwindow
5. cfxml
6. cfzip
7. cfzipparam

CFML リファレンス

クラウドサービス

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
  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 リファレンス
クラウドサービス

警告 :

FORMAT="flash" は、Adobe ColdFusion（2025 リリース）で削除されました。

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

ColdFusion の cfchart タグを使用すると、チャートを生成および表示できます。これは、棒グラフ、折れ線グラフ、円グラフ、面グラフ、横棒グラフ、円錐グラフ、曲線グラフ、円柱グラフ、階段グラフ、散布図などの様々なタイプのチャートを作成するために使用できます。

カテゴリ

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

シンタックス

<cfchart

format=“html”

style = “JSON filename”>

</cfchart>

<cfchart format=“html” style = “JSON filename”> </cfchart>

<!--- この構文では、JSON ファイルを使用してチャートのスタイルを指定します。--->
<cfchart
format=“html”
style = “JSON filename”>
</cfchart>

<cfchart

alpha = “value between 0 and 1”

arrows = “JSON string representation”

aspect3D = “JSON string representation”

background = “JSON string representation”

base64=“true | false”

bevel = “JSON string representation”

border = “JSON string representation”

backgroundColor = “hexadecimal value|web color”

chartHeight = “integer number of pixels”

chartWidth = “integer number of pixels”

crosshair = “JSON string representation”

dataBackgroundColor = “hexadecimal value|web color”

fill = “JSON string representation”

font = “font name”

fontBold = “yes|no”

fontItalic = “yes|no”

fontSize = “font size”

foregroundColor = “hexadecimal value|web color”

format = “jpg|png|html|svg”

gridlines = “integer number of lines”

height = “height in pixels”

width = “width in pixels”

ID = “chart identifier”

labels = “JSON string representation”

legend = “JSON string representation”

labelFormat = “number|currency|percent|date”

markers = “JSON string representation”

markerSize = “integer number of pixels”

name = “string”

options=“struct”

pieSliceStyle = “solid|sliced”

plot = “JSON string representation”

plotarea = “JSON string representation”

preview = “JSON string representation”

refresh = “canvas|flash|svg|vml”

renderer = “canvas|flash|svg|vml”

scales = “comma-seperated list of axes”

scaleR=“scales for pie and gauge charts”

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”

showScaleMarkers=“yes|no”

showXGridlines = “yes|no”

showYGridlines = “yes|no”

sortXAxis = “yes|no”

tipBGColor = “hexadecimal value|web color”

title = “title of chart”

tooltip = “JSON string representation”

theme=“default or custom theme”

url = “onClick destination page”

x=“x coordinate”

xAxis = “JSON string representation”

xAxis2 = “JSON string representation”

xAxisTitle = “title text”

xAxisType = “scale|category”

xAxisValues = “Array of values”

xOffset = “number between -1 and 1”

y=“y coordinate”

yAxis = “JSON string representation”

yAxis2 = “JSON string representation”

yAxisTitle = “title text”

yAxisType = “scale|category”

yAxisValues = “Array of values”

yOffset = “number between -1 and 1”

zoom = “JSON string representation”

</cfchart>

<cfchart alpha = “value between 0 and 1” arrows = “JSON string representation” aspect3D = “JSON string representation” background = “JSON string representation” base64=“true | false” bevel = “JSON string representation” border = “JSON string representation” backgroundColor = “hexadecimal value|web color” chartHeight = “integer number of pixels” chartWidth = “integer number of pixels” crosshair = “JSON string representation” dataBackgroundColor = “hexadecimal value|web color” fill = “JSON string representation” font = “font name” fontBold = “yes|no” fontItalic = “yes|no” fontSize = “font size” foregroundColor = “hexadecimal value|web color” format = “jpg|png|html|svg” gridlines = “integer number of lines” height = “height in pixels” width = “width in pixels” ID = “chart identifier” labels = “JSON string representation” legend = “JSON string representation” labelFormat = “number|currency|percent|date” markers = “JSON string representation” markerSize = “integer number of pixels” name = “string” options=“struct” pieSliceStyle = “solid|sliced” plot = “JSON string representation” plotarea = “JSON string representation” preview = “JSON string representation” refresh = “canvas|flash|svg|vml” renderer = “canvas|flash|svg|vml” scales = “comma-seperated list of axes” scaleR=“scales for pie and gauge charts” 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” showScaleMarkers=“yes|no” showXGridlines = “yes|no” showYGridlines = “yes|no” sortXAxis = “yes|no” tipBGColor = “hexadecimal value|web color” title = “title of chart” tooltip = “JSON string representation” theme=“default or custom theme” url = “onClick destination page” x=“x coordinate” xAxis = “JSON string representation” xAxis2 = “JSON string representation” xAxisTitle = “title text” xAxisType = “scale|category” xAxisValues = “Array of values” xOffset = “number between -1 and 1” y=“y coordinate” yAxis = “JSON string representation” yAxis2 = “JSON string representation” yAxisTitle = “title text” yAxisType = “scale|category” yAxisValues = “Array of values” yOffset = “number between -1 and 1” zoom = “JSON string representation” </cfchart>

<!--- この構文では、cfchart タグの属性を使用してチャートのスタイルを指定します。--->  
<cfchart  
alpha = “value between 0 and 1”  
arrows = “JSON string representation”  
aspect3D = “JSON string representation”  
background = “JSON string representation”  
base64=“true | false” 
bevel = “JSON string representation”  
border = “JSON string representation”  
backgroundColor = “hexadecimal value|web color”  
chartHeight = “integer number of pixels”  
chartWidth = “integer number of pixels”  
crosshair = “JSON string representation”  
dataBackgroundColor = “hexadecimal value|web color” 
fill = “JSON string representation”  
font = “font name”  
fontBold = “yes|no”  
fontItalic = “yes|no”  
fontSize = “font size”  
foregroundColor = “hexadecimal value|web color”  
format = “jpg|png|html|svg”  
gridlines = “integer number of lines”  
height = “height in pixels” 
width = “width in pixels” 
ID = “chart identifier”  
labels = “JSON string representation”  
legend = “JSON string representation”  
labelFormat = “number|currency|percent|date”  
markers = “JSON string representation”  
markerSize = “integer number of pixels”  
name = “string”  
options=“struct”
pieSliceStyle = “solid|sliced”  
plot = “JSON string representation”  
plotarea = “JSON string representation”  
preview = “JSON string representation”  
refresh = “canvas|flash|svg|vml”  
renderer = “canvas|flash|svg|vml”  
scales = “comma-seperated list of axes”  
scaleR=“scales for pie and gauge charts”
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” 
showScaleMarkers=“yes|no”
showXGridlines = “yes|no”  
showYGridlines = “yes|no”  
sortXAxis = “yes|no”  
tipBGColor = “hexadecimal value|web color”  
title = “title of chart”  
tooltip = “JSON string representation”  
theme=“default or custom theme”
url = “onClick destination page”  
x=“x coordinate”
xAxis = “JSON string representation”  
xAxis2 = “JSON string representation”  
xAxisTitle = “title text”  
xAxisType = “scale|category”  
xAxisValues = “Array of values”  
xOffset = “number between -1 and 1”  
y=“y coordinate”
yAxis = “JSON string representation”  
yAxis2 = “JSON string representation”  
yAxisTitle = “title text”  
yAxisType = “scale|category”  
yAxisValues = “Array of values”  
yOffset = “number between -1 and 1” 
zoom = “JSON string representation”  
</cfchart>

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

履歴

バージョン	変更
ColdFusion（2025 リリース）	Flash 形式が削除されました。 svg が形式として追加されました。以下の属性が追加されました。 x y markers scaleR showScaleMarkers オプション theme
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	このタグが追加されました。

属性

属性	必須／オプション	デフォルト	説明
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 svg
gridlines	オプション	10（上端と下端も含む）	軸を含め、値軸に表示するグリッド線の数です。正の整数で指定します。
height	オプション		チャートの縦幅です。整数のピクセル値で指定します。 cfchart は、チャートの使用可能な高さのパーセンテージとして高さを計算します。
ID	オプション		チャートの ID です。基盤となるチャートオブジェクトを取得するために使用します。
labels	オプション		チャートにカスタムテキストや画像（例えば、作成者やチャートの情報）を表示するために使用する構造体の配列です。後述の例を参照してください。
labelFormat	オプション	number	Y 軸のラベルの形式です。 number currency percent date
legend	オプション		凡例の属性（background-color や margin-top など）を定義するために使用する構造体です。後述の例を参照してください。
markers	オプション		マーカーをチャートに追加します。
markerSize	オプション	（自動）	データポイントマーカーのサイズです（ピクセル単位）。整数で指定します。
name	オプション		ページ変数名です。文字列で指定します。グラフをバイナリデータとして生成し、指定した変数に割り当てます。チャートは表示されません。 cffile タグ内でこの name 値を使用すれば、チャートをファイルに書き出すことができます。
オプション	オプション		boxplot チャート要素のスタイル設定を指定する構造体です。
pieSliceStyle	オプション	sliced	cfchartseries の type 属性の値が pie であるときに適用されます。 solid：円グラフを項目ごとに分割せずに表示します。 sliced：円グラフを項目ごとに分割して表示します。
plot	オプション		チャートのスタイル設定に使用するキー（animation、aspect、margin、dynamic、fixedValue、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）。
scaleR	オプション		円およびゲージグラフのスケールを設定します。
showScaleMarkers	オプション		マーカーを軸に沿って表示するかどうかを指定します。
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	オプション		チャートのスタイルを指定する JSON ファイルまたは文字列です。ColdFusion 11 では、XML 形式のスタイルは削除されました。
theme	オプション		デフォルトまたはカスタムのテーマをチャートに追加します。
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:..."：クライアントサイドのスクリプトを実行します。
x	オプション		整数／パーセント。左上隅の X 座標。 x=0、y=0 は、cfchart 出力がレンダリングされる左上の座標（0,0）を定義します。
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 タグの item 属性の値はすべて数値でなければなりません。X 軸は自動的に数値順に並べ替えられます。
xAxisvalues	オプション		x 軸に表示する値の配列です。
xOffset	オプション	0.1	チャートを表示するときの水平方向の傾きを決める角度です。show3D="yes" の場合に適用されます。指定できる数値の範囲は -1～1 です。「-1」は左方向に 90 度、「1」は右方向に 90 度傾けることを意味します。
y	オプション		整数／パーセント。左上隅の Y 座標。x=0、y=0 は、cfchart 出力がレンダリングされる左上の座標（0,0）を定義します。
yaxis	オプション		format、guide、item、label など、y 軸のスタイル設定に使用するキーの構造体です。
yaxis2	オプション		format、guide、item、label など、第 2 の y 軸のスタイル設定に使用するキーの構造体です。第 2 の y 軸は、チャートの上部に表示されます。
yAxisTitle	オプション		Y 軸に表示されるタイトルです。テキストで指定します。
yAxisType	オプション	category	Y 軸は常にデータ値に使用されるので、現時点では効果がありません。
yaxisvalues	オプション		y 軸に表示する値の配列です。
yOffset	オプション	0.1	チャートを表示するときの垂直方向の傾きを決める角度です。show3D="yes" の場合に適用されます。指定できる数値の範囲は -1～1 です。ここで、「-1」は左方向に 90 度、「1」は右方向に 90 度傾けることを意味します。
width	オプション		整数／パーセント。 cfchart は、チャートの使用可能な幅のパーセンテージとして幅を計算します。
zoom	オプション		チャートをズームしたときに適用されるキー（alpha、background、bevel など）の構造体です。後述の例を参照してください。

使用状況

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

クエリとして
cfchartdata タグを使用するデータポイントとして
font 属性の値 ArialUnicodeMS には、次のルールが適用されます。
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 タグを使用してチャートを作成するための主要コンポーネントの詳細な処理に入る前に、全体像を描き、ワークフローを提案することを目的としています。

棒グラフの作成を開始します。

シンプルな棒グラフの場合は、表すデータが必要です。ハードコードされた値を使用することも、<cfquery> を使用してデータベースからデータを取得することもできます。

</cfchartseries>

</cfchart>

<cfset chartData = [10, 20, 30, 40, 50]> <!--- データの例--->  

<cfchart format=“html” xaxistitle=“カテゴリ” yaxistitle=“値” title=“棒グラフの例” type=“bar” showlegend=“false”> 
    <cfchartseries type=“bar”> 
        <cfchartdata item=“カテゴリ 1” value=“#chartData[1]#”> 
        <cfchartdata item=“カテゴリ 2” value=“#chartData[2]#”> 
        <cfchartdata item=“カテゴリ 3” value=“#chartData[3]#”> 
        <cfchartdata item=“カテゴリ 4” value=“#chartData[4]#”> 
        <cfchartdata item=“カテゴリ 5” value=“#chartData[5]#”> 
    </cfchartseries> 
</cfchart>

同様に、円グラフを作成します。

棒グラフのデータの定義と同じように、ここでも同じ操作を行います。

</cfchartseries>

</cfchart>

<cfchart format=“png” chartWidth=“600” chartHeight=“400” pieSliceStyle=“sliced”> 
    <cfchartseries type=“pie” serieslabel=“Web サイトトラフィック 2024”> 
        <cfchartdata item=“1 月” value=“#randRange(500000,1000000)#”> 
        <cfchartdata item=“2 月” value=“#randRange(500000,1000000)#”> 
        <cfchartdata item=“3 月” value=“#randRange(500000,1000000)#”> 
        <cfchartdata item=“4 月” value=“#randRange(500000,1000000)#”> 
        <cfchartdata item=“5 月” value=“#randRange(500000,1000000)#”> 
        <cfchartdata item=“6 月” value=“#randRange(500000,1000000)#”> 
    </cfchartseries>
</cfchart>

cfchart の基本

基本的な構文と構造

ColdFusion では、cfchart タグを使用してアプリケーション内でチャートやグラフを作成します。 cfchart タグの基本的な構文では、チャートタイプ、チャートデータ、他の様々な属性を指定して、チャートの外観と機能をカスタマイズします。次に、ColdFusion での cfchart の基本的な構文の概要を示します。

<cfchart

format=“png|jpg|html|svg”

chartWidth=“width”

chartHeight=“height”

title=“チャートタイトル”

type=“chart_type”>

<cfchartseries

type=“series_type”

query=“query_name”

itemcolumn=“column_name”

valuecolumn=“column_name”>

</cfchartseries>

</cfchart>

<cfchart  
    format=“png|jpg|html|svg” 
    chartWidth=“width” 
    chartHeight=“height” 
    title=“チャートタイトル” 
    type=“chart_type”> 

    <!-- 系列データを定義します --> 
    <cfchartseries  
        type=“series_type” 
        query=“query_name” 
        itemcolumn=“column_name” 
        valuecolumn=“column_name”> 
    </cfchartseries> 
    
<!-- ここで他の系列または追加のチャートのカスタマイズを定義します --> 
 </cfchart>

ColdFusion の様々タイプのチャート

円グラフ：データを円グラフで表示し、全体の比率を示します。
棒グラフ：長方形の棒を使用して、カテゴリ間で値を比較したり、時間の経過に伴うデータのトレンドを表示したりします。
折れ線グラフ：データポイントを接続する線を使用して、連続した間隔でのデータのトレンドまたは変化を表示します。
散布図：相関関係や分布を示すために 2 次元平面上のデータポイントを表します。
面グラフ：折れ線グラフと同様に、線の下の領域が塗りつぶされ、変化する値の累積エフェクトが強調されます。
バブルグラフ：複数のデータ次元を表すために、異なるサイズのバブル（または球）内にデータを表示します。
ゲージグラフ：ゲージのような形式でデータを示します。多くの場合、進行状況やパフォーマンス指標を表示するために使用されます。
縦棒グラフ：棒グラフと同様に、棒は垂直方向に配置されます。
積み重ねグラフ：複数のデータ系列を積み重ねて表示し、合計値とその構成要素を比較します。
箇条書きグラフ：箇条書きグラフは、パフォーマンスデータを効率的に表示するために設計された棒グラフです。観測値、ターゲット値、グレーディング用の値の範囲など、複数のデータ要素をエンコードします。このチャートタイプは、目標や一連のしきい値に対する進行状況の測定など、比較を行うのに最適です。
円錐グラフ：円錐グラフは、円グラフと同様に、全体の部分または割合を表すために使用されるデータビジュアライゼーションツールです。ただし、円錐グラフでは階層も表示され、最も広い領域を持つ円錐の一番上に最も高い値が表示されます。
ピラミッドグラフ：ピラミッドグラフは、一連のステップまたはカテゴリを階層順に三角形に配置して表示する視覚表現です。多くの場合、プロセス、システム、人口分布を説明するために使用されます。
ボックスプロット：ボックスプロットには、中央値、四分位数、潜在的な外れ値などの情報が表示されます。異なるカテゴリまたはグループ間でのデータの分布を比較するのに役立ちます。
ドーナツ：ドーナツグラフは、円グラフのような円形のグラフですが、中央に穴が開いています。この穴によってリングのような外観が生まれ、これが「ドーナツ」という名前の由来です。ドーナツグラフは、円グラフと同様に、データセット内の全体の比率または割合を表します。
ヒストグラム：ヒストグラムは、連続した数値の範囲にわたるデータポイントの頻度分布を示す数値データを表します。
フローティング棒グラフ：フローティング棒グラフは、棒が Y 軸のゼロから始まらない数値データを視覚的に表します。代わりに、棒は Y 軸上の特定の値に配置されますが、この値は棒ごとに異なる場合があります。このタイプのチャートは、時間の経過に伴う値の変化や、開始点が異なる 2 つの異なるデータセットの比較など、ゼロベースではない値を比較する場合に適しています。
垂直領域を含む面グラフ：垂直領域を含む面グラフは、折れ線グラフのように連続線を使用して定量データを表示するチャートタイプです。ただし、線の下の領域は各系列ごとに特定の色で塗りつぶされるので、複数の類似データセットからの値の変化を強調しやすくなります。
階段領域を含む面グラフ：階段領域を含む面グラフは、階段の段のように水平線と垂直線で接続されたデータポイントを表示するチャートタイプです。
曲線領域を含む面グラフ：曲線領域を含む面グラフでは、直線ではなく曲線で接続されたデータポイントが表示されます。このチャートタイプは、データを平滑化し、トレンドを視覚化しやすくするのに役立ちます。

cfchart タグへのデータの指定

静的データの使用

静的データを直接 chart タグと series タグ内に指定し、ColdFusion の cfchart タグを使用してチャートを生成できます。この方法では、クエリなどのデータソースにリンクせずにチャートを作成できます。

チャートに静的データを使用するには、次の手順に従います。

チャートに表示するデータを定義します。これは、視覚化するデータポイントを含む配列または構造体を作成することによって実行できます。
ColdFusion コードで cfchart タグを使用して、チャートを作成します。生成するチャートタイプ（円グラフ、棒グラフ、折れ線グラフなど）を指定し、手順 1 で定義したデータをチャートのソースとして指定します。
cfchart タグ内で色、ラベル、タイトル、凡例などの属性を設定することで、チャートの外観をカスタマイズできます。
ColdFusion ページまたはテンプレートに cfchart タグを含めて、ColdFusion アプリケーションでチャートをレンダリングします。

例

</cfchartseries>

</cfchart>

<cfchart format=“html” chartheight=“300” chartwidth=“400” title=“月間売上高” type=“area”> 
    <cfchartseries type=“area”> 
        <cfchartdata item=“1 月” value=“150” /> 
        <cfchartdata item=“2 月” value=“200” /> 
        <cfchartdata item=“3 月” value=“180” /> 
        <cfchartdata item=“4 月” value=“250” /> 
        <cfchartdata item=“5 月” value=“300” /> 
    </cfchartseries>
</cfchart>

この例では次のようになります。

cfchart タグは、指定された寸法（chartheight と chartwidth）とタイトル（title）を持つ面グラフを作成します。
cfchart タグの type 属性が「area」に設定されているので、チャートは面グラフである必要があります。
cfchartseries タグは、系列の種類を「area」として定義します。
cfchartseries タグ内では、cfchartdata タグはプロットするデータポイントを指定します。各 cfchartdata タグは、各データポイントのアイテム（x 軸の値）と値（y 軸の値）を指定します。

データベースからのデータの使用

ColdFusion の cfchart タグを使用してデータベースのデータからチャートを作成するには、まず cfquery タグを使用してデータベースからデータを取得する必要があります。クエリオブジェクトにデータを取得したら、そのデータを cfchart タグと cfchartseries タグで使用してチャートを生成できます。

次に、データベースのデータを使用して面グラフを作成する方法の例を示します。

select * from orders

order by orderdate

</cfquery>

</cfchart>

<cfquery name=“getSalesData” datasource=“art”> select * from orders order by orderdate </cfquery> <cfchart format=“html” chartheight=“400” chartwidth=“600” title=“Sales Over Time”> <cfchartseries type=“curve” query=“getSalesData” itemColumn=“orderdate” valueColumn=“tax”/> </cfchart>

<cfquery name=“getSalesData” datasource=“art”> 
    select * from orders 
    order by orderdate 
</cfquery> 

<cfchart format=“html” chartheight=“400” chartwidth=“600” title=“Sales Over Time”> 
    <cfchartseries type=“curve” query=“getSalesData” itemColumn=“orderdate” valueColumn=“tax”/> 
</cfchart>

チャートのカスタマイズ

cfchart タグを使用すると、次の目的に合わせてチャートをカスタマイズできます。

チャートを使用すると、データを視覚的に表現できるため、トレンド、パターン、比較を容易に解釈できます。これは、複雑なデータセットの場合に特に便利です。
カスタマイズされたチャートにより、より魅力的でインタラクティブなユーザーエクスペリエンスを提供できます。
カスタマイズオプションを使用すると、特定の系列、カテゴリ、目標点を強調表示するなど、データの特定の側面を強調することができます。
チャートをカスタマイズすることにより、色覚異常の配色を調整するなど、ニーズの異なるユーザーがチャートにアクセスしやすくなります。
チャートをカスタマイズすると、ブランドのカラー、フォント、スタイルに合わせてチャートを調整できるので、アプリケーション全体で一貫した視覚的なアイデンティティを実現できます。
カスタマイズされたチャートでは、レポート、ダッシュボード、データ駆動型アプリケーションなど、特定のコンテキストのデータを表示できます。
ColdFusion のチャート作成機能では、ツールチップ、凡例、ラベルなどのカスタマイズオプションを使用して、詳細な情報やインタラクティブ機能をエンドユーザーに提供できます。
カスタマイズにより、異なる種類のグラフ（棒グラフ、折れ線グラフ、円グラフなど）と系列グラフを 1 つのグラフに組み合わせることができるので、より詳細なデータプレゼンテーションが可能になります。

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

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

cfchart タグとスタイルオプション用の JSON オブジェクトを使用して、ColdFusion でチャートのカスタマイズを定義できます。ColdFusion の cfchart タグは、JSON 文字列を値として取る graphset 属性をサポートします。これにより、チャートのタイプ、ディメンション、色、タイトル、ラベル、その他の視覚設定など、チャートに関するさまざまなカスタマイズオプションを指定できます。

JSON 文字列のデータと、graphset 属性を使用して JSON オブジェクトで定義されたカスタマイズを使用して、cfchart タグを使用して折れ線グラフを作成する方法を示す例を次に示します。

my_custom_style.json

{

“graphset” : [ { “type” : “bar”, “title” : { “font-size” : 18, “color” : “#FF0000”, “bold” : true, “font-family” : “Verdana”, “background-color” : “#cccccc”, “border-color” : “#cccccc”, “border-width” : 1

}

]

}

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

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

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

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

出力

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

新規ユーザーの場合

cfchart の概要

カテゴリ

シンタックス

関連トピック

履歴

属性

使用状況

チャートの迅速な作成

cfchart の基本

基本的な構文と構造

ColdFusion の様々タイプのチャート

cfchart タグへのデータの指定

静的データの使用

データベースからのデータの使用

チャートのカスタマイズ

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

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

このページを共有

アドビサポートコミュニティ

サポート