マニュアルキャンセル

cfchart を使用した 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 には、web アプリケーションのチャートを作成およびカスタマイズするための <cfchart> タグが用意されています。様々な属性とネストされたタグを活用することで、ユーザーはチャートの外観、スタイル、動作を変更できます。

<cfchart> タグは、デフォルト設定でチャートを生成します。ユーザーは、format、show3d、chartHeight、chartWidth などの属性を使用してカスタマイズできます。

例

<cfchart format=&quot;html&quot; chartheight=&quot;300&quot; chartwidth=&quot;500&quot;>
    <cfchartseries type=&quot;bar&quot;>
        <cfchartdata item=&quot;Q1&quot; value=&quot;100&quot;/>
        <cfchartdata item=&quot;Q2&quot; value=&quot;150&quot;/>
        <cfchartdata item=&quot;Q3&quot; value=&quot;200&quot;/>
    </cfchartseries>
</cfchart>

チャートの外観のカスタマイズ
チャートの色のカスタマイズ
ラベルとタイトルのカスタマイズ
データ表示域のカスタマイズ
チャートの凡例とツールヒントのカスタマイズ
軸とグリッド線のカスタマイズ
動的に更新されるチャートの作成
arrows 属性の使用
true3d=false の場合の aspect3d 属性の使用
true3d=true の場合の aspect3d 属性の使用
background 属性の使用
border 属性の使用
crosshair 属性の使用

fill 属性の使用
labels 属性の使用
legend 属性の使用
plot 属性の使用
preview 属性の使用
seriesPlacement 属性の使用
scales 属性の使用
xAxis 属性の使用
zoom 属性の使用
高さ、幅、パーセントの使用
bevel 属性の使用
axis 属性の使用

チャートの外観のカスタマイズ

チャートの寸法の設定

chartWidth と chartHeight は、チャートの寸法をピクセル単位で定義します。

チャートの形式

サポートされている形式は、png、jpg、html、svg です。

3D 効果を有効にする

show3d="yes" を使用すると、チャートに 3D 効果を追加できます。

チャートの色のカスタマイズ

背景と境界線の色

背景色を設定するには、 backgroundColor を使用します。
チャートの境界線を有効または無効にするには、境界線を使用します。

系列の色のカスタマイズ

{{}}{{}}{{}}{{{{}}}} の {2}{3}colorlist{4}{5} を使用して、様々なデータ系列の色を定義します。{10}

ラベルとタイトルのカスタマイズ

チャートのタイトル

title：チャートのメインタイトルを定義します。
xAxisTitle および yAxisTitle：棒グラフと折れ線グラフの軸にラベルを付けます。

データ表示域のカスタマイズ

<cfchartseries> を使用したデータの定義

<cfchartseries> タグは、データタイプと値を指定します。

<cfchart format=&quot;png&quot; type=&quot;bar&quot;>
    <cfchartseries type=&quot;bar&quot;>
        <cfchartdata item=&quot;January&quot; value=&quot;5000&quot;>
        <cfchartdata item=&quot;February&quot; value=&quot;7000&quot;>
        <cfchartdata item=&quot;March&quot; value=&quot;6000&quot;>
    </cfchartseries>
</cfchart>

比較データの複数系列

グループ化された棒グラフまたは複数の折れ線グラフに複数の <cfchartseries> を追加します。

<cfchart format=&quot;html&quot; type=&quot;bar&quot;>
    <cfchartseries type=&quot;bar&quot; seriesLabel=&quot;Product A&quot;>
        <cfchartdata item=&quot;Q1&quot; value=&quot;2000&quot;>
        <cfchartdata item=&quot;Q2&quot; value=&quot;3000&quot;>
    </cfchartseries>
    <cfchartseries type=&quot;bar&quot; seriesLabel=&quot;Product B&quot;>
        <cfchartdata item=&quot;Q1&quot; value=&quot;2500&quot;>
        <cfchartdata item=&quot;Q2&quot; value=&quot;3500&quot;>
    </cfchartseries>
</cfchart>

クエリからのデータの動的入力

<cfquery name=&quot;salesData&quot; datasource=&quot;myDB&quot;>
    SELECT month, revenue FROM sales_table
</cfquery>

<cfchart format=&quot;html&quot; type=&quot;line&quot;>
    <cfchartseries type=&quot;line&quot;>
        <cfloop query=&quot;salesData&quot;>
            <cfchartdata item=&quot;#month#&quot; value=&quot;#revenue#&quot;>
        </cfloop>
    </cfchartseries>
</cfchart>

チャートの凡例とツールヒントのカスタマイズ

凡例の有効化とスタイル設定

showLegend：凡例を表示します。
legendPosition：上、下、左または右に配置します。

データポイントのツールヒントの使用

showMarkers="yes" は、インタラクティブマーカーを表示します。
markerSize はマーカーサイズを調整します。

軸とグリッド線のカスタマイズ

軸のスケールの調整

