マニュアルキャンセル

ColdFusion での高度なチャートのカスタマイズ

検索

最終更新日 : 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 のチャート作成機能により、開発者は動的で視覚的に魅力的なチャートを作成できます。テーマ、アニメーション、ルール、マーカー、数値の書式設定などの高度なカスタマイズにより、開発者はグラフの視覚的な魅力と機能を強化できます。このドキュメントでは、詳細な説明と例を含む、これらのカスタマイズについて詳しく説明します。

テーマ

ColdFusion チャートのテーマでは、開発者はスタイルプロパティを定義して、複数のチャートをまたいで一貫性のあるルックアンドフィールを維持できます。テーマでは、色、フォント、その他のプロット要素などの要素を、組織のデザイン言語やガイドラインに合わせてカスタマイズできます。

詳しくは、ColdFusion でのテーマの作成と適用を参照してください。

例

<cfscript>
      legend={&quot;vertical-align&quot;:&quot;bottom&quot;,&quot;align&quot;=&quot;center&quot;};
</cfscript>
<cfchart type=&quot;line&quot; showlegend=TRUE title=&quot;毎日の気温データ&quot; format=&quot;html&quot; width=&quot;800&quot; height=&quot;600&quot;
    legend=&quot;#legend#&quot; theme=&quot;spectrum_light&quot;>
        <cfchartseries serieslabel=&quot;London&quot;>
             <cfchartdata item=&quot;1 日目&quot; value=&quot;25&quot;/>
             <cfchartdata item=&quot;2 日目&quot; value=&quot;26&quot;/>
             <cfchartdata item=&quot;3 日目&quot; value=&quot;29.5&quot;/>
             <cfchartdata item=&quot;4 日目&quot; value=&quot;24&quot;/>
             <cfchartdata item=&quot;5 日目&quot; value=&quot;23&quot;/>
       </cfchartseries>
       <cfchartseries serieslabel=&quot;Bangalore&quot;> 
             <cfchartdata item=&quot;1 日目&quot; value=&quot;31&quot;/>
             <cfchartdata item=&quot;2 日目&quot; value=&quot;29&quot;/>
             <cfchartdata item=&quot;3 日目&quot; value=&quot;28&quot;/>
             <cfchartdata item=&quot;4 日目&quot; value=&quot;33&quot;/>
             <cfchartdata item=&quot;Day 5&quot; value=&quot;37&quot;/>
       </cfchartseries>
       <cfchartseries serieslabel=&quot;Durban&quot;>
             <cfchartdata item=&quot;1 日目&quot; value=&quot;33&quot;/>
             <cfchartdata item=&quot;2 日目&quot; value=&quot;36&quot;/>
             <cfchartdata item=&quot;3 日目&quot; value=&quot;34&quot;/>
             <cfchartdata item=&quot;4 日目&quot; value=&quot;39&quot;/>
             <cfchartdata item=&quot;5 日目&quot; value=&quot;32&quot;/>
       </cfchartseries>
</cfchart>

アニメーション

ColdFusion チャートのアニメーションは、視覚的な興味に加え、時間の経過に伴うデータの変化をハイライト表示するのに役立ちます。ColdFusion は、様々なアニメーションエフェクト、速度、シーケンスをサポートしています。

エフェクト：アニメーションエフェクトのタイプ（例：フェード、スライド）。
速度：アニメーションの期間。
ディレイ：アニメーションが開始するまでのディレイ。
シーケンス：要素がアニメーション化される順序。
メソッド：アニメーションのイージングのタイプ（easeIn、easeOut、linear など）の定義。

詳しくは、ColdFusion でのチャートへのアニメーションを追加を参照してください。

例

<cfchart format=&quot;html&quot; chartheight=&quot;300&quot; chartwidth=&quot;400&quot; title=&quot;月間売上高&quot; type=&quot;line&quot; animation=&quot;true&quot; effect=&quot;fade&quot; speed=&quot;2&quot;>
    <cfchartseries type=&quot;line&quot; serieslabel=&quot;Sales&quot;>
        <cfchartdata item=&quot;1 月&quot; value=&quot;150&quot; />
        <cfchartdata item=&quot;2 月&quot; value=&quot;200&quot; />
        <cfchartdata item=&quot;3 月&quot; value=&quot;180&quot; />
        <cfchartdata item=&quot;4 月&quot; value=&quot;250&quot; />
        <cfchartdata item=&quot;5 月&quot; value=&quot;300&quot; />
    </cfchartseries>
</cfchart>

