マニュアルキャンセル

cfchartset

検索

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

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

説明

ColdFusion の cfchartset タグを使用すると、ColdFusion の開発者とチャート作成者は、単一のコンテナ内で複数の異なるチャートを使用して複雑なデータビジュアライゼーションを処理できます。 ColdFusion で cfchartset タグの使用を検討する理由はいくつかあります。

複数のチャート：cfchartset を使用すると、複数のチャートを作成できます。これは、関連するビジュアライゼーションを並べて比較したり、円グラフや棒グラフなど、データの様々なビューを表示したりする場合に役立ちます。
均一な更新：cfchartset を使用すると、すべてのチャート設定を 1 か所で表示できます。つまり、チャートの作成と維持が簡単になり、冗長性が削減されます。
レイアウトの向上：cfchartsetを使用すると、複数のチャートを含む複雑なレイアウトを簡単に作成できるので、グラフの位置とサイズを正確に定義できます。また、データの表示ニーズに合わせて、グリッド、列、またはその他のレイアウトでチャートを配置することもできます。

cfchartset タグは、主要指標を統合して表示するワンストップダッシュボード、トレンドや相関関係を識別するための複数指標分析、統合ビューでデータを視覚化する比較分析などのシナリオで特に役立ちます。

cfchartset タグは、コンテナの幅と高さ、およびコンテナ内のチャートのレイアウトを定義します。 cfchartset タグでは、cfchartset タグ内の事前定義済みレイアウトに、cfchart を使用してグラフを配置できます。

シンタックス

<cfchartset  
    format=&quot;html/png/jpg/svg&quot;
    layout=&quot;horizontal/vertical/n row x m cols&quot;
    renderer=&quot;svg/canvas/vml&quot;
    height=&quot;height of the container in pixels or height in percentage&quot;
    width=&quot;width of the container in pixels or width in percentage&quot;
    name=&quot;the name given to the container&quot;
>

注意：

クライアントサイドのチャートの場合、チャートの幅と高さにはピクセルとパーセンテージの両方が適用されます。
サーバーサイドのチャートの場合、チャートの幅と高さにはピクセルのみが適用されます。

履歴

ColdFusion（2025 リリース）：タグが追加されました。

属性

必須

Type

デフォルト

説明

name

いいえ

文字列

なし

変数を名前として設定すると、出力はその変数に保存されます。グラフをバイナリデータとして生成し、指定した変数に割り当てます。チャートは表示されません。

cffile タグ内でこの name 値を使用すれば、チャートをファイルに書き出すことができます。

layout

いいえ

文字列

なし。デフォルトのサイズを使用して、コンテナ内のすべてのチャートを調整します。

cfchart コンテナ内でのチャートの配置方法を定義します。次の使用可能なオプションがあります。

horizontal
vertical
r x c（行 x 列）

形式

いいえ

文字列

png

グラフを保存するときのファイル形式です。次の使用可能な形式があります。

html
png
jpg
svg

renderer

いいえ

文字列

定義された値に依存します

レンダリング方法を指定します。サポートされている値は次のとおりです。

svg
canvas
vml

height

いいえ

Integer

240

Chartset コンテナの高さ（ピクセル単位）。

width

いいえ

Integer

320

Chartset コンテナの幅（ピクセル単位）。

base64

いいえ

Boolean

False

この属性はサーバーサイドのチャート作成に使用されます。

例

例 1 - 3 行 x 2 列

次のスクリプトは、<cfchartset> を使用して 5 つのグラフの 3 x 2 レイアウトを作成します。各チャートには、Acme Inc. と CFX Tech の 2 つの企業のデータが、1 日目と 2 日目の値とともに視覚化されています。