xAxis と xAxis2：X 軸と 2 番目の X 軸を書式設定します。
yAxis と yAxis2：Y 軸と 2 番目の Y 軸を書式設定します。

グリッド線の表示と非表示

showXGridlines または showYGridlines を TRUE または FALSE に設定します。

動的に更新されるチャートの作成

動的チャートの主な用途は、データのリアルタイム表示です。このような場合、チャートに新しいデータを一定間隔で表示する必要があります。

フル更新フィードを使用すると、チャート全体を一定間隔で更新できます。古い値には関連性がなく、最新の数値を表示するだけでいい場合は、フル更新チャートを使用します。

このようなチャートでは、指定した間隔でチャートが最新データの取得を試みる URL が必要です。

<!--- refresh.cfm --->

<cfchart format=&quot;html&quot; refresh=&quot;#{&quot;type&quot;=&quot;full&quot;,&quot;interval&quot;:&quot;2&quot;,&quot;url&quot;:&quot;feed.cfm&quot;}#&quot; chartWidth=&quot;800&quot; chartHeight=&quot;600&quot;/>

<!--- feed.cfm --->

<cfscript>
       values1=values2=values3=[];
       for (i=1;i<=5;i++){
             values1[i]=randRange(20,40);
       }
       for (i=1;i<=5;i++){
             values2[i]=randRange(40,60);
       }
       for (i=1;i<=5;i++){
             values3[i]=randRange(60,80);
       }
</cfscript>
{
  &quot;graphset&quot; : [
  {
    &quot;type&quot; : &quot;bar&quot;,
    &quot;refresh&quot; : {
        &quot;type&quot; : &quot;full&quot;,
        &quot;interval&quot; : 2
    },
       &quot;title&quot; : {
             &quot;text&quot; : &quot;Full Refresh Chart&quot;
       },
    &quot;series&quot; : [
     {
        &quot;values&quot; : <cfoutput>#serializeJSON(values1)#</cfoutput>
     },
     {
        &quot;values&quot; : <cfoutput>#serializeJSON(values2)#</cfoutput>
     },
     {
        &quot;values&quot; : <cfoutput>#serializeJSON(values3)#</cfoutput>
     }] 
  }]
}

ダウンロード

ファイルを取得する

クリックすると出力が表示されます。これは MP4 ムービーファイルです。

arrows 属性の使用

<cfscript> arrows=[{&quot;backgroundColor&quot;:&quot;red&quot;,&quot;label&quot;:{&quot;text&quot;:&quot;Data for 2017&quot;,&quot;bold&quot;:true,&quot;backgroundColor&quot;:&quot;white&quot;}, &quot;size&quot;:6,&quot;from&quot;:{&quot;x&quot;:200,&quot;y&quot;:100},&quot;to&quot;:{&quot;x&quot;:400,&quot;y&quot;:200}}]; </cfscript> <cfchart format=&quot;html&quot; type=&quot;bar&quot; showlegend=&quot;false&quot; chartHeight=&quot;400&quot; chartWidth=&quot;600&quot; title=&quot;Chart with arrow&quot; show3d=&quot;true&quot; arrows=&quot;#arrows#&quot;> <cfchartseries > <cfchartdata item=&quot;2015&quot; value=20> <cfchartdata item=&quot;2016&quot; value=40> <cfchartdata item=&quot;2017&quot; value=60> </cfchartseries> </cfchart>

出力

true3d=false の場合の aspect3d 属性の使用

<cfscript> aspect3d={&quot;angle&quot;:90,&quot;depth&quot;:100,&quot;true3d&quot;:false}; </cfscript> <cfchart format=&quot;html&quot; chartHeight=&quot;400&quot; chartWidth=&quot;600&quot; showLegend=&quot;no&quot; title=&quot;Two-series chart&quot; aspect3d=&quot;#aspect3d#&quot; show3d=&quot;true&quot;> <cfchartseries type=&quot;bar&quot; serieslabel=&quot;WBC&quot; markerstyle=&quot;circle&quot; color=&quot;red&quot;> <cfchartdata item=&quot;Day 1&quot; value=&quot;19.2&quot;/> <cfchartdata item=&quot;Day 2&quot; value=&quot;15.2&quot;/> <cfchartdata item=&quot;Day 3&quot; value=&quot;15.1&quot;/> <cfchartdata item=&quot;Day 4&quot; value=&quot;12.6&quot;/> <cfchartdata item=&quot;Day 5&quot; value=&quot;14.2&quot;/> </cfchartseries> <cfchartseries type=&quot;bar&quot; serieslabel=&quot;HCT&quot; markerstyle=&quot;diamond&quot; color=&quot;blue&quot; > <cfchartdata item=&quot;Day 1&quot; value=&quot;39.2&quot;/> <cfchartdata item=&quot;Day 2&quot; value=&quot;35.2&quot;/> <cfchartdata item=&quot;Day 3&quot; value=&quot;35.1&quot;/> <cfchartdata item=&quot;Day 4&quot; value=&quot;32.6&quot;/> <cfchartdata item=&quot;Day 5&quot; value=&quot;34.2&quot;/> </cfchartseries> </cfchart>

