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

アニメーションは、データ表示域のスムーズなトランジション、動き、または増分変更を作成するためにチャート要素に適用されるビジュアルエフェクトです。これらのアニメーションは、チャートをより魅力的で動的にすることで、インタラクティブ機能とユーザーエクスペリエンスを向上させます。

ColdFusion では、わかりやすくするために、cfchartseries タグの設定内に「animation」オブジェクトを追加することで、アニメーションを有効にするプロセスを簡素化しています。また、animate の値を TRUE に設定します。

基本的な構造は次のとおりです。

"animation":

{

"effect"=7,

"delay"=1,

"method"=1,

"sequence"=2,

"speed"="100",

"animate"=true,

}

"animation": { "effect"=7, "delay"=1, "method"=1, "sequence"=2, "speed"="100", "animate"=true, }

&quot;animation&quot;: 
{ 
    &quot;effect&quot;=7, 
    &quot;delay&quot;=1, 
    &quot;method&quot;=1, 
    &quot;sequence&quot;=2, 
    &quot;speed&quot;=&quot;100&quot;, 
    &quot;animate&quot;=true, 
}

例えば、cfscript では次のようになります。

"animation"={

"effect"=7,

"delay"=1,

"method"=1,

"sequence"=2,

"speed"="100",

"animate"=true

}

</cfscript>

<cfscript> "animation"={ "effect"=7, "delay"=1, "method"=1, "sequence"=2, "speed"="100", "animate"=true } </cfscript>

<cfscript>
       &quot;animation&quot;={
            &quot;effect&quot;=7, 
            &quot;delay&quot;=1, 
            &quot;method&quot;=1, 
            &quot;sequence&quot;=2, 
            &quot;speed&quot;=&quot;100&quot;, 
            &quot;animate&quot;=true
     }
</cfscript>

属性

エフェクト：アニメーションエフェクトを定義します。値の範囲は 1～13 で、フェードイン、スライド、バウンスなどを表します。次の表に、指定するエフェクトの値とエフェクトのタイプを示します。

値

エフェクト

ANIMATION_FADE_IN

ANIMATION_EXPAND_VERTICAL

ANIMATION_EXPAND_TOP

ANIMATION_EXPAND_BOTTOM

ANIMATION_EXPAND_LEFT

ANIMATION_EXPAND_RIGHT

ANIMATION_EXPAND_HORIZONTAL

ANIMATION_SLIDE_LEFT

ANIMATION_SLIDE_RIGHT

ANIMATION_SLIDE_TOP

ANIMATION_SLIDE_BOTTOM

ANIMATION_UNFOLD_HORIZONTAL

ANIMATION_UNFOLD_VERTICAL

ディレイ：アニメーションが開始するまでの時間を設定します。ディレイは秒単位またはミリ秒単位で指定します。1～9 の数値を指定すると、ディレイは秒単位で測定されます。

メソッド：アニメーションのイージングのタイプ（easeIn、easeOut、linear など）を定義します。メソッドの値の範囲は 0～5 です。次の表に、指定するメソッドの値とメソッドのタイプを示します。

値

メソッド

ANIMATION_LINEAR

ANIMATION_BACK_EASE_OUT

ANIMATION_ELASTIC_EASE_OUT

ANIMATION_BOUNCE_EASE_OUT

ANIMATION_STRONG_EASE_OUT

ANIMATION_REGULAR_EASE_OUT

シーケンス：プロット項目のアニメーションの順序を決定します。一度にすべてをアニメートすることも、グループでアニメートすることも、一度に 1 つのプロットノードをアニメートすることもできます。値の範囲は 0～3 です。次の表に、指定するシーケンスの値とシーケンスのタイプを示します。

値

シーケンス

ANIMATION_NO_SEQUENCE

ANIMATION_BY_PLOT

ANIMATION_BY_NODE

ANIMATION_BY_PLOT_AND_NODE

速度：アニメーションの期間を秒単位またはミリ秒単位で指定します。1～9 の数値を指定すると、速度は秒単位で測定されます。

チャートレベルでのアニメーションの追加

<cfchart> タグ内のアニメーションオブジェクトを使用して、インタラクティブチャートアニメーションを追加します。

例えば、アニメーション付きの棒グラフを作成するには、次のコードを使用できます。