<cfchartset format=&quot;html&quot; layout=&quot;3x2&quot; height=&quot;1000&quot; width=&quot;1000&quot; name=&quot;first viz&quot;>     
    <cfchart type=&quot;bar&quot; title=&quot;2 系列の棒グラフ&quot; plotarea = &quot;#{&quot;margin&quot;=&quot;dynamic&quot;}#&quot; showlegend=&quot;yes&quot;> 
        <cfchartseries serieslabel=&quot;Acme Inc.&quot; markerstyle=&quot;circle&quot; color=&quot;##0aaa8f&quot;> 
            <cfchartdata item=&quot;1 日目&quot; value=&quot;19.2&quot;/> 
            <cfchartdata item=&quot;2 日目&quot; value=&quot;15.2&quot;/> 
        </cfchartseries> 
        <cfchartseries serieslabel=&quot;CFX Tech&quot; markerstyle=&quot;diamond&quot; color=&quot;##0a7caa&quot; > 
            <cfchartdata item=&quot;1 日目&quot; value=&quot;39.2&quot;/> 
            <cfchartdata item=&quot;2 日目&quot; value=&quot;35.2&quot;/> 
        </cfchartseries> 
    </cfchart> 


    <cfchart showLegend=&quot;no&quot; title=&quot;2 系列の折れ線グラフ&quot; type=&quot;area&quot; plotarea = &quot;#{&quot;margin&quot;=&quot;dynamic&quot;}#&quot;> 
        <cfchartseries serieslabel=&quot;Acme Inc.&quot; markerstyle=&quot;circle&quot; color=&quot;##0aaa8f&quot;> 
            <cfchartdata item=&quot;1 日目&quot; value=&quot;19.2&quot;/> 
            <cfchartdata item=&quot;2 日目&quot; value=&quot;15.2&quot;/> 
        </cfchartseries> 

        <cfchartseries serieslabel=&quot;CFX Tech&quot; markerstyle=&quot;diamond&quot; color=&quot;##0a7caa&quot; > 
            <cfchartdata item=&quot;1 日目&quot; value=&quot;39.2&quot;/> 
            <cfchartdata item=&quot;2 日目&quot; value=&quot;35.2&quot;/> 
        </cfchartseries> 

    </cfchart> 

 <cfscript> 
    border={&quot;color&quot;:&quot;red&quot;} 
  </cfscript> 

    <cfchart showLegend=&quot;no&quot; title=&quot;円グラフ&quot;  type=&quot;pie&quot; plotarea = &quot;#{&quot;margin&quot;=&quot;dynamic&quot;}#&quot; showborder=&quot;yes&quot; border=&quot;#border#&quot;> 
        <cfchartseries serieslabel=&quot;Acme Inc.&quot; markerstyle=&quot;circle&quot; color=&quot;##0aaa8f&quot;> 
            <cfchartdata item=&quot;1 日目&quot; value=&quot;19.2&quot;/> 
            <cfchartdata item=&quot;2 日目&quot; value=&quot;15.2&quot;/> 
        </cfchartseries> 

        <cfchartseries serieslabel=&quot;CFX Tech&quot; markerstyle=&quot;diamond&quot; color=&quot;##0a7caa&quot; > 
            <cfchartdata item=&quot;1 日目&quot; value=&quot;39.2&quot;/> 
            <cfchartdata item=&quot;2 日目&quot; value=&quot;35.2&quot;/> 
        </cfchartseries> 
    </cfchart> 

    <cfchart showLegend=&quot;no&quot; type=&quot;line&quot; title=&quot;2 系列の折れ線グラフ&quot;> 
        <cfchartseries serieslabel=&quot;Acme Inc.&quot; markerstyle=&quot;circle&quot; color=&quot;##0aaa8f&quot;> 
            <cfchartdata item=&quot;1 日目&quot; value=&quot;19.2&quot;/> 
            <cfchartdata item=&quot;2 日目&quot; value=&quot;15.2&quot;/> 
        </cfchartseries> 

        <cfchartseries serieslabel=&quot;CFX Tech&quot; markerstyle=&quot;diamond&quot; color=&quot;##0a7caa&quot; > 
            <cfchartdata item=&quot;1 日目&quot; value=&quot;39.2&quot;/> 
            <cfchartdata item=&quot;2 日目&quot; value=&quot;35.2&quot;/> 
        </cfchartseries> 
    </cfchart> 

    <cfchart showLegend=&quot;no&quot; type=&quot;ring&quot; title=&quot;リンググラフ&quot;> 
        <cfchartseries serieslabel=&quot;Acme Inc.&quot; markerstyle=&quot;circle&quot; color=&quot;##0aaa8f&quot;> 
            <cfchartdata item=&quot;1 日目&quot; value=&quot;19.2&quot;/> 
            <cfchartdata item=&quot;2 日目&quot; value=&quot;15.2&quot;/> 
        </cfchartseries> 

        <cfchartseries serieslabel=&quot;CFX Tech&quot; markerstyle=&quot;diamond&quot; color=&quot;##0a7caa&quot; > 
            <cfchartdata item=&quot;1 日目&quot; value=&quot;39.2&quot;/> 
            <cfchartdata item=&quot;2 日目&quot; value=&quot;35.2&quot;/> 
        </cfchartseries> 

    </cfchart> 