出力

true3d=true の場合の aspect3d 属性の使用

<cfscript> aspect3d={&quot;angle&quot;:90,&quot;depth&quot;:100,&quot;true3d&quot;:true}; </cfscript> <cfchart format=&quot;html&quot; chartHeight=&quot;400&quot; chartWidth=&quot;600&quot; showLegend=&quot;no&quot; title=&quot;Two-series chart&quot; aspect3d=&quot;#aspect3d#&quot; show3d=&quot;true&quot;> <cfchartseries type=&quot;bar&quot; serieslabel=&quot;WBC&quot; markerstyle=&quot;circle&quot; color=&quot;red&quot;> <cfchartdata item=&quot;Day 1&quot; value=&quot;19.2&quot;/> <cfchartdata item=&quot;Day 2&quot; value=&quot;15.2&quot;/> <cfchartdata item=&quot;Day 3&quot; value=&quot;15.1&quot;/> <cfchartdata item=&quot;Day 4&quot; value=&quot;12.6&quot;/> <cfchartdata item=&quot;Day 5&quot; value=&quot;14.2&quot;/> </cfchartseries> <cfchartseries type=&quot;bar&quot; serieslabel=&quot;HCT&quot; markerstyle=&quot;diamond&quot; color=&quot;blue&quot; > <cfchartdata item=&quot;Day 1&quot; value=&quot;39.2&quot;/> <cfchartdata item=&quot;Day 2&quot; value=&quot;35.2&quot;/> <cfchartdata item=&quot;Day 3&quot; value=&quot;35.1&quot;/> <cfchartdata item=&quot;Day 4&quot; value=&quot;32.6&quot;/> <cfchartdata item=&quot;Day 5&quot; value=&quot;34.2&quot;/> </cfchartseries> </cfchart>

出力

background 属性の使用

<cfscript> background={}; background={&quot;color&quot;:&quot;red&quot;,&quot;color-2&quot;:&quot;green&quot;}; </cfscript> <cfchart format=&quot;html&quot; scalefrom=&quot;0&quot; scaleto=&quot;1200000&quot; showlegend=&quot;true&quot; chartheight=&quot;400&quot; chartwidth=&quot;600&quot; background=&quot;#background#&quot; > <cfchartseries type=&quot;bar&quot; serieslabel=&quot;Website Traffic 2016&quot; seriescolor=&quot;blue&quot;> <cfchartdata item=&quot;January&quot; value=&quot;503100&quot;> <cfchartdata item=&quot;February&quot; value=&quot;720310&quot;> <cfchartdata item=&quot;March&quot; value=&quot;688700&quot;> <cfchartdata item=&quot;April&quot; value=&quot;986500&quot;> <cfchartdata item=&quot;May&quot; value=&quot;1063911&quot;> <cfchartdata item=&quot;June&quot; value=&quot;1115321&quot;> </cfchartseries> <cfchartseries type=&quot;bar&quot; serieslabel=&quot;Website Traffic 2015&quot; seriescolor=&quot;yellow&quot;> <cfchartdata item=&quot;January&quot; value=&quot;#RandRange(300000, 900000)#&quot;> <cfchartdata item=&quot;February&quot; value=&quot;#RandRange(300000, 900000)#&quot;> <cfchartdata item=&quot;March&quot; value=&quot;#RandRange(300000, 900000)#&quot;> <cfchartdata item=&quot;April&quot; value=&quot;#RandRange(300000, 900000)#&quot;> <cfchartdata item=&quot;May&quot; value=&quot;#RandRange(300000, 900000)#&quot;> <cfchartdata item=&quot;June&quot; value=&quot;#RandRange(300000, 900000)#&quot;> </cfchartseries> </cfchart>

出力

border 属性の使用

<cfscript> border={&quot;color&quot;:&quot;blue&quot;,&quot;radius&quot;:6,&quot;width&quot;:2}; </cfscript> <cfchart format=&quot;html&quot; type=&quot;bar&quot; showlegend=&quot;false&quot; chartHeight=&quot;400&quot; chartWidth=&quot;600&quot; border=&quot;#border#&quot;> <cfchartseries > <cfchartdata item=&quot;2015&quot; value=20> <cfchartdata item=&quot;2016&quot; value=40> <cfchartdata item=&quot;2017&quot; value=60> </cfchartseries> </cfchart>

出力

crosshair 属性の使用

