マニュアルキャンセル

ColdFusion での面グラフの作成

検索

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

ColdFusion

アプリを開く

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

階層グラフとも呼ばれる面グラフは、定量的なデータをグラフで表します。折れ線グラフに似ていますが、折れ線グラフと x 軸の間の領域が色またはシェーディングで塗りつぶされます。

階段領域
曲線領域
垂直領域

階段領域を含む面グラフ

階段領域を含む面グラフは、標準的な面グラフに似たデータビジュアライゼーションのタイプですが、重要な違いがあります。階段領域を含む面グラフのデータポイントを結ぶ線は、直線ではなく階段のように傾斜しています。

この例では、スクリプトは次のプロットカスタマイズオプションを使用します。

アルファ領域：この属性はプロットの透明度を定義します。範囲は 0（クリア）～1（ソリッド）です。
contourOnTop：この属性は、面グラフの上に輪郭線を描画するかどうかを決定します。輪郭線がシェーディングされた領域の上に表示されます。
segmentTrackers：segmentTracker の値が true の場合、線に沿ってポインタを合わせると値も表示されます。それ以外の場合は、データポイント上にポインタを合わせている間のみ値が表示されます。

例 1

プロットオプションで segmentTrackers=false を使用します。

<cfscript>
    plot={
        &quot;alpha-area&quot;:1,
        &quot;contourOnTop&quot;:true,
        &quot;segmentTrackers&quot;: &quot;false&quot; // true の場合、ポインタを合わせると値が表示されます
    };
</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;Web サイトトラフィック 2024&quot;>
  <cfchartseries type=&quot;steppedarea&quot;>
    <cfchartdata item=&quot;1 月&quot; value=&quot;503100&quot;>
    <cfchartdata item=&quot;2 月&quot; value=&quot;620310&quot;>
    <cfchartdata item=&quot;3 月&quot; value=&quot;688700&quot;>
    <cfchartdata item=&quot;4 月&quot; value=&quot;986500&quot;>
    <cfchartdata item=&quot;5 月&quot; value=&quot;1063911&quot;>
    <cfchartdata item=&quot;6 月&quot; value=&quot;1115321&quot;>
   </cfchartseries>
</cfchart>

出力

例 2

プロットオプションで segmentTrackers=true を使用します。

<cfscript>
    plot={
        &quot;alpha-area&quot;:1,
        &quot;contourOnTop&quot;:true,
        &quot;segmentTrackers&quot;: &quot;true&quot; // true の場合、ポインタを合わせると値が表示されます
    };
</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;Web サイトトラフィック 2024&quot;>
  <cfchartseries type=&quot;steppedarea&quot;>
    <cfchartdata item=&quot;1 月&quot; value=&quot;503100&quot;>
    <cfchartdata item=&quot;2 月&quot; value=&quot;620310&quot;>
    <cfchartdata item=&quot;3 月&quot; value=&quot;688700&quot;>
    <cfchartdata item=&quot;4 月&quot; value=&quot;986500&quot;>
    <cfchartdata item=&quot;5 月&quot; value=&quot;1063911&quot;>
    <cfchartdata item=&quot;6 月&quot; value=&quot;1115321&quot;>
   </cfchartseries>
</cfchart>

出力

例 3

"contourOnTop"=true の使用

<cfscript>
       plot={
        &quot;alpha-area&quot;=1,
        &quot;contourOnTop&quot;=true
       };