</cfchartset>

出力

例 2 - 2 行 x 3 列

次のスクリプトは、<cfchartset> を使用して 5 つのグラフの 2 x 3 レイアウトを作成します。各チャートには、Acme Inc. と CFX Tech の 2 つの企業のデータが、1 日目と 2 日目の値とともに視覚化されています。

<cfchartset format=&quot;html&quot; layout=&quot;2x3&quot; height=&quot;1000&quot; width=&quot;1000&quot; name=&quot;first viz&quot;>     
    <cfchart type=&quot;bar&quot; title=&quot;2 系列の棒グラフ&quot; plotarea = &quot;#{&quot;margin&quot;=&quot;dynamic&quot;}#&quot; showlegend=&quot;yes&quot;> 
        <cfchartseries serieslabel=&quot;Acme Inc.&quot; markerstyle=&quot;circle&quot; color=&quot;##0aaa8f&quot;> 
            <cfchartdata item=&quot;1 日目&quot; value=&quot;19.2&quot;/> 
            <cfchartdata item=&quot;2 日目&quot; value=&quot;15.2&quot;/> 
        </cfchartseries> 
        <cfchartseries serieslabel=&quot;CFX Tech&quot; markerstyle=&quot;diamond&quot; color=&quot;##0a7caa&quot; > 
            <cfchartdata item=&quot;1 日目&quot; value=&quot;39.2&quot;/> 
            <cfchartdata item=&quot;2 日目&quot; value=&quot;35.2&quot;/> 
        </cfchartseries> 
    </cfchart> 


    <cfchart showLegend=&quot;no&quot; title=&quot;2 系列の折れ線グラフ&quot; type=&quot;area&quot; plotarea = &quot;#{&quot;margin&quot;=&quot;dynamic&quot;}#&quot;> 
        <cfchartseries serieslabel=&quot;Acme Inc.&quot; markerstyle=&quot;circle&quot; color=&quot;##0aaa8f&quot;> 
            <cfchartdata item=&quot;1 日目&quot; value=&quot;19.2&quot;/> 
            <cfchartdata item=&quot;2 日目&quot; value=&quot;15.2&quot;/> 
        </cfchartseries> 

        <cfchartseries serieslabel=&quot;CFX Tech&quot; markerstyle=&quot;diamond&quot; color=&quot;##0a7caa&quot; > 
            <cfchartdata item=&quot;1 日目&quot; value=&quot;39.2&quot;/> 
            <cfchartdata item=&quot;2 日目&quot; value=&quot;35.2&quot;/> 
        </cfchartseries> 

    </cfchart> 

 <cfscript> 
    border={&quot;color&quot;:&quot;red&quot;} 
  </cfscript> 

    <cfchart showLegend=&quot;no&quot; title=&quot;円グラフ&quot;  type=&quot;pie&quot; plotarea = &quot;#{&quot;margin&quot;=&quot;dynamic&quot;}#&quot; showborder=&quot;yes&quot; border=&quot;#border#&quot;> 
        <cfchartseries serieslabel=&quot;Acme Inc.&quot; markerstyle=&quot;circle&quot; color=&quot;##0aaa8f&quot;> 
            <cfchartdata item=&quot;1 日目&quot; value=&quot;19.2&quot;/> 
            <cfchartdata item=&quot;2 日目&quot; value=&quot;15.2&quot;/> 
        </cfchartseries> 

        <cfchartseries serieslabel=&quot;CFX Tech&quot; markerstyle=&quot;diamond&quot; color=&quot;##0a7caa&quot; > 
            <cfchartdata item=&quot;1 日目&quot; value=&quot;39.2&quot;/> 
            <cfchartdata item=&quot;2 日目&quot; value=&quot;35.2&quot;/> 
        </cfchartseries> 
    </cfchart> 

    <cfchart showLegend=&quot;no&quot; type=&quot;line&quot; title=&quot;2 系列の折れ線グラフ&quot;> 
        <cfchartseries serieslabel=&quot;Acme Inc.&quot; markerstyle=&quot;circle&quot; color=&quot;##0aaa8f&quot;> 
            <cfchartdata item=&quot;1 日目&quot; value=&quot;19.2&quot;/> 
            <cfchartdata item=&quot;2 日目&quot; value=&quot;15.2&quot;/> 
        </cfchartseries> 

        <cfchartseries serieslabel=&quot;CFX Tech&quot; markerstyle=&quot;diamond&quot; color=&quot;##0a7caa&quot; > 
            <cfchartdata item=&quot;1 日目&quot; value=&quot;39.2&quot;/> 
            <cfchartdata item=&quot;2 日目&quot; value=&quot;35.2&quot;/> 
        </cfchartseries> 
    </cfchart> 

    <cfchart showLegend=&quot;no&quot; type=&quot;ring&quot; title=&quot;リンググラフ&quot;> 
        <cfchartseries serieslabel=&quot;Acme Inc.&quot; markerstyle=&quot;circle&quot; color=&quot;##0aaa8f&quot;> 
            <cfchartdata item=&quot;1 日目&quot; value=&quot;19.2&quot;/> 
            <cfchartdata item=&quot;2 日目&quot; value=&quot;15.2&quot;/> 
        </cfchartseries> 

        <cfchartseries serieslabel=&quot;CFX Tech&quot; markerstyle=&quot;diamond&quot; color=&quot;##0a7caa&quot; > 
            <cfchartdata item=&quot;1 日目&quot; value=&quot;39.2&quot;/> 
            <cfchartdata item=&quot;2 日目&quot; value=&quot;35.2&quot;/> 
        </cfchartseries> 

    </cfchart> 