<cfscript> crosshair={&quot;line-color&quot;:&quot;green&quot;,&quot;line-style&quot;:&quot;dashed&quot;,&quot;alpha&quot;=1}; </cfscript> <cfchart format=&quot;html&quot; chartHeight=&quot;400&quot; chartWidth=&quot;600&quot; showLegend=&quot;no&quot; title=&quot;Two-series chart&quot; crosshair=&quot;#crosshair#&quot;> <cfchartseries type=&quot;bar&quot; serieslabel=&quot;WBC&quot; markerstyle=&quot;circle&quot; color=&quot;red&quot;> <cfchartdata item=&quot;Day 1&quot; value=&quot;19.2&quot;/> <cfchartdata item=&quot;Day 2&quot; value=&quot;15.2&quot;/> <cfchartdata item=&quot;Day 3&quot; value=&quot;15.1&quot;/> <cfchartdata item=&quot;Day 4&quot; value=&quot;12.6&quot;/> <cfchartdata item=&quot;Day 5&quot; value=&quot;14.2&quot;/> </cfchartseries> <cfchartseries type=&quot;bar&quot; serieslabel=&quot;HCT&quot; markerstyle=&quot;diamond&quot; color=&quot;blue&quot; > <cfchartdata item=&quot;Day 1&quot; value=&quot;39.2&quot;/> <cfchartdata item=&quot;Day 2&quot; value=&quot;35.2&quot;/> <cfchartdata item=&quot;Day 3&quot; value=&quot;35.1&quot;/> <cfchartdata item=&quot;Day 4&quot; value=&quot;32.6&quot;/> <cfchartdata item=&quot;Day 5&quot; value=&quot;34.2&quot;/> </cfchartseries> </cfchart>

出力

fill 属性の使用

<cfscript> fill={&quot;angle&quot;:45,&quot;background-color-1&quot;:&quot;gray&quot;,&quot;background-color-2&quot;:&quot;yellow&quot;}; </cfscript> <cfchart format=&quot;html&quot; chartHeight=&quot;400&quot; chartWidth=&quot;600&quot; showLegend=&quot;no&quot; title=&quot;Two-series chart&quot; fill=&quot;#fill#&quot;> <cfchartseries type=&quot;bar&quot; serieslabel=&quot;WBC&quot; markerstyle=&quot;circle&quot; color=&quot;red&quot;> <cfchartdata item=&quot;Day 1&quot; value=&quot;19.2&quot;/> <cfchartdata item=&quot;Day 2&quot; value=&quot;15.2&quot;/> <cfchartdata item=&quot;Day 3&quot; value=&quot;15.1&quot;/> <cfchartdata item=&quot;Day 4&quot; value=&quot;12.6&quot;/> <cfchartdata item=&quot;Day 5&quot; value=&quot;14.2&quot;/> </cfchartseries> <cfchartseries type=&quot;bar&quot; serieslabel=&quot;HCT&quot; markerstyle=&quot;diamond&quot; color=&quot;blue&quot; > <cfchartdata item=&quot;Day 1&quot; value=&quot;39.2&quot;/> <cfchartdata item=&quot;Day 2&quot; value=&quot;35.2&quot;/> <cfchartdata item=&quot;Day 3&quot; value=&quot;35.1&quot;/> <cfchartdata item=&quot;Day 4&quot; value=&quot;32.6&quot;/> <cfchartdata item=&quot;Day 5&quot; value=&quot;34.2&quot;/> </cfchartseries> </cfchart>

出力

labels 属性の使用

<cfscript> labels=[{&quot;text&quot;:&quot;Sample comparison line chart&quot;,&quot;font-family&quot;:&quot;Verdana&quot;,&quot;font-size&quot;:18}]; </cfscript> <cfchart format=&quot;html&quot; chartHeight=&quot;400&quot; chartWidth=&quot;600&quot; showLegend=&quot;no&quot; labels=&quot;#labels#&quot;> <cfchartseries type=&quot;line&quot; serieslabel=&quot;WBC&quot; markerstyle=&quot;circle&quot; color=&quot;red&quot;> <cfchartdata item=&quot;Day 1&quot; value=&quot;19.2&quot;/> <cfchartdata item=&quot;Day 2&quot; value=&quot;15.2&quot;/> <cfchartdata item=&quot;Day 3&quot; value=&quot;15.1&quot;/> <cfchartdata item=&quot;Day 4&quot; value=&quot;12.6&quot;/> <cfchartdata item=&quot;Day 5&quot; value=&quot;14.2&quot;/> </cfchartseries> <cfchartseries type=&quot;line&quot; serieslabel=&quot;HCT&quot; markerstyle=&quot;diamond&quot; color=&quot;blue&quot; > <cfchartdata item=&quot;Day 1&quot; value=&quot;39.2&quot;/> <cfchartdata item=&quot;Day 2&quot; value=&quot;35.2&quot;/> <cfchartdata item=&quot;Day 3&quot; value=&quot;35.1&quot;/> <cfchartdata item=&quot;Day 4&quot; value=&quot;32.6&quot;/> <cfchartdata item=&quot;Day 5&quot; value=&quot;34.2&quot;/> </cfchartseries> </cfchart>

出力

legend 属性の使用

