マニュアルキャンセル

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

ボックスプロット（ボックスアンドウィスカープロット）では、主要な統計指標を要約するデータセットの分布を視覚化できます。ボックスプロットは、データポイントの分布を視覚化し、潜在的な異常値を識別することで、探索的なデータ分析を可能にします。

ボックスプロットのパーツ：

ボックス：Q1（第 1 四分位数）から Q3（第3四分位数）までの間のデータの中間 50% を表す四分位範囲（IQR）です。
- Q1（25 パーセンタイル）：ボックスの下端です。
- Q3（75 パーセンタイル）：ボックスの上端です。
中央値：データセットの 50 パーセンタイルを示す行です。
ウィスカー：Q1 と Q3 から IQR の 1.5 倍の範囲内の最小値と最大値まで、ボックスから延びる線です。この範囲外の値は異常値です。

開発者はボックスプロットを使用して、データ分布の視覚化、異常値の検出、分布の比較、データの要約を行えます。ボックスプロットは実際のシナリオで、パフォーマンスのベンチマーキングや環境全体の実行時間の視覚化に役立ちます。その際に、極端な値を示す異常値が発生する場合があります。

（ColdFusion の場合）

ColdFusion を使用すると、複数の方法でボックスプロットを作成および使用できます。そのためには、cfchart タグでチャートのタイプとしてボックスプロットを使用します。cfchart タグと共に cfchartseries タグを使用して、データを指定します。また、複数のボックスプロットをグリッドのように配置する場合は、cfchartseries タグを使用します。

cfchart

cfchart タグにタイプとしてボックスプロットを追加します。例えば、

ColdFusion では、ボックスプロットにスタイルオプションも追加されます。オプションの構造体を使用すると、ボックスプロットのボックスや異常値のほか、最小、中間、最大の各線のスタイルを定義できます。

オプション

属性	説明
ボックス	ボックスプロット内のボックスのスタイルを定義します。ボックスプロットの幅と背景色を設定できます。
line-min-level	ボックスプロットの最小値での線のスタイルを定義します。
line-median-level	ボックスプロットの中央値での線のスタイルを定義します。
line-max-level	ボックスプロットの最大値での線のスタイルを定義します。
line-min-connector	ボックスプロットと最小値の線を結ぶウィスカーのスタイルを定義します。
line-max-connector	ボックスプロットと最大値の線を結ぶウィスカーのスタイルを定義します。
異常値	マーカーを使用して異常値のスタイルを定義します。

ボックスプロットのデータを定義する

ボックスプロットのデータは、キーと値のペアとして使用できます。

以下を含むオブジェクト（boxStructなど）を作成します。