</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;
    alpha=&quot;1&quot;
   title=&quot;Web サイトトラフィック 2023&quot;>
  <cfchartseries type=&quot;curvedarea&quot;>
    <cfchartdata item=&quot;1 月&quot; value=&quot;503100&quot;>
    <cfchartdata item=&quot;2 月&quot; value=&quot;620310&quot;>
    <cfchartdata item=&quot;3 月&quot; value=&quot;688700&quot;>
    <cfchartdata item=&quot;4 月&quot; value=&quot;986500&quot;>
    <cfchartdata item=&quot;5 月&quot; value=&quot;1063911&quot;>
    <cfchartdata item=&quot;6 月&quot; value=&quot;1115321&quot;>
   </cfchartseries>
   <cfchartseries type=&quot;curvedarea&quot;>
    <cfchartdata item=&quot;1 月&quot; value=&quot;703100&quot;>
    <cfchartdata item=&quot;2 月&quot; value=&quot;520310&quot;>
    <cfchartdata item=&quot;3 月&quot; value=&quot;888700&quot;>
    <cfchartdata item=&quot;4 月&quot; value=&quot;786500&quot;>
    <cfchartdata item=&quot;5 月&quot; value=&quot;963911&quot;>
    <cfchartdata item=&quot;6 月&quot; value=&quot;1015321&quot;>
   </cfchartseries>
</cfchart>

出力

ご覧のように、contourOnTop が True の場合、輪郭線は面グラフのシェーディングされた領域の上に表示されます。

例 4

"contourOnTop"=false の使用

<cfscript>
       plot={
        &quot;alpha-area&quot;=1,
        &quot;contourOnTop&quot;=false
       };
</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;
    alpha=&quot;1&quot;
   title=&quot;Web サイトトラフィック 2023&quot;>
  <cfchartseries type=&quot;curvedarea&quot;>
    <cfchartdata item=&quot;1 月&quot; value=&quot;503100&quot;>
    <cfchartdata item=&quot;2 月&quot; value=&quot;620310&quot;>
    <cfchartdata item=&quot;3 月&quot; value=&quot;688700&quot;>
    <cfchartdata item=&quot;4 月&quot; value=&quot;986500&quot;>
    <cfchartdata item=&quot;5 月&quot; value=&quot;1063911&quot;>
    <cfchartdata item=&quot;6 月&quot; value=&quot;1115321&quot;>
   </cfchartseries>
   <cfchartseries type=&quot;curvedarea&quot;>
    <cfchartdata item=&quot;1 月&quot; value=&quot;703100&quot;>
    <cfchartdata item=&quot;2 月&quot; value=&quot;520310&quot;>
    <cfchartdata item=&quot;3 月&quot; value=&quot;888700&quot;>
    <cfchartdata item=&quot;4 月&quot; value=&quot;786500&quot;>
    <cfchartdata item=&quot;5 月&quot; value=&quot;963911&quot;>
    <cfchartdata item=&quot;6 月&quot; value=&quot;1015321&quot;>
   </cfchartseries>
</cfchart>

出力

曲線領域を含む面グラフ

曲線領域を含む面グラフは、標準的な面グラフのバリエーションです。この面グラフでは、データポイントを接続するために直線セグメントを使用する代わりに、近似曲線を描画してデータポイントを接続します。曲線と x 軸の間の領域は色で塗りつぶされます。

例

cfchartseries type="curvedarea" で前の例を再利用します。

<cfscript> 
    plot={ 
        &quot;alpha-area&quot;:1, 
        &quot;contourOnTop&quot;:true, 
        &quot;segmentTrackers&quot;: &quot;false&quot; // true の場合、ポインタを合わせると値が表示されます 
    }; 
</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;Web サイトトラフィック 2024&quot;> 

  <cfchartseries type=&quot;curvedarea&quot;> 
    <cfchartdata item=&quot;1 月&quot; value=&quot;503100&quot;> 
    <cfchartdata item=&quot;2 月&quot; value=&quot;620310&quot;> 
    <cfchartdata item=&quot;3 月&quot; value=&quot;688700&quot;> 
    <cfchartdata item=&quot;4 月&quot; value=&quot;986500&quot;> 
    <cfchartdata item=&quot;5 月&quot; value=&quot;1063911&quot;> 
    <cfchartdata item=&quot;6 月&quot; value=&quot;1115321&quot;> 
   </cfchartseries> 
</cfchart>

出力

垂直領域を含む面グラフ

垂直領域を含む面グラフは、x 軸と y 軸の役割が入れ替わった標準的な面グラフのバリエーションです。一般的な面グラフでは、x 軸はカテゴリまたは期間を表し、y 軸は数値を表します。垂直領域を含む面グラフでは、これが反転されます。y 軸はカテゴリまたは期間を表し、x 軸は数値を表します。