</cfchartset>

例 3 - 水平方向のレイアウトの使用

次のスクリプトコードは、水平方向のレイアウトの <cfchartset> を使用して、横並びの円グラフと棒グラフのビジュアライゼーションを作成します。<cfscript> ブロックは、スタイル属性を定義します。背景のグラデーション（##10ba9d からホワイト）、円グラフのスライスのサイズ（56％）、極座標グラフのスケーリングプロパティ（refAngle とアパーチャを 180 に設定）。

<cfscript>
    background = {&quot;color&quot; = &quot;##10ba9d&quot;, &quot;color-2&quot; = &quot;white&quot;};
    plot = {&quot;slice&quot; = &quot;56%&quot;}
    scaleR = {&quot;refAngle&quot; = 180, &quot;aperture&quot; = 180}
</cfscript>

<cfchartset format=&quot;html&quot; layout=&quot;horizontal&quot; height=&quot;400&quot; width=&quot;1800&quot;>
    <cfchart format = &quot;html&quot; type = &quot;pie&quot; background=&quot;#background#&quot; markersize=&quot;5&quot;>
   <cfchartseries label=&quot;気温（°C） - 月別&quot; seriescolor=&quot;white&quot;>
                <cfchartdata item=&quot;1 月&quot; value=&quot;5&quot;>
                <cfchartdata item=&quot;2 月&quot; value=&quot;70&quot;>
                <cfchartdata item=&quot;3 月&quot; value=&quot;10&quot;>
                <cfchartdata item=&quot;4 月&quot; value=&quot;40&quot;>
                <cfchartdata item=&quot;5 月&quot; value=&quot;18&quot;>
                <cfchartdata item=&quot;6 月&quot; value=&quot;22&quot;>
        </cfchartseries>
    </cfchart>

    <cfchart format = &quot;html&quot; type = &quot;bar&quot; background=&quot;#background#&quot;>
   <cfchartseries  label=&quot;気温（°C） - 月別&quot; seriescolor=&quot;##3a5551&quot;>
            <cfchartdata item=&quot;1 月&quot; value=&quot;5&quot;>
            <cfchartdata item=&quot;2 月&quot; value=&quot;7&quot;>
            <cfchartdata item=&quot;3 月&quot; value=&quot;10&quot;>
            <cfchartdata item=&quot;4 月&quot; value=&quot;14&quot;>
            <cfchartdata item=&quot;5 月&quot; value=&quot;18&quot;>
            <cfchartdata item=&quot;6 月&quot; value=&quot;22&quot;>
        </cfchartseries>
    </cfchart>
</cfchartset>

出力

例 4 - 垂直方向のレイアウトの使用

次のスクリプトコードは、垂直方向のレイアウトの <cfchartset> を使用して、横並びの円グラフと棒グラフのビジュアライゼーションを作成します。<cfscript> ブロックは、スタイル属性を定義します。背景のグラデーション（##10ba9d からホワイト）、円グラフのスライスのサイズ（56％）、極座標グラフのスケーリングプロパティ（refAngle とアパーチャを 180 に設定）。

<cfscript>
    background = {&quot;color&quot; = &quot;##10ba9d&quot;, &quot;color-2&quot; = &quot;white&quot;};
    plot = {&quot;slice&quot; = &quot;56%&quot;}
    scaleR = {&quot;refAngle&quot; = 180, &quot;aperture&quot; = 180}
</cfscript>

<cfchartset format=&quot;html&quot; layout=&quot;vertical&quot; height=&quot;800&quot; width=&quot;1000&quot;>
    <cfchart format = &quot;html&quot; type = &quot;pie&quot; background=&quot;#background#&quot; markersize=&quot;5&quot;>
   <cfchartseries label=&quot;気温（°C） - 月別&quot; seriescolor=&quot;white&quot;>
                <cfchartdata item=&quot;1 月&quot; value=&quot;5&quot;>
                <cfchartdata item=&quot;2 月&quot; value=&quot;70&quot;>
                <cfchartdata item=&quot;3 月&quot; value=&quot;10&quot;>
                <cfchartdata item=&quot;4 月&quot; value=&quot;40&quot;>
                <cfchartdata item=&quot;5 月&quot; value=&quot;18&quot;>
                <cfchartdata item=&quot;6 月&quot; value=&quot;22&quot;>
        </cfchartseries>
    </cfchart>

    <cfchart format = &quot;html&quot; type = &quot;bar&quot; background=&quot;#background#&quot;>
   <cfchartseries  label=&quot;気温（°C） - 月別&quot; seriescolor=&quot;##3a5551&quot;>
            <cfchartdata item=&quot;1 月&quot; value=&quot;5&quot;>
            <cfchartdata item=&quot;2 月&quot; value=&quot;7&quot;>
            <cfchartdata item=&quot;3 月&quot; value=&quot;10&quot;>
            <cfchartdata item=&quot;4 月&quot; value=&quot;14&quot;>
            <cfchartdata item=&quot;5 月&quot; value=&quot;18&quot;>
            <cfchartdata item=&quot;6 月&quot; value=&quot;22&quot;>
        </cfchartseries>
    </cfchart>
</cfchartset>

出力