<cfscript> legend={&quot;background-color&quot;:&quot;lightgray&quot;}; </cfscript> <cfchart format=&quot;html&quot; title=&quot;Graph&quot; chartHeight=&quot;400&quot; chartWidth=&quot;600&quot; showLegend=&quot;yes&quot; legend=&quot;#legend#&quot;> <cfchartseries type=&quot;line&quot; serieslabel=&quot;WBC&quot; markerstyle=&quot;circle&quot; color=&quot;red&quot;> <cfchartdata item=&quot;Day 1&quot; value=&quot;19.2&quot;/> <cfchartdata item=&quot;Day 2&quot; value=&quot;15.2&quot;/> <cfchartdata item=&quot;Day 3&quot; value=&quot;15.1&quot;/> <cfchartdata item=&quot;Day 4&quot; value=&quot;12.6&quot;/> <cfchartdata item=&quot;Day 5&quot; value=&quot;14.2&quot;/> </cfchartseries> <cfchartseries type=&quot;line&quot; serieslabel=&quot;HCT&quot; markerstyle=&quot;diamond&quot; color=&quot;blue&quot; > <cfchartdata item=&quot;Day 1&quot; value=&quot;39.2&quot;/> <cfchartdata item=&quot;Day 2&quot; value=&quot;35.2&quot;/> <cfchartdata item=&quot;Day 3&quot; value=&quot;35.1&quot;/> <cfchartdata item=&quot;Day 4&quot; value=&quot;32.6&quot;/> <cfchartdata item=&quot;Day 5&quot; value=&quot;34.2&quot;/> </cfchartseries> </cfchart>

出力

plot 属性の使用