この例では、アニメーション、エフェクト、速度の属性を使用して折れ線グラフにアニメーションを追加しています

ルール

ColdFusion チャートのルールでは、特定の条件に基づいてチャートの外観を動的にカスタマイズできます。ルールでは、論理条件に基づいてチャート要素の外観を変更できます。

演算子：ルールでは様々なタイプの演算子（等価、範囲など）を使用できます。
構文：ルールは、値の範囲や等価性などの条件を指定する文字列を使用して定義されます。

詳しくは、ColdFusion でのチャートへのルールの適用を参照してください。

例

<cfchart format=&quot;html&quot; chartheight=&quot;300&quot; chartwidth=&quot;400&quot; title=&quot;売上データ&quot; type=&quot;bar&quot;>
    <cfchartseries type=&quot;bar&quot; serieslabel=&quot;Sales&quot;>
        <cfchartdata item=&quot;第 1 四半期&quot; value=&quot;150&quot; />
        <cfchartdata item=&quot;第 2 四半期&quot; value=&quot;200&quot; />
        <cfchartdata item=&quot;第 3 四半期&quot; value=&quot;180&quot; />
        <cfchartdata item=&quot;第 4 四半期&quot; value=&quot;250&quot; />
    </cfchartseries>
    <cfchartstyle rule=&quot;%v > 200&quot; color=&quot;##FF0000&quot; />
</cfchart>

この例では、cfchartstyle タグを使用して、値が 200 より大きい棒の色を変更するルールを適用します。

マーカー

ColdFusion チャートのマーカーでは、特定のデータポイントをハイライト表示し、異常値を簡単に識別できます。マーカーは、シェイプ、サイズ、色、透明度をカスタマイズできます。

シェイプ：円、正方形、三角形など。
サイズ：マーカーのサイズの調整。
色：マーカーの色の変更。
透明度：マーカーの透明度の調整。

詳しくは、ColdFusion チャートへのマーカーの追加を参照してください。

例

<cfchart format=&quot;html&quot; chartheight=&quot;300&quot; chartwidth=&quot;400&quot; title=&quot;売上データ&quot; type=&quot;line&quot;>
    <cfchartseries type=&quot;line&quot; serieslabel=&quot;Sales&quot;>
        <cfchartdata item=&quot;1 月&quot; value=&quot;150&quot; />
        <cfchartdata item=&quot;2 月&quot; value=&quot;200&quot; />
        <cfchartdata item=&quot;3 月&quot; value=&quot;180&quot; />
        <cfchartdata item=&quot;4 月&quot; value=&quot;250&quot; />
        <cfchartdata item=&quot;5 月&quot; value=&quot;300&quot; />
    </cfchartseries>
    <cfchartmarker shape=&quot;circle&quot; size=&quot;10&quot; color=&quot;##FF0000&quot; transparency=&quot;0.5&quot; />
</cfchart>

この例では、cfchartmarker タグを使用して折れ線グラフにマーカーを追加します

数値の書式設定

ColdFusion チャートの数値の書式設定では、開発者は通貨、パーセンテージ、科学的記数法などの数値の表示を制御できます。詳しくは、ColdFusion チャートの数値の書式設定を参照してください。

書式設定オプション：Y 軸ラベルの書式設定（数値、通貨、パーセント、日付など）を指定します。

例

<cfscript>
    plot={
        &quot;exponent&quot; : true,
        &quot;exponent-decimals&quot; : 1
    }
    scaley = {
        &quot;exponent&quot; : true,
        &quot;exponent-decimals&quot; : 3
    }
</cfscript>
<cfchart format=&quot;html&quot; type = &quot;bar&quot; markerSize=&quot;12&quot;  plot=&quot;#plot#&quot;
yaxis=#scaley# title=&quot;科学的記数法&quot; height=&quot;400&quot; width=&quot;800&quot; showLegend=&quot;FALSE&quot;>
        <cfchartseries  seriescolor=&quot;##5aca91&quot;>
            <cfchartdata item=&quot;インド&quot; value=&quot;5000000&quot;>
            <cfchartdata item=&quot;フランス&quot; value=&quot;2000000&quot;>
            <cfchartdata item=&quot;オーストラリア&quot; value=&quot;3000000&quot;>
            <cfchartdata item=&quot;ブラジル&quot; value=&quot;7000000&quot;>
        </cfchartseries>
</cfchart>

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

新規ユーザーの場合

ColdFusion での高度なチャートのカスタマイズ

テーマ

アニメーション

ルール

マーカー

数値の書式設定

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

このページを共有

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

サポート