plot= {

animation= {

"effect"= 7,

"delay" = 3,

"method" = 1,

"animate" = TRUE

}

</cfscript>

<cfchart format="html" type="bar" markersize="5" height="600" width="800" showLegend="FALSE"

plot="#plot#" title="気温（°C）- 月別">

</cfchartseries>

</cfchart>

<cfscript> plot= { animation= { "effect"= 7, "delay" = 3, "method" = 1, "animate" = TRUE } } </cfscript> <cfchart format="html" type="bar" markersize="5" height="600" width="800" showLegend="FALSE" plot="#plot#" title="気温（°C）- 月別"> <cfchartseries seriescolor="##5a90ca"> <cfchartdata item="1 月" value="15"> <cfchartdata item="2 月" value="19"> <cfchartdata item="3 月" value="28"> <cfchartdata item="4 月" value="35"> <cfchartdata item="5 月" value="41"> <cfchartdata item="6 月" value="37"> </cfchartseries> </cfchart>

<cfscript>
    plot= {
        animation= {
            &quot;effect&quot;= 7,
            &quot;delay&quot; = 3,
            &quot;method&quot; = 1,
            &quot;animate&quot; = TRUE
        }
    }
</cfscript>
<cfchart format=&quot;html&quot; type=&quot;bar&quot; markersize=&quot;5&quot; height=&quot;600&quot; width=&quot;800&quot; showLegend=&quot;FALSE&quot; 
plot=&quot;#plot#&quot; title=&quot;気温（°C）- 月別&quot;>
    <cfchartseries seriescolor=&quot;##5a90ca&quot;>
        <cfchartdata item=&quot;1 月&quot; value=&quot;15&quot;>
        <cfchartdata item=&quot;2 月&quot; value=&quot;19&quot;>
        <cfchartdata item=&quot;3 月&quot; value=&quot;28&quot;>
        <cfchartdata item=&quot;4 月&quot; value=&quot;35&quot;>
        <cfchartdata item=&quot;5 月&quot; value=&quot;41&quot;>
        <cfchartdata item=&quot;6 月&quot; value=&quot;37&quot;>
    </cfchartseries>
</cfchart>

例

例 1 - effect 属性の使用

"animation"={

"effect"=7,

"animate"=TRUE

}

</cfscript>

<cfchart format = "html" type = "bar" markersize="5" height="600" width="800" showLegend=FALSE

title="気温（°C）- 月別">

</cfchartseries>

</cfchart>

<cfscript> "animation"={ "effect"=7, "animate"=TRUE } </cfscript> <cfchart format = "html" type = "bar" markersize="5" height="600" width="800" showLegend=FALSE title="気温（°C）- 月別"> <cfchartseries seriescolor="##5a90ca" animate="#animation#"> <cfchartdata item="1 月" value="15"> <cfchartdata item="2 月" value="19"> <cfchartdata item="3 月" value="28"> <cfchartdata item="4 月" value="35"> <cfchartdata item="5 月" value="41"> <cfchartdata item="6 月" value="37"> </cfchartseries> </cfchart>

<cfscript>
    &quot;animation&quot;={
            &quot;effect&quot;=7, 
            &quot;animate&quot;=TRUE
    }
</cfscript>
<cfchart format = &quot;html&quot; type = &quot;bar&quot; markersize=&quot;5&quot; height=&quot;600&quot; width=&quot;800&quot; showLegend=FALSE 
 title=&quot;気温（°C）- 月別&quot;>
   <cfchartseries seriescolor=&quot;##5a90ca&quot; animate=&quot;#animation#&quot;>
        <cfchartdata item=&quot;1 月&quot; value=&quot;15&quot;>
        <cfchartdata item=&quot;2 月&quot; value=&quot;19&quot;>
        <cfchartdata item=&quot;3 月&quot; value=&quot;28&quot;>
        <cfchartdata item=&quot;4 月&quot; value=&quot;35&quot;>
        <cfchartdata item=&quot;5 月&quot; value=&quot;41&quot;>
        <cfchartdata item=&quot;6 月&quot; value=&quot;37&quot;>
    </cfchartseries>
</cfchart>

このスクリプトは、チャートのアニメーション設定を保持する構造体を定義します。
アニメーション構造体のエフェクトキーは 7 です。この場合、チャートの棒は拡大すると水平方向にアニメートされます。

例 2 - delay 属性の使用

"animation"={

"effect"=7,

"delay"=1,

"animate"=TRUE

}

</cfscript>

<cfchart format = "html" type = "bar" markersize="5" height="600" width="800" showLegend=FALSE

title="気温（°C）- 月別">

</cfchartseries>

</cfchart>

<cfscript> "animation"={ "effect"=7, "delay"=1, "animate"=TRUE } </cfscript> <cfchart format = "html" type = "bar" markersize="5" height="600" width="800" showLegend=FALSE title="気温（°C）- 月別"> <cfchartseries seriescolor="##5a90ca" animate="#animation#"> <cfchartdata item="1 月" value="15"> <cfchartdata item="2 月" value="19"> <cfchartdata item="3 月" value="28"> <cfchartdata item="4 月" value="35"> <cfchartdata item="5 月" value="41"> <cfchartdata item="6 月" value="37"> </cfchartseries> </cfchart>

<cfscript>
    &quot;animation&quot;={
            &quot;effect&quot;=7,
            &quot;delay&quot;=1,
            &quot;animate&quot;=TRUE
    }
</cfscript>
<cfchart format = &quot;html&quot; type = &quot;bar&quot; markersize=&quot;5&quot; height=&quot;600&quot; width=&quot;800&quot; showLegend=FALSE 
 title=&quot;気温（°C）- 月別&quot;>
   <cfchartseries seriescolor=&quot;##5a90ca&quot; animate=&quot;#animation#&quot;>
        <cfchartdata item=&quot;1 月&quot; value=&quot;15&quot;>
        <cfchartdata item=&quot;2 月&quot; value=&quot;19&quot;>
        <cfchartdata item=&quot;3 月&quot; value=&quot;28&quot;>
        <cfchartdata item=&quot;4 月&quot; value=&quot;35&quot;>
        <cfchartdata item=&quot;5 月&quot; value=&quot;41&quot;>
        <cfchartdata item=&quot;6 月&quot; value=&quot;37&quot;>
    </cfchartseries>
</cfchart>

アニメーション構造体には、次の 2 つのプロパティが含まれます。
- "effect"=7：アニメーションは 7 で、水平方向の拡張エフェクトを表します。
- "delay"=1：アニメーションが始まる前に 1 秒のディレイを指定します。つまり、棒は水平方向にアニメートされる前に 1 秒待機します。

例 3 - method 属性の使用

"animation"={

"effect"=7,

"delay"=1,

"method"=1,

"animate"=TRUE

}

</cfscript>

<cfchart format = "html" type = "bar" markersize="5" height="600" width="800" showLegend=FALSE

title="気温（°C）- 月別">

</cfchartseries>

</cfchart>

<cfscript> "animation"={ "effect"=7, "delay"=1, "method"=1, "animate"=TRUE } </cfscript> <cfchart format = "html" type = "bar" markersize="5" height="600" width="800" showLegend=FALSE title="気温（°C）- 月別"> <cfchartseries seriescolor="##5a90ca" animate="#animation#"> <cfchartdata item="1 月" value="15"> <cfchartdata item="2 月" value="19"> <cfchartdata item="3 月" value="28"> <cfchartdata item="4 月" value="35"> <cfchartdata item="5 月" value="41"> <cfchartdata item="6 月" value="37"> </cfchartseries> </cfchart>

<cfscript>
    &quot;animation&quot;={
            &quot;effect&quot;=7,
            &quot;delay&quot;=1,
            &quot;method&quot;=1,
            &quot;animate&quot;=TRUE
    }
</cfscript>
<cfchart format = &quot;html&quot; type = &quot;bar&quot; markersize=&quot;5&quot; height=&quot;600&quot; width=&quot;800&quot; showLegend=FALSE 
 title=&quot;気温（°C）- 月別&quot;>
   <cfchartseries seriescolor=&quot;##5a90ca&quot; animate=&quot;#animation#&quot;>
        <cfchartdata item=&quot;1 月&quot; value=&quot;15&quot;>
        <cfchartdata item=&quot;2 月&quot; value=&quot;19&quot;>
        <cfchartdata item=&quot;3 月&quot; value=&quot;28&quot;>
        <cfchartdata item=&quot;4 月&quot; value=&quot;35&quot;>
        <cfchartdata item=&quot;5 月&quot; value=&quot;41&quot;>
        <cfchartdata item=&quot;6 月&quot; value=&quot;37&quot;>
    </cfchartseries>
</cfchart>

アニメーション構造体には、次のものが含まれます。
- "effect"=7：アニメーションのタイプを設定します。7 は水平方向の拡張エフェクトに対応します。
- "delay"=1：アニメーションが開始する前に 1 秒のディレイを設定します。これにより、各棒は 1 秒待機した後にアニメーションを開始します。
- "method"=1：アニメーションのメソッドを指定します。ColdFusion チャートアニメーションでは、メソッド 1 はチャートのイージングアウトエフェクトを示します。

例 4 - sequence 属性の使用

"animation"={

"effect"=7,

"delay"=1,

"method"=1,

"sequence"=2,

"animate"=TRUE

}

</cfscript>

<cfchart format = "html" type = "bar" markersize="5" height="600" width="800" showLegend=FALSE

title="気温（°C）- 月別">

</cfchartseries>

</cfchart>

<cfscript> "animation"={ "effect"=7, "delay"=1, "method"=1, "sequence"=2, "animate"=TRUE } </cfscript> <cfchart format = "html" type = "bar" markersize="5" height="600" width="800" showLegend=FALSE title="気温（°C）- 月別"> <cfchartseries seriescolor="##5a90ca" animate="#animation#"> <cfchartdata item="1 月" value="15"> <cfchartdata item="2 月" value="19"> <cfchartdata item="3 月" value="28"> <cfchartdata item="4 月" value="35"> <cfchartdata item="5 月" value="41"> <cfchartdata item="6 月" value="37"> </cfchartseries> </cfchart>

<cfscript>
    &quot;animation&quot;={
            &quot;effect&quot;=7,
            &quot;delay&quot;=1,
            &quot;method&quot;=1,
            &quot;sequence&quot;=2,
            &quot;animate&quot;=TRUE
    }
</cfscript>
<cfchart format = &quot;html&quot; type = &quot;bar&quot; markersize=&quot;5&quot; height=&quot;600&quot; width=&quot;800&quot; showLegend=FALSE 
 title=&quot;気温（°C）- 月別&quot;>
   <cfchartseries seriescolor=&quot;##5a90ca&quot; animate=&quot;#animation#&quot;>
        <cfchartdata item=&quot;1 月&quot; value=&quot;15&quot;>
        <cfchartdata item=&quot;2 月&quot; value=&quot;19&quot;>
        <cfchartdata item=&quot;3 月&quot; value=&quot;28&quot;>
        <cfchartdata item=&quot;4 月&quot; value=&quot;35&quot;>
        <cfchartdata item=&quot;5 月&quot; value=&quot;41&quot;>
        <cfchartdata item=&quot;6 月&quot; value=&quot;37&quot;>
    </cfchartseries>
</cfchart>

アニメーション構造体には、次の 4 つのプロパティが含まれます。
- "effect"=7：棒をアニメートするために水平方向の拡張エフェクトを使用します。
- "delay"=1：アニメーションが開始する前に 1 秒のディレイを設定します。これにより、各棒は 1 秒待機した後にアニメーションを開始します。
- "method"=1：アニメーションのメソッドを指定します。ColdFusion チャートアニメーションでは、メソッド 1 はチャートのイージングアウトエフェクトを示します。
- "sequence"=2：棒のアニメーションの順序を決定します。シーケンス値 2 は、棒が一度にすべてではなく、次々に順番にアニメートすることを示します。

例 5 - speed 属性の使用

"animation"={

"effect"=7,

"delay"=1,

"method"=1,

"sequence"=2,

"speed"="100",

"animate"=TRUE

}

</cfscript>

<cfchart format = "html" type = "bar" markersize="5" height="600" width="800" showLegend=FALSE

title="気温（°C）- 月別">

</cfchartseries>

</cfchart>

<cfscript> "animation"={ "effect"=7, "delay"=1, "method"=1, "sequence"=2, "speed"="100", "animate"=TRUE } </cfscript> <cfchart format = "html" type = "bar" markersize="5" height="600" width="800" showLegend=FALSE title="気温（°C）- 月別"> <cfchartseries seriescolor="##5a90ca" animate="#animation#"> <cfchartdata item="1 月" value="15"> <cfchartdata item="2 月" value="19"> <cfchartdata item="3 月" value="28"> <cfchartdata item="4 月" value="35"> <cfchartdata item="5 月" value="41"> <cfchartdata item="6 月" value="37"> </cfchartseries> </cfchart>

<cfscript>
    &quot;animation&quot;={
            &quot;effect&quot;=7,
            &quot;delay&quot;=1,
            &quot;method&quot;=1,
            &quot;sequence&quot;=2,
            &quot;speed&quot;=&quot;100&quot;,
            &quot;animate&quot;=TRUE
    }
</cfscript>
<cfchart format = &quot;html&quot; type = &quot;bar&quot; markersize=&quot;5&quot; height=&quot;600&quot; width=&quot;800&quot; showLegend=FALSE 
 title=&quot;気温（°C）- 月別&quot;>
   <cfchartseries seriescolor=&quot;##5a90ca&quot; animate=&quot;#animation#&quot;>
        <cfchartdata item=&quot;1 月&quot; value=&quot;15&quot;>
        <cfchartdata item=&quot;2 月&quot; value=&quot;19&quot;>
        <cfchartdata item=&quot;3 月&quot; value=&quot;28&quot;>
        <cfchartdata item=&quot;4 月&quot; value=&quot;35&quot;>
        <cfchartdata item=&quot;5 月&quot; value=&quot;41&quot;>
        <cfchartdata item=&quot;6 月&quot; value=&quot;37&quot;>
    </cfchartseries>
</cfchart>

アニメーション構造体には、次の 5 つのプロパティが含まれます。
- "effect"=7：棒をアニメートするために水平方向の拡張エフェクトを使用します。
- "delay"=1：アニメーションが開始する前に 1 秒のディレイを設定します。これにより、各棒は 1 秒待機した後にアニメーションを開始します。
- "method"=1：アニメーションのメソッドを指定します。ColdFusion チャートアニメーションでは、メソッド 1 はチャートのイージングアウトエフェクトを示します。
- "sequence"=2：棒のアニメーションの順序を決定します。シーケンス値 2 は、棒が一度にすべてではなく、次々に順番にアニメートすることを示します。
- "speed"="100"：アニメーションの速度を 100 ミリ秒に設定し、各棒がアニメーションを完了する速度を制御します。

チャートへの複数のアニメーションの追加

これまでは、チャートごとにアニメーションを 1 つのみ追加していました。アニメーションプロパティを使用し、cfchartseries タグで複数のデータポイントを指定すると、複数のアニメーションを追加することもできます。

plot={

"animation": {

"effect": 13,

"speed": "1000",

"method":3,

"sequence":2,

"delay": 1,

"animate" = TRUE

}

</cfscript>

<cfchart format="html" name="myChart" height="530" width="1000" plot="#plot#" title="10 day movement of stocks"

showLegend="TRUE">

</cfchartseries>

</cfchartseries>

</cfchartseries>

</cfchart>

<cfscript> plot={ "animation": { "effect": 13, "speed": "1000", "method":3, "sequence":2, "delay": 1, "animate" = TRUE } } </cfscript> <cfchart format="html" name="myChart" height="530" width="1000" plot="#plot#" title="10 day movement of stocks" showLegend="TRUE"> <cfchartseries type="curve" markerstyle="triangle" label="CFX Tech"> <cfchartdata item="1 日目" value="30"> <cfchartdata item="2 日目" value="40"> <cfchartdata item="3 日目" value="35"> <cfchartdata item="4 日目" value="30"> <cfchartdata item="5 日目" value="45"> <cfchartdata item="6 日目" value="27"> <cfchartdata item="7 日目" value="35"> <cfchartdata item="8 日目" value="39"> <cfchartdata item="9 日目" value="30"> <cfchartdata item="10 日目" value="34"> </cfchartseries> <cfchartseries type="curve" label="TDX Corp"> <cfchartdata item="1 日目" value="35"> <cfchartdata item="2 日目" value="40"> <cfchartdata item="3 日目" value="30"> <cfchartdata item="4 日目" value="27"> <cfchartdata item="5 日目" value="35"> <cfchartdata item="6 日目" value="39"> <cfchartdata item="7 日目" value="59"> <cfchartdata item="8 日目" value="36"> <cfchartdata item="9 日目" value="25"> <cfchartdata item="10 日目" value="29"> </cfchartseries> <cfchartseries type="curve" label="PMT Inc"> <cfchartdata item="1 日目" value="45"> <cfchartdata item="2 日目" value="43"> <cfchartdata item="3 日目" value="36"> <cfchartdata item="4 日目" value="50"> <cfchartdata item="5 日目" value="54"> <cfchartdata item="6 日目" value="52"> <cfchartdata item="7 日目" value="42"> <cfchartdata item="8 日目" value="40"> <cfchartdata item="9 日目" value="49"> <cfchartdata item="10 日目" value="40"> </cfchartseries> </cfchart>

<cfscript>
    plot={
        &quot;animation&quot;: {
            &quot;effect&quot;: 13, 
            &quot;speed&quot;: &quot;1000&quot;,
            &quot;method&quot;:3, 
            &quot;sequence&quot;:2, 
            &quot;delay&quot;: 1,
            &quot;animate&quot; = TRUE
        }
    }
</cfscript>
<cfchart format=&quot;html&quot; name=&quot;myChart&quot; height=&quot;530&quot; width=&quot;1000&quot; plot=&quot;#plot#&quot; title=&quot;10 day movement of stocks&quot;
showLegend=&quot;TRUE&quot;>
   <cfchartseries type=&quot;curve&quot; markerstyle=&quot;triangle&quot; label=&quot;CFX Tech&quot;>
       <cfchartdata item=&quot;1 日目&quot; value=&quot;30&quot;>
       <cfchartdata item=&quot;2 日目&quot; value=&quot;40&quot;>
       <cfchartdata item=&quot;3 日目&quot; value=&quot;35&quot;>
       <cfchartdata item=&quot;4 日目&quot; value=&quot;30&quot;>
       <cfchartdata item=&quot;5 日目&quot; value=&quot;45&quot;>
       <cfchartdata item=&quot;6 日目&quot; value=&quot;27&quot;>
       <cfchartdata item=&quot;7 日目&quot; value=&quot;35&quot;>
       <cfchartdata item=&quot;8 日目&quot; value=&quot;39&quot;>
       <cfchartdata item=&quot;9 日目&quot; value=&quot;30&quot;>
       <cfchartdata item=&quot;10 日目&quot; value=&quot;34&quot;>
        </cfchartseries>
   <cfchartseries type=&quot;curve&quot; label=&quot;TDX Corp&quot;>
       <cfchartdata item=&quot;1 日目&quot; value=&quot;35&quot;>
       <cfchartdata item=&quot;2 日目&quot; value=&quot;40&quot;>
       <cfchartdata item=&quot;3 日目&quot; value=&quot;30&quot;>
       <cfchartdata item=&quot;4 日目&quot; value=&quot;27&quot;>
       <cfchartdata item=&quot;5 日目&quot; value=&quot;35&quot;>
       <cfchartdata item=&quot;6 日目&quot; value=&quot;39&quot;>
       <cfchartdata item=&quot;7 日目&quot; value=&quot;59&quot;>
       <cfchartdata item=&quot;8 日目&quot; value=&quot;36&quot;>
       <cfchartdata item=&quot;9 日目&quot; value=&quot;25&quot;>
       <cfchartdata item=&quot;10 日目&quot; value=&quot;29&quot;>
        </cfchartseries>
   <cfchartseries type=&quot;curve&quot; label=&quot;PMT Inc&quot;>
       <cfchartdata item=&quot;1 日目&quot; value=&quot;45&quot;>
       <cfchartdata item=&quot;2 日目&quot; value=&quot;43&quot;>
       <cfchartdata item=&quot;3 日目&quot; value=&quot;36&quot;>
       <cfchartdata item=&quot;4 日目&quot; value=&quot;50&quot;>
       <cfchartdata item=&quot;5 日目&quot; value=&quot;54&quot;>
       <cfchartdata item=&quot;6 日目&quot; value=&quot;52&quot;>
       <cfchartdata item=&quot;7 日目&quot; value=&quot;42&quot;>
       <cfchartdata item=&quot;8 日目&quot; value=&quot;40&quot;>
       <cfchartdata item=&quot;9 日目&quot; value=&quot;49&quot;>
       <cfchartdata item=&quot;10 日目&quot; value=&quot;40&quot;>
        </cfchartseries>
</cfchart>

この例では、アニメーション構造体には、アニメーションの動作をカスタマイズするための effect、delay、method などのプロパティが含まれています。

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

新規ユーザーの場合

cfchart を使用したアニメーション

属性

チャートレベルでのアニメーションの追加

例

チャートへの複数のアニメーションの追加

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

このページを共有

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

サポート