例

cfchartseries type="varea" で前の例を再利用します。

<cfscript>
    plot={
        &quot;alpha-area&quot;:1,
        &quot;contourOnTop&quot;:true,
        &quot;segmentTrackers&quot;: &quot;true&quot; // true の場合、ポインタを合わせると値が表示されます
    };
</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;Web サイトトラフィック 2024&quot;>
  <cfchartseries type=&quot;varea&quot;>
    <cfchartdata item=&quot;1 月&quot; value=&quot;503100&quot;>
    <cfchartdata item=&quot;2 月&quot; value=&quot;620310&quot;>
    <cfchartdata item=&quot;3 月&quot; value=&quot;688700&quot;>
    <cfchartdata item=&quot;4 月&quot; value=&quot;986500&quot;>
    <cfchartdata item=&quot;5 月&quot; value=&quot;1063911&quot;>
    <cfchartdata item=&quot;6 月&quot; value=&quot;1115321&quot;>
   </cfchartseries>
</cfchart>

出力

クラスター化された面グラフと積み重ね面グラフ

また、階段領域、垂直領域、曲線領域を含む面グラフでは、2 つ以上のチャートをクラスター化できます。プロットのカスタマイズオプションで、stacked=true を使用してクラスター化されたチャートを作成します。

例 1

階段領域を含む積み重ね面グラフを作成します。

<cfscript>
    plot={
        &quot;alpha-area&quot;:1,
        &quot;contourOnTop&quot;: &quot;true&quot;,
        &quot;stepped&quot;: &quot;true&quot;,
        &quot;stacked&quot;: &quot;true&quot;
    }
</cfscript>
<cfchart format =&quot;html&quot; type=&quot;steppedarea&quot; width=&quot;600&quot; height=&quot;400&quot; plot=&quot;#plot#&quot; 
title=&quot;階段領域を含む積み重ね面グラフ&quot;>
   <cfchartseries label=&quot;1 週目&quot;>
        <cfchartdata item=1 value=10>
        <cfchartdata item=2 value=20>
        <cfchartdata item=3 value=30>
        <cfchartdata item=4 value=20>
        <cfchartdata item=5 value=40>
    </cfchartseries>
   <cfchartseries label=&quot;2 週目&quot;>
        <cfchartdata item=1 value=0>
        <cfchartdata item=2 value=30>
        <cfchartdata item=3 value=-36>
        <cfchartdata item=4 value=29>
        <cfchartdata item=5 value=48>
    </cfchartseries>
</cfchart>

出力

例 2

スクリプトを再利用して、クラスター化された階段領域を含む面グラフを作成します。この場合、階段領域を含む面グラフは 2 つの連続したクラスターで表されます。負の値は、ゼロスケールの下に表示されます。

<cfscript>
    plot={
        &quot;alpha-area&quot;:1,
        &quot;contourOnTop&quot;: &quot;true&quot;,
        &quot;clustered&quot;: &quot;true&quot;
     }
</cfscript>
<cfchart format =&quot;html&quot; type=&quot;steppedarea&quot; width=&quot;600&quot; height=&quot;400&quot; plot=&quot;#plot#&quot; 
title=&quot;階段領域を含むクラスター化された面グラフ&quot;>
   <cfchartseries label=&quot;1 週目&quot;>
        <cfchartdata item=1 value=10>
        <cfchartdata item=2 value=20>
        <cfchartdata item=3 value=30>
        <cfchartdata item=4 value=20>
        <cfchartdata item=5 value=40>
    </cfchartseries>
   <cfchartseries label=&quot;2 週目&quot;>
        <cfchartdata item=1 value=0>
        <cfchartdata item=2 value=30>
        <cfchartdata item=3 value=-36>
        <cfchartdata item=4 value=29>
        <cfchartdata item=5 value=48>
    </cfchartseries>
</cfchart>

出力