<cfscript> plot={&quot;rules&quot;:[ { &quot;rule&quot;:&quot;%v<700000&quot;, &quot;background-color&quot;:&quot;green&quot; // 700000 未満の値がすべて緑色の棒で }, // グラフに表示されるルールを設定 { &quot;rule&quot;:&quot;%v>700000&quot;, // 700000 より大きい値がすべて赤色の棒で &quot;background-color&quot;:&quot;red&quot; // グラフに表示されるルールを設定 } ]}; </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;Website Traffic 2016&quot;> <cfchartseries type=&quot;bar&quot;> <cfchartdata item=&quot;January&quot; value=&quot;503100&quot;> <cfchartdata item=&quot;February&quot; value=&quot;620310&quot;> <cfchartdata item=&quot;March&quot; value=&quot;688700&quot;> <cfchartdata item=&quot;April&quot; value=&quot;986500&quot;> <cfchartdata item=&quot;May&quot; value=&quot;1063911&quot;> <cfchartdata item=&quot;June&quot; value=&quot;1115321&quot;> </cfchartseries> </cfchart>

出力

preview 属性の使用

<cfscript> n=200; preview={&quot;visible&quot;:true,&quot;live&quot;:true,&quot;preserve-zoom&quot;:true,&quot;border-width&quot;:&quot;3&quot;}; // preview 構造体 myarray=[]; for (i=1;i<=n;i++){ myarray[i]=randrange(1,n); } strengtharray=[]; for (i=1;i<=n;i++){ strengtharray[i]=randrange(15,25); } myquery=QueryNew(&quot;points,data,strength&quot;,&quot;integer,integer,integer&quot;); for (i=1;i<=arraylen(myarray);i++){ queryAddRow(myquery); querySetCell(myquery,&quot;points&quot;,myarray[i]); querySetCell(myquery,&quot;data&quot;,i); querySetCell(myquery,&quot;strength&quot;,strengtharray[i]); } cfchart(format = &quot;html&quot;, title = &quot;Report&quot;, scalefrom=&quot;1&quot;, scaleto=&quot;#n#&quot;,chartheight=&quot;400&quot;,chartwidth=&quot;600&quot;, preview=&quot;#preview#&quot;) { cfchartseries(query=&quot;myquery&quot;,type=&quot;line&quot; ,valuecolumn=&quot;points&quot; ,itemcolumn=&quot;data&quot; , zcolumn=&quot;strength&quot;); } </cfscript>

出力

seriesPlacement 属性の使用

<cfchart format=&quot;html&quot; title=&quot;Graph&quot; chartHeight=&quot;400&quot; chartWidth=&quot;600&quot; showLegend=&quot;yes&quot; seriesPlacement=&quot;stacked&quot;> <cfchartseries type=&quot;bar&quot; serieslabel=&quot;WBC&quot; markerstyle=&quot;circle&quot; color=&quot;red&quot;> <cfchartdata item=&quot;Day 1&quot; value=&quot;19.2&quot;/> <cfchartdata item=&quot;Day 2&quot; value=&quot;15.2&quot;/> <cfchartdata item=&quot;Day 3&quot; value=&quot;15.1&quot;/> <cfchartdata item=&quot;Day 4&quot; value=&quot;12.6&quot;/> <cfchartdata item=&quot;Day 5&quot; value=&quot;14.2&quot;/> </cfchartseries> <cfchartseries type=&quot;bar&quot; serieslabel=&quot;HCT&quot; markerstyle=&quot;diamond&quot; color=&quot;blue&quot; > <cfchartdata item=&quot;Day 1&quot; value=&quot;39.2&quot;/> <cfchartdata item=&quot;Day 2&quot; value=&quot;35.2&quot;/> <cfchartdata item=&quot;Day 3&quot; value=&quot;35.1&quot;/> <cfchartdata item=&quot;Day 4&quot; value=&quot;32.6&quot;/> <cfchartdata item=&quot;Day 5&quot; value=&quot;34.2&quot;/> </cfchartseries> </cfchart>

出力

scales 属性の使用

例 1

<cfchart format=&quot;html&quot; chartHeight=&quot;400&quot; chartWidth=&quot;600&quot; showLegend=&quot;no&quot; title=&quot;Two-series Line chart&quot; scales=&quot;x,y&quot;> <cfchartseries type=&quot;line&quot; serieslabel=&quot;WBC&quot; markerstyle=&quot;circle&quot; color=&quot;red&quot; scales=&quot;x2,y2&quot;> <cfchartdata item=&quot;Day 1&quot; value=&quot;19.2&quot;/> <cfchartdata item=&quot;Day 2&quot; value=&quot;15.2&quot;/> <cfchartdata item=&quot;Day 3&quot; value=&quot;15.1&quot;/> <cfchartdata item=&quot;Day 4&quot; value=&quot;12.6&quot;/> <cfchartdata item=&quot;Day 5&quot; value=&quot;14.2&quot;/> </cfchartseries> <cfchartseries type=&quot;line&quot; serieslabel=&quot;HCT&quot; markerstyle=&quot;diamond&quot; color=&quot;blue&quot; > <cfchartdata item=&quot;Day 1&quot; value=&quot;39.2&quot;/> <cfchartdata item=&quot;Day 2&quot; value=&quot;35.2&quot;/> <cfchartdata item=&quot;Day 3&quot; value=&quot;35.1&quot;/> <cfchartdata item=&quot;Day 4&quot; value=&quot;32.6&quot;/> <cfchartdata item=&quot;Day 5&quot; value=&quot;34.2&quot;/> </cfchartseries> </cfchart>

出力

例 2

<cfchart format=&quot;html&quot; chartHeight=&quot;400&quot; chartWidth=&quot;600&quot; showLegend=&quot;no&quot; title=&quot;Two-series Line chart&quot; scales=&quot;x,y&quot;> <cfchartseries type=&quot;line&quot; serieslabel=&quot;WBC&quot; markerstyle=&quot;circle&quot; color=&quot;red&quot;> <cfchartdata item=&quot;Day 1&quot; value=&quot;19.2&quot;/> <cfchartdata item=&quot;Day 2&quot; value=&quot;15.2&quot;/> <cfchartdata item=&quot;Day 3&quot; value=&quot;15.1&quot;/> <cfchartdata item=&quot;Day 4&quot; value=&quot;12.6&quot;/> <cfchartdata item=&quot;Day 5&quot; value=&quot;14.2&quot;/> </cfchartseries> <cfchartseries type=&quot;line&quot; serieslabel=&quot;HCT&quot; markerstyle=&quot;diamond&quot; color=&quot;blue&quot; scales=&quot;x2,y2&quot;> <cfchartdata item=&quot;Day 1&quot; value=&quot;39.2&quot;/> <cfchartdata item=&quot;Day 2&quot; value=&quot;35.2&quot;/> <cfchartdata item=&quot;Day 3&quot; value=&quot;35.1&quot;/> <cfchartdata item=&quot;Day 4&quot; value=&quot;32.6&quot;/> <cfchartdata item=&quot;Day 5&quot; value=&quot;34.2&quot;/> </cfchartseries> </cfchart>

出力

xAxis 属性の使用

<cfscript> n=200; preview={&quot;visible&quot;:true,&quot;live&quot;:true,&quot;preserve-zoom&quot;:true,&quot;border-width&quot;:&quot;0&quot;}; // preview 構造体 xAxis={&quot;label&quot;:{&quot;text&quot;:&quot;Drag the handles to zoom in to the chart&quot;,&quot;color&quot;:&quot;red&quot;},&quot;zooming&quot;:true}; myarray=[]; for (i=1;i<=n;i++){ myarray[i]=randrange(1,n); } strengtharray=[]; for (i=1;i<=n;i++){ strengtharray[i]=randrange(15,25); } myquery=QueryNew(&quot;points,data,strength&quot;,&quot;integer,integer,integer&quot;); for (i=1;i<=arraylen(myarray);i++){ queryAddRow(myquery); querySetCell(myquery,&quot;points&quot;,myarray[i]); querySetCell(myquery,&quot;data&quot;,i); querySetCell(myquery,&quot;strength&quot;,strengtharray[i]); } cfchart(format = &quot;html&quot;, title = &quot;Report&quot;, scalefrom=&quot;1&quot;, scaleto=&quot;#n#&quot;,chartheight=&quot;600&quot;,chartwidth=&quot;800&quot;, preview=&quot;#preview#&quot;,xaxis=&quot;#xaxis#&quot;) { cfchartseries(query=&quot;myquery&quot;,type=&quot;line&quot; ,valuecolumn=&quot;points&quot; ,itemcolumn=&quot;data&quot; , zcolumn=&quot;strength&quot;); } </cfscript>

zoom 属性の使用

<cfscript> n=200; preview={&quot;visible&quot;:true,&quot;live&quot;:true,&quot;preserve-zoom&quot;:true,&quot;border-width&quot;:&quot;0&quot;}; // preview 構造体 xAxis={&quot;label&quot;:{&quot;text&quot;:&quot;Drag the handles to zoom in to the chart&quot;,&quot;color&quot;:&quot;red&quot;},&quot;zooming&quot;:true}; zoom={&quot;alpha&quot;:&quot;0.3&quot;,&quot;border-color&quot;:&quot;black&quot;,&quot;border-width&quot;:4,&quot;background-color&quot;:&quot;gray&quot;,&quot;label&quot;:{&quot;border-color&quot;:&quot;red&quot;,&quot;border-width&quot;:2,&quot;font-size&quot;:10}}; myarray=[]; for (i=1;i<=n;i++){ myarray[i]=randrange(1,n); } strengtharray=[]; for (i=1;i<=n;i++){ strengtharray[i]=randrange(15,25); } myquery=QueryNew(&quot;points,data,strength&quot;,&quot;integer,integer,integer&quot;); for (i=1;i<=arraylen(myarray);i++){ queryAddRow(myquery); querySetCell(myquery,&quot;points&quot;,myarray[i]); querySetCell(myquery,&quot;data&quot;,i); querySetCell(myquery,&quot;strength&quot;,strengtharray[i]); } cfchart(format = &quot;html&quot;, title = &quot;Report&quot;, scalefrom=&quot;1&quot;, scaleto=&quot;#n#&quot;,chartheight=&quot;600&quot;,chartwidth=&quot;800&quot;, preview=&quot;#preview#&quot;,xaxis=&quot;#xaxis#&quot;,zoom=&quot;#zoom#&quot;) { cfchartseries(query=&quot;myquery&quot;,type=&quot;line&quot; ,valuecolumn=&quot;points&quot; ,itemcolumn=&quot;data&quot; , zcolumn=&quot;strength&quot;); } </cfscript>

高さ、幅、パーセントの使用

例 1 - height=600 および width=600

<cfchart type=&quot;bar&quot; title=&quot;Sample two-series Line chart&quot; height=600 width=800 plotarea = &quot;#{&quot;margin&quot;=&quot;dynamic&quot;}#&quot; showlegend=&quot;yes&quot; show3d=&quot;no&quot; format=&quot;html&quot;>
        <cfchartseries serieslabel=&quot;WBC&quot; markerstyle=&quot;circle&quot; color=&quot;red&quot;>
            <cfchartdata item=&quot;Day 1&quot; value=&quot;19.2&quot;/>
            <cfchartdata item=&quot;Day 2&quot; value=&quot;15.2&quot;/>
        </cfchartseries>
        <cfchartseries serieslabel=&quot;HCT&quot; markerstyle=&quot;diamond&quot; color=&quot;blue&quot; >
            <cfchartdata item=&quot;Day 1&quot; value=&quot;39.2&quot;/>
            <cfchartdata item=&quot;Day 2&quot; value=&quot;35.2&quot;/>
        </cfchartseries>
</cfchart>

例 2 - height=50% および width=50%

<cfchart type=&quot;bar&quot; title=&quot;Sample two-series Line chart&quot; height=50% width=50% plotarea = &quot;#{&quot;margin&quot;=&quot;dynamic&quot;}#&quot; showlegend=&quot;yes&quot; show3d=&quot;no&quot; format=&quot;html&quot;>
        <cfchartseries serieslabel=&quot;WBC&quot; markerstyle=&quot;circle&quot; color=&quot;red&quot;>
            <cfchartdata item=&quot;Day 1&quot; value=&quot;19.2&quot;/>
            <cfchartdata item=&quot;Day 2&quot; value=&quot;15.2&quot;/>
        </cfchartseries>
        <cfchartseries serieslabel=&quot;HCT&quot; markerstyle=&quot;diamond&quot; color=&quot;blue&quot; >
            <cfchartdata item=&quot;Day 1&quot; value=&quot;39.2&quot;/>
            <cfchartdata item=&quot;Day 2&quot; value=&quot;35.2&quot;/>
        </cfchartseries>
</cfchart>

例 3 - x=0 y=35%

<cfchart type=&quot;bar&quot; title=&quot;Sample two-series Line chart&quot; x=0 y=35% plotarea = &quot;#{&quot;margin&quot;=&quot;dynamic&quot;}#&quot; showlegend=&quot;yes&quot; show3d=&quot;no&quot; format=&quot;html&quot;>
        <cfchartseries serieslabel=&quot;WBC&quot; markerstyle=&quot;circle&quot; color=&quot;red&quot;>
            <cfchartdata item=&quot;Day 1&quot; value=&quot;19.2&quot;/>
            <cfchartdata item=&quot;Day 2&quot; value=&quot;15.2&quot;/>
        </cfchartseries>
        <cfchartseries serieslabel=&quot;HCT&quot; markerstyle=&quot;diamond&quot; color=&quot;blue&quot; >
            <cfchartdata item=&quot;Day 1&quot; value=&quot;39.2&quot;/>
            <cfchartdata item=&quot;Day 2&quot; value=&quot;35.2&quot;/>
        </cfchartseries>
</cfchart>

bevel 属性の使用

チャートのベベルは、棒グラフや円グラフのスライスなどのチャート要素に適用される 3D のような浮き彫り効果で、視覚的な奥行きを強調します。この効果により、要素がエンボス加工されたような外観になり、より目立つようになります。

ベベルは、次のようなベベルに関連するキーの構造体です。

color：ベベルの色を定義します。
blur-x：x 方向のベベルのエッジの鋭さ／滑らかさを定義します。
blur-y：y 方向のベベルのエッジの鋭さ／滑らかさを定義します。
angle：ベベルの角度を定義します。
distance：# | #px 単位の距離で、ベベルが表示されるオブジェクトからの距離を示します。

<cfquery name=&quot;empQuery&quot; datasource=&quot;cfdocexamples&quot;>
    SELECT * FROM EMPLOYEE ORDER BY SALARY DESC
    FETCH FIRST 10 ROWS ONLY
</cfquery>

<cfscript>
    bevel={
        &quot;blur-x&quot;=5,
        &quot;blur-y&quot;=6,
        &quot;angle&quot;=45,
        &quot;distance&quot;=5
    }
    scaley={&quot;min-value&quot;=&quot;0&quot;,&quot;max-value&quot;=&quot;15000&quot;}
</cfscript>

<cfchart  format=&quot;html&quot; type=&quot;hbar&quot;  query=&quot;empQuery&quot;  height=&quot;600&quot; width=&quot;800&quot; showLegend=&quot;FALSE&quot;  xaxis=&quot;#scaley#&quot; title=&quot;Employee salary&quot; xaxistitle=&quot;Lastname&quot; yaxistitle=&quot;Salary&quot;>
    <cfchartseries  itemcolumn=&quot;LASTNAME&quot; valuecolumn=&quot;SALARY&quot;  bevel=&quot;#bevel#&quot; color=&quot;green&quot;> 
</cfchart>

axis 属性の使用

x 軸と y 軸の属性をカスタマイズして、チャートの読みやすさと表示を向上させます。このカスタマイズは、cfchart タグ内の xAxis 属性と yAxis 属性を使用して実現されます。

xAxis 属性と yAxis 属性は、それぞれの軸の様々なスタイルオプションを定義する JSON 形式の文字列を受け入れます。これらのオプションには、書式設定、ラベル付け、ガイドライン、ズーム機能が含まれます。

<cfscript>
   xAxis={&quot;label&quot;={&quot;text&quot;:&quot;Monthly temperature in Chartville&quot;,&quot;color&quot;=&quot;##3a5551&quot;}}
</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;curve&quot; markersize=&quot;5&quot; xAxis=&quot;#xAxis#&quot;>
   <cfchartseries label=&quot;Temperatures(°C)- Monthly&quot; seriescolor=&quot;white&quot; color=&quot;##3a5551&quot;>
                <cfchartdata item=&quot;Jan&quot; value=&quot;5&quot;>
                <cfchartdata item=&quot;Feb&quot; value=&quot;70&quot;>
                <cfchartdata item=&quot;Mar&quot; value=&quot;10&quot;>
                <cfchartdata item=&quot;Apr&quot; value=&quot;40&quot;>
                <cfchartdata item=&quot;May&quot; value=&quot;18&quot;>
                <cfchartdata item=&quot;Jun&quot; value=&quot;22&quot;>
        </cfchartseries>
    </cfchart>

    <cfchart format = &quot;html&quot; type = &quot;bar&quot; xAxis=&quot;#xAxis#&quot;>
   <cfchartseries  label=&quot;Temperature(°C) - Monthly&quot; seriescolor=&quot;##3a5551&quot;>
            <cfchartdata item=&quot;Jan&quot; value=&quot;5&quot;>
            <cfchartdata item=&quot;Feb&quot; value=&quot;7&quot;>
            <cfchartdata item=&quot;Mar&quot; value=&quot;10&quot;>
            <cfchartdata item=&quot;Apr&quot; value=&quot;14&quot;>
            <cfchartdata item=&quot;May&quot; value=&quot;18&quot;>
            <cfchartdata item=&quot;Jun&quot; value=&quot;22&quot;>
        </cfchartseries>
    </cfchart>
</cfchartset>

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

新規ユーザーの場合