key	X 軸または Y 軸のボックスプロット系列の名前。次に例を示します。 boxplotStruct={ "key"="Experiment one results", "data"= [24, 30, 35, 38, 45, 45, 46, 48, 49, 51, 52, 53, 56, 57, 59, 60, 62, 70] }
data	データ配列には、ボックスプロットにプロットされるデータポイントが含まれます。次に例を示します。 boxplotStruct={ "key"="Experiment one results", "data"= [24, 30, 35, 38, 45, 45, 46, 48, 49, 51, 52, 53, 56, 57, 59, 60, 62, 70] }
dataBox	dataBox 配列には、データセットの最小値、第 1 四分位数、中央値、第 3四分位数、最大値の 5 つの値が含まれます。dataBox 配列の長さは 5 でなければなりません。次に例を示します。 boxplotStruct={ "key"="Experiment three results", "dataBox"=[35, 50, 45, 40, 55], // [min, q1, median, q3, max] }
dataOutlier	dataOutlier 配列には、ボックスプロットの異常値が含まれます。配列には、複数の異常値を含めることができます。次に例を示します。 boxplotStruct={ "key"="Experiment three results", "dataBox"=[35, 50, 45, 40, 55], // [min, q1, median, q3, max] "dataOutlier"=[25,60] // outlier array }

例

いくつかの例を参考にして、ボックスプロットについて理解しましょう。まず基本的なボックスプロットを作成し、徐々に包括的なボックスプロットを作成していきます。

例 1- 必要最小限のすぐに使えるボックスプロット。

<cfscript>
    data = [24, 30, 35, 38, 45, 45, 46, 48, 49, 51, 52, 53, 56, 57, 59, 60, 62, 70]    
</cfscript>
<cfchart type=&quot;boxplot&quot; format=&quot;html&quot; title=&quot;First boxplot&quot; width=&quot;600&quot;  height=&quot;400&quot;>
<cfchartseries data=&quot;#data#&quot;>
</cfchart>

出力

例 2 - 例 1 + 系列ラベルの出力

<cfscript>
    ex={
        &quot;key&quot;=&quot;Experiment results&quot;,
        &quot;data&quot;= [24, 30, 35, 38, 45, 45, 46, 48, 49, 51, 52, 53, 56, 57, 59, 60, 62, 70]    
    }
</cfscript>
<cfchart type=&quot;boxplot&quot; format=&quot;html&quot; title=&quot;Second boxplot&quot; width=&quot;600&quot;  height=&quot;400&quot;>
    <cfchartseries data=&quot;#ex#&quot;>
</cfchart>

出力

例 3 - 例 2 + 2 番目のボックスプロットの出力

<cfscript>
    ex1={
        &quot;key&quot;=&quot;Experiment one results&quot;,
        &quot;data&quot;= [24, 30, 35, 38, 45, 45, 46, 48, 49, 51, 52, 53, 56, 57, 59, 60, 62, 70]    
    }
    ex2={
        &quot;key&quot;=&quot;Experiment two results&quot;,
        &quot;data&quot;= [45, 25, 29, 50, 40, 56, 32, 32, 46, 65, 66, 24, 31, 29, 23, 30, 65, 56]    
    }
</cfscript>
<cfchart type=&quot;boxplot&quot; format=&quot;html&quot; title=&quot;Third boxplot&quot; width=&quot;600&quot;  height=&quot;400&quot;>
    <cfchartseries data=&quot;#ex1#&quot;>
    <cfchartseries data=&quot;#ex2#&quot;>
</cfchart>

出力

例 4-例 3 + dataBox 配列の出力

<cfscript>
    ex1={
        &quot;key&quot;=&quot;Experiment one results&quot;,
        &quot;data&quot;= [24, 30, 35, 38, 45, 45, 46, 48, 49, 51, 52, 53, 56, 57, 59, 60, 62, 70]    
    }
    ex2={
        &quot;key&quot;=&quot;Experiment two results&quot;,
        &quot;data&quot;= [45, 25, 29, 50, 40, 56, 32, 32, 46, 65, 66, 24, 31, 29, 23, 30, 65, 56]    
    }
    ex3={
        &quot;key&quot;=&quot;Experiment three results&quot;,
        &quot;dataBox&quot;=[35, 50, 45, 40, 55]
    }
</cfscript>
<cfchart type=&quot;boxplot&quot; format=&quot;html&quot; title=&quot;Fourth boxplot&quot; width=&quot;600&quot;  height=&quot;400&quot;>
    <cfchartseries data=&quot;#ex1#&quot;>
    <cfchartseries data=&quot;#ex2#&quot;>
    <cfchartseries data=&quot;#ex3#&quot;>
</cfchart>

出力

例 5 - 例 4 + dataOutlier 配列の出力

<cfscript>
    ex1={
        &quot;key&quot;=&quot;Experiment one results&quot;,
        &quot;data&quot;= [24, 30, 35, 38, 45, 45, 46, 48, 49, 51, 52, 53, 56, 57, 59, 60, 62, 70]    
    }
    ex2={
        &quot;key&quot;=&quot;Experiment two results&quot;,
        &quot;data&quot;= [45, 25, 29, 50, 40, 56, 32, 32, 46, 65, 66, 24, 31, 29, 23, 30, 65, 56]    
    }
    ex3={
        &quot;key&quot;=&quot;Experiment three results&quot;,
        &quot;dataBox&quot;=[35, 50, 45, 40, 55], // [min, q1, median, q3, max]
        &quot;dataOutlier&quot;=[25,60] // outlier array
    }
</cfscript>
<cfchart type=&quot;boxplot&quot; format=&quot;html&quot; title=&quot;Fifth boxplot&quot; width=&quot;600&quot;  height=&quot;400&quot;>
    <cfchartseries data=&quot;#ex1#&quot;>
    <cfchartseries data=&quot;#ex2#&quot;>
    <cfchartseries data=&quot;#ex3#&quot;>
</cfchart>

出力

例 6 - 例 5 + ボックスプロット幅スタイルの出力

<cfscript>
    ex1={
        &quot;key&quot;=&quot;Experiment one results&quot;,
     &quot;data&quot;= [24, 30, 35, 38, 45, 45, 46, 48, 49, 51, 52, 53, 56, 57, 59, 60, 62, 70]  
    }
    ex2={
        &quot;key&quot;=&quot;Experiment two results&quot;,
        &quot;data&quot;= [45, 25, 29, 50, 40, 56, 32, 32, 46, 65, 66, 24, 31, 29, 23, 30, 65, 56]    
    }
    ex3={
        &quot;key&quot;=&quot;Experiment three results&quot;,
        &quot;dataBox&quot;=[35, 50, 45, 40, 55], // [min, q1, median, q3, max]
        &quot;dataOutlier&quot;=[25,60] // outlier array
    }
    //boxplot styling options
    options={
        &quot;box&quot;={
            &quot;bar-width&quot;:0.9,
            &quot;background-color&quot;: &quot;green&quot;
        }
    }
</cfscript>
<cfchart type=&quot;boxplot&quot; format=&quot;html&quot; title=&quot;Sefth boxplot&quot; width=&quot;600&quot;  height=&quot;400&quot; options=&quot;#options#&quot;>
    <cfchartseries data=&quot;#ex1#&quot;>
    <cfchartseries data=&quot;#ex2#&quot;>
    <cfchartseries data=&quot;#ex3#&quot;>
</cfchart>

出力

例 7 - 例 6+minの出力、中央値、および最大線の色スタイル

<cfscript>
    ex1={
        &quot;key&quot;=&quot;Experiment one results&quot;,
        &quot;data&quot;= [24, 30, 35, 38, 45, 45, 46, 48, 49, 51, 52, 53, 56, 57, 59, 60, 62, 70]    
    }
    ex2={
        &quot;key&quot;=&quot;Experiment two results&quot;,
        &quot;data&quot;= [45, 25, 29, 50, 40, 56, 32, 32, 46, 65, 66, 24, 31, 29, 23, 30, 65, 56]    
    }
    ex3={
        &quot;key&quot;=&quot;Experiment three results&quot;,
        &quot;dataBox&quot;=[35, 50, 45, 40, 55], // [min, q1, median, q3, max]
        &quot;dataOutlier&quot;=[25,60] // outlier array
    }
    //boxplot styling options
    options={
        &quot;box&quot;={
            &quot;bar-width&quot;:0.9,
            &quot;background-color&quot;: &quot;green&quot;
        },
        &quot;line-min-level&quot;: {
            &quot;line-color&quot;: &quot;red&quot;,
            &quot;line-width&quot;:2
        },
        &quot;line-median-level&quot;: {
            &quot;line-color&quot;: &quot;blue&quot;,
            &quot;line-width&quot;:2
        },
        &quot;line-max-level&quot;: {
            &quot;line-color&quot;: &quot;black&quot;,
            &quot;line-width&quot;:2
        }
    }
</cfscript>
<cfchart type=&quot;boxplot&quot; format=&quot;html&quot; title=&quot;Sefth boxplot&quot; width=&quot;600&quot; height=&quot;400&quot; options=&quot;#options#&quot;>
    <cfchartseries data=&quot;#ex1#&quot;>
    <cfchartseries data=&quot;#ex2#&quot;>
    <cfchartseries data=&quot;#ex3#&quot;>
</cfchart>

出力

例 8 - 例 7 + コネクタースタイルの出力

<cfscript>
    ex1={
        &quot;key&quot;=&quot;Experiment one results&quot;,
        &quot;data&quot;= [24, 30, 35, 38, 45, 45, 46, 48, 49, 51, 52, 53, 56, 57, 59, 60, 62, 70]    
    }
    ex2={
        &quot;key&quot;=&quot;Experiment two results&quot;,
        &quot;data&quot;= [45, 25, 29, 50, 40, 56, 32, 32, 46, 65, 66, 24, 31, 29, 23, 30, 65, 56]    
    }
    ex3={
        &quot;key&quot;=&quot;Experiment three results&quot;,
        &quot;dataBox&quot;=[35, 50, 45, 40, 55], // [min, q1, median, q3, max]
        &quot;dataOutlier&quot;=[25,60] // outlier array
    }
    //ボックスプロットのスタイル設定のオプション
    options={
        &quot;box&quot;={
            &quot;bar-width&quot;:0.9,
            &quot;background-color&quot;: &quot;green&quot;
        },
        &quot;line-min-level&quot;: {
            &quot;line-color&quot;: &quot;red&quot;,
            &quot;line-width&quot;:2
        },
        &quot;line-median-level&quot;: {
            &quot;line-color&quot;: &quot;blue&quot;,
            &quot;line-width&quot;:2
        },
        &quot;line-max-level&quot;: {
            &quot;line-color&quot;: &quot;black&quot;,
            &quot;line-width&quot;:2
        },
        'line-min-connector': {
            'line-width':2,
            'line-color': &quot;##f00&quot;
        },
        'line-max-connector': {
            'line-color': &quot;black&quot;,
            'line-width':4
        }
    }
</cfscript>
<cfchart type=&quot;boxplot&quot; format=&quot;html&quot; title=&quot;Eight boxplot&quot; width=&quot;600&quot; height=&quot;400&quot; options=&quot;#options#&quot;>
    <cfchartseries data=&quot;#ex1#&quot;>
    <cfchartseries data=&quot;#ex2#&quot;>
    <cfchartseries data=&quot;#ex3#&quot;>
</cfchart>

出力

例 9 – 例 8の出力と異常値マーカーのスタイル設定

<cfscript>
    ex1={
        &quot;key&quot;=&quot;Experiment one results&quot;,
        &quot;data&quot;= [24, 30, 35, 38, 45, 45, 46, 48, 49, 51, 52, 53, 56, 57, 59, 60, 62, 70]    
    }
    ex2={
        &quot;key&quot;=&quot;Experiment two results&quot;,
        &quot;data&quot;= [45, 25, 29, 50, 40, 56, 32, 32, 46, 65, 66, 24, 31, 29, 23, 30, 65, 56]    
    }
    ex3={
        &quot;key&quot;=&quot;Experiment three results&quot;,
        &quot;dataBox&quot;=[35, 50, 45, 40, 55], // [min, q1, median, q3, max]
        &quot;dataOutlier&quot;=[25,60] // outlier array
    }
    //ボックスプロットのスタイル設定のオプション
    options={
        &quot;box&quot;={
            &quot;bar-width&quot;:0.9,
            &quot;background-color&quot;: &quot;green&quot;
        },
        &quot;line-min-level&quot;: {
            &quot;line-color&quot;: &quot;red&quot;,
            &quot;line-width&quot;:2
        },
        &quot;line-median-level&quot;: {
            &quot;line-color&quot;: &quot;blue&quot;,
            &quot;line-width&quot;:2
        },
        &quot;line-max-level&quot;: {
            &quot;line-color&quot;: &quot;black&quot;,
            &quot;line-width&quot;:2
        },
        'line-min-connector': {
            'line-width':2,
            'line-color': &quot;##f00&quot;
        },
        'line-max-connector': {
            'line-color': &quot;black&quot;,
            'line-width':4
        },
        &quot;outlier&quot;:{
            &quot;marker&quot;:{
                &quot;type&quot;=&quot;circle&quot;,
                &quot;background-color&quot;: &quot;##ff0&quot;
            }
        }
    }
</cfscript>
<cfchart type=&quot;boxplot&quot; format=&quot;html&quot; title=&quot;9番目のboxplot&quot; width=&quot;600&quot; height=&quot;400&quot; options=&quot;#options#&quot;>
    <cfchartseries data=&quot;#ex1#&quot;>
    <cfchartseries data=&quot;#ex2#&quot;>
    <cfchartseries data=&quot;#ex3#&quot;>
</cfchart>

出力

例 10 – 水平ボックスプロット

cfchartでタイプとしてhboxplotを指定します。

<cfscript>
    ex1={
        &quot;key&quot;=&quot;Experiment one results&quot;,
        &quot;data&quot;= [24, 30, 35, 38, 45, 45, 46, 48, 49, 51, 52, 53, 56, 57, 59, 60, 62, 70]    
    }
    ex2={
        &quot;key&quot;=&quot;Experiment two results&quot;,
        &quot;data&quot;= [45, 25, 29, 50, 40, 56, 32, 32, 46, 65, 66, 24, 31, 29, 23, 30, 65, 56]    
    }
    ex3={
        &quot;key&quot;=&quot;Experiment three results&quot;,
        &quot;dataBox&quot;=[35, 50, 45, 40, 55], // [min, q1, median, q3, max]
        &quot;dataOutlier&quot;=[25,60] // outlier array
    }
    //ボックスプロットのスタイル設定のオプション
    options={
        &quot;box&quot;={
            &quot;bar-width&quot;:0.9,
            &quot;background-color&quot;: &quot;green&quot;
        },
        &quot;line-min-level&quot;: {
            &quot;line-color&quot;: &quot;red&quot;,
            &quot;line-width&quot;:2
        },
        &quot;line-median-level&quot;: {
            &quot;line-color&quot;: &quot;blue&quot;,
            &quot;line-width&quot;:2
        },
        &quot;line-max-level&quot;: {
            &quot;line-color&quot;: &quot;black&quot;,
            &quot;line-width&quot;:2
        },
        'line-min-connector': {
            'line-width':2,
            'line-color': &quot;##f00&quot;
        },
        'line-max-connector': {
            'line-color': &quot;black&quot;,
            'line-width':4
        },
        &quot;outlier&quot;:{
            &quot;marker&quot;:{
                &quot;type&quot;=&quot;circle&quot;,
                &quot;background-color&quot;: &quot;##ff0&quot;
            }
        }
    }
</cfscript>
<cfchart type=&quot;hboxplot&quot; format=&quot;html&quot; title=&quot;第十回のboxplot (horizontal)&quot; width=&quot;600&quot; height=&quot;400&quot; options=&quot;#options#&quot;>
    <cfchartseries data=&quot;#ex1#&quot;>
    <cfchartseries data=&quot;#ex2#&quot;>
    <cfchartseries data=&quot;#ex3#&quot;>
</cfchart>

出力

例 11- クエリからのボックスプロット

<cfquery name=&quot;artQuery&quot; datasource=&quot;cfartgallery&quot;> 
    SELECT * FROM ART 
    PRICE>50000 
</cfquery> 

<!— <cfdump var=&quot;#artQuery#&quot; > —> 
<cfchart format=&quot;html&quot; type=&quot;boxplot&quot; width=&quot;600&quot; height=&quot;400&quot; title=&quot;Boxplot from query&quot; xaxistitle=&quot;Price&quot;> 
    <cfchartseries query=&quot;artQuery&quot; valuecolumn=&quot;PRICE&quot;> 
</cfchart>

出力

例 12 - cfchartsetを使用して複数のボクプロットをレイアウトする

<cfscript>
    //データを定義
   ex1={
        &quot;key&quot;=&quot;Experiment one results&quot;,
        &quot;data&quot;= [24, 30, 35, 38, 45, 45, 46, 48, 49, 51, 52, 53, 56, 57, 59, 60, 62, 70]    
    }
    ex2={
        &quot;key&quot;=&quot;Experiment two results&quot;,
        &quot;data&quot;= [45, 25, 29, 50, 40, 56, 32, 32, 46, 65, 66, 24, 31, 29, 23, 30, 65, 56]    
    }
    ex3={
        &quot;key&quot;=&quot;Experiment three results&quot;,
        &quot;dataBox&quot;=[35, 50, 45, 40, 55], // [min, q1, median, q3, max]
        &quot;dataOutlier&quot;=[25,60] // outlier array
    }
    ex4={
        &quot;key&quot;=&quot;Experiment four results&quot;,
        &quot;dataBox&quot;=[65, 66, 24, 31, 29], // [min, q1, median, q3, max]
        &quot;dataOutlier&quot;=[15,80,100] // outlier array
    }
    //ボックスプロットのスタイル設定のオプション
    options={
        &quot;box&quot;={
            &quot;bar-width&quot;:0.9,
            &quot;background-color&quot;: &quot;green&quot;
        },
        &quot;line-min-level&quot;: {
            &quot;line-color&quot;: &quot;red&quot;,
            &quot;line-width&quot;:2
        },
        &quot;line-median-level&quot;: {
            &quot;line-color&quot;: &quot;blue&quot;,
            &quot;line-width&quot;:2
        },
        &quot;line-max-level&quot;: {
            &quot;line-color&quot;: &quot;black&quot;,
            &quot;line-width&quot;:2
        },
        'line-min-connector': {
            'line-width':2,
            'line-color': &quot;##f00&quot;
        },
        'line-max-connector': {
            'line-color': &quot;black&quot;,
            'line-width':4
        },
        &quot;outlier&quot;:{
            &quot;marker&quot;:{
                &quot;type&quot;=&quot;circle&quot;,
                &quot;background-color&quot;: &quot;##ff0&quot;
            }
        }
    }
</cfscript>
<cfchartset layout=&quot;2x2&quot; width=&quot;800&quot; height=&quot;600&quot; format=&quot;html&quot;>
    <cfchart options=&quot;#options#&quot; title=&quot;Boxplot 1&quot;>
        <cfchartseries type=&quot;boxplot&quot; data = &quot;#ex1#&quot;>
    </cfchart>
    <cfchart options=&quot;#options#&quot; title=&quot;Boxplot 2&quot;>
        <cfchartseries type=&quot;boxplot&quot; data = &quot;#ex2#&quot;>
    </cfchart>
    <cfchart options=&quot;#options#&quot; title=&quot;Boxplot 3&quot;>
        <cfchartseries type=&quot;boxplot&quot; data = &quot;#ex3#&quot;>
    </cfchart>
    <cfchart options=&quot;#options#&quot; title=&quot;Boxplot 4&quot;>
        <cfchartseries type=&quot;boxplot&quot; data = &quot;#ex4#&quot;>
    </cfchart>
</cfchartset>

出力

Boxplotのプロパティ

ボックスプロットの属性	オプション

outlier	marker	type
		backgroundColor
		bottomState	backgroundColor
			offsetX
			offsetY
		topState	backgroundColor: 'red', offsetX: 10, offsetY: 10
		hoverMarker	backgroundColor
	tooltip	text
		backgroundColor: '#f90', borderColor: '#f60', borderRadius: -5, borderWidth: 2, callout: true, calloutHeight: 20, calloutPosition: 'bottom', calloutWidth: 0, padding: 10, shadow: true
		callOut	type: 'circle',
			backgroundColor: '#fff',
			borderWidth: 2,
			borderColor: '#f60',
			size: 5,
			offsetY: 0

		mediaRules	maxWidth: 400, backgroundColor: 'red'
		rules	rule,backgroundColor
		topState	backgroundColor: 'red', offsetX: 10, offsetY: 10
	hoverMarker	backgroundColor
	rules	rule
		backgroundColor

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

新規ユーザーの場合

ColdFusion でボックスプロットを作成する

（ColdFusion の場合）

例

Boxplotのプロパティ

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

このページを共有

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

サポート