マニュアルキャンセル

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 を使用するチャート作成者またはデベロッパーにとって、マーカーがチャート作成の重要な要素となる理由を次に示します。

マーカーは、チャート上の主要なデータポイントに注目を集めるので、ユーザーはトレンドを識別できます。
マーカーは、2 つ以上のデータソースを使用してチャート上の情報を解釈するのに役立ちます。
マーカーは、異常値や外れ値をハイライト表示できるので、ユーザーはより詳細にインサイトを報告できます。
マーカーは、多くのデータポイントを含むグラフの読みやすさを向上させることができます。

cfchart タグと cfchartseries タグを使用すると、散布図、折れ線グラフ、棒グラフ、面グラフなどにマーカーを追加できます。

注意：

ColdFusion では、面グラフマーカーと折れ線グラフマーカーのみがサポートされます。

カスタマイズオプション

ColdFusion には、次のようなマーカーの広範なカスタマイズオプションが用意されています。

シェイプ：円、正方形、三角形など。
サイズ：マーカーのサイズを調整して、チャート上で目立つようにします。
色：マーカーの色を変更して、よりわかりやすくします。
透明度：0〜1 の値を割り当てて、マーカーの透明度を調整します。
...その他。詳しくは、マーカーのプロパティの節を参照してください。

使用を開始するためのコード例

次に、ColdFusion で折れ線グラフにマーカーを追加する方法の基本的な例を 2 つ示します。

例 1 - 折れ線グラフマーカーの適用

サンプルコード：

Y 軸上の折れ線グラフタイプのマーカーを定義します。
Y 軸の値 80 でマーカーを設定します。
lineColor、lineWidth、lineStyle、alpha の各プロパティを使用して、マーカーの外観を定義します。
白い背景にマーカーのテキストラベルを追加します。
cfchartdata タグで指定されたデータセットを使用します。

<cfscript>
    markers={
        &quot;yaxis&quot; = [
        {
            &quot;type&quot; = &quot;line&quot;, 
            &quot;range&quot; = [80],
            &quot;lineColor&quot;= &quot;red&quot;,
            &quot;lineWidth&quot;= 2,
            &quot;lineStyle&quot;=&quot;solid&quot;,
            &quot;alpha&quot;=&quot;0.8&quot;,
        &quot;label&quot;={
                &quot;text&quot;=&quot;組織によって定義された安全レベル。&quot;,
                &quot;backgroundColor&quot;= &quot;white&quot;,
                &quot;offsetX&quot;=180,
                &quot;offsetY&quot;=-10
            }
        }
        ]
    }
</cfscript>
<cfchart format=&quot;html&quot; type = &quot;line&quot; showMarkers = &quot;true&quot; markers=&quot;#markers#&quot; showLegend=&quot;false&quot; 
            height=&quot;600&quot;
            width=&quot;800&quot; 
            title=&quot;平均大気レベル&quot; >
    <cfchartseries>
        <cfchartdata item = &quot;2013&quot; value = 23>
        <cfchartdata item = &quot;2014&quot; value = 93>
        <cfchartdata item = &quot;2015&quot; value = 34>
        <cfchartdata item = &quot;2016&quot; value = 72>
        <cfchartdata item = &quot;2017&quot; value = 96>
        <cfchartdata item = &quot;2018&quot; value = 33>
        <cfchartdata item = &quot;2019&quot; value = 32>
        <cfchartdata item = &quot;2020&quot; value = 27>
        <cfchartdata item = &quot;2021&quot; value = 38>
        <cfchartdata item = &quot;2022&quot; value = 49>
        <cfchartdata item = &quot;2023&quot; value = 75>
        <cfchartdata item = &quot;2024&quot; value = 74>
    </cfchartseries>
</cfchart>

出力

例 2 - 面グラフマーカーの適用

サンプルコード：

Y 軸上の面グラフタイプのマーカーを定義します。
Y 軸上の 0～20 の値の範囲でマーカーを設定します。
マーカーの透明度を定義します。
白い背景にマーカーのテキストラベルを追加します。
cfchartdata タグで指定されたデータセットを使用します。

<cfscript>
    markers={

        &quot;plot&quot;={
            &quot;type&quot; = &quot;circle&quot;, 
            &quot;borderColor&quot;=&quot;red&quot;,
            &quot;borderWidth&quot;=&quot;2&quot;,
            &quot;size&quot;=7,
            &quot;borderAlpha&quot;=0.7,
            &quot;shadow&quot;=&quot;true&quot;,
            &quot;shadowColor&quot;=&quot;black&quot;,
            &quot;shadowAngle&quot;=240,
            &quot;shadowBlur&quot;=0.7,
            &quot;shadowDistance&quot;=10,
            &quot;shadowAlpha&quot;=1
        },

        &quot;yaxis&quot; = [
        {
            &quot;type&quot;=&quot;area&quot;,
            &quot;range&quot;=[0,20],
            &quot;alpha&quot;=&quot;0.8&quot;,
        &quot;label&quot;={
           &quot;text&quot;=&quot;非アクティブレベル&quot;,
                &quot;backgroundColor&quot;= &quot;white&quot;
            }
        }
        ]
    }
</cfscript>
<cfchart format=&quot;html&quot; type = &quot;area&quot; showMarkers = &quot;true&quot; markers=&quot;#markers#&quot; 
        showLegend=&quot;false&quot; 
        height=&quot;600&quot; 
        width=&quot;800&quot; 
        title=&quot;平均大気レベル&quot; >
    <cfchartseries>
        <cfchartdata item = &quot;2013&quot; value = 23>
        <cfchartdata item = &quot;2014&quot; value = 93>
        <cfchartdata item = &quot;2015&quot; value = 34>
        <cfchartdata item = &quot;2016&quot; value = 72>
        <cfchartdata item = &quot;2017&quot; value = 96>
        <cfchartdata item = &quot;2018&quot; value = 33>
        <cfchartdata item = &quot;2019&quot; value = 32>
        <cfchartdata item = &quot;2020&quot; value = 27>
        <cfchartdata item = &quot;2021&quot; value = 38>
        <cfchartdata item = &quot;2022&quot; value = 49>
        <cfchartdata item = &quot;2023&quot; value = 75>
        <cfchartdata item = &quot;2024&quot; value = 74>
    </cfchartseries>
</cfchart>

出力

例 3

次のスクリプトは、マーカーを使用して yAxis、scaleR、およびその他のプロパティを設定します。

<cfscript>
    markers={   
    &quot;plot&quot; =
    {
        &quot;type&quot; = &quot;triangle&quot;, 
        &quot;borderColor&quot;=&quot;red&quot;,
        &quot;borderWidth&quot;=&quot;4&quot;,
        &quot;size&quot;=7,
        &quot;borderAlpha&quot;=0.7
    },
    &quot;yaxis&quot; = [
        {&quot;type&quot; = &quot;line&quot;, 
        &quot;range&quot; = [30],
        &quot;lineColor&quot;= &quot;red&quot;,
        &quot;lineWidth&quot;= 2,
        &quot;lineStyle&quot;=&quot;solid&quot;,
        &quot;alpha&quot;=&quot;0.8&quot;,
   &quot;label&quot;= {
     &quot;text&quot;= &quot;棒グラフのマーカーのテストラベル&quot;}},
          {
            &quot;type&quot; = &quot;area&quot;, 
            &quot;range&quot; = [20, 60],
            &quot;valueRange&quot;= &quot;true&quot;,
            &quot;backgroundColor&quot;= &quot;red&quot;} 
        ],
          
        &quot;scaleR&quot; =  [
            {
                &quot;type&quot;: &quot;area&quot;,
                &quot;range&quot;: [30, 40],
                &quot;alpha&quot;: 0.5,
                &quot;backgroundColor&quot;: &quot;##ff4d4d&quot;,
                &quot;borderColor&quot;: &quot;black&quot;,
                &quot;borderWidth&quot;: 7,
                &quot;offsetEnd&quot;: 1,
                &quot;offsetStart&quot;: 0  
            },
            {
                &quot;type&quot; = &quot;line&quot;, 
                &quot;range&quot; = [30,40],
                &quot;lineColor&quot;= &quot;red&quot;,
                &quot;lineWidth&quot;= 5,
                &quot;lineStyle&quot;=&quot;dashdot&quot;,
                &quot;alpha&quot;=&quot;0.8&quot;,
            &quot;label&quot;= {
               &quot;text&quot;= &quot;マーカー構造体のマーカーのテストラベル&quot;
                }
            }
        ]}
        scaleR=
            {&quot;markers&quot;= [
                {
                    &quot;type&quot;: &quot;area&quot;,
                    &quot;range&quot;: [20, 30],
                    &quot;alpha&quot;: 1,
                    &quot;backgroundColor&quot;: &quot;##ff4d4d&quot;,
                    &quot;borderColor&quot;: &quot;black&quot;,
                    &quot;borderWidth&quot;: 3,
                    &quot;offsetEnd&quot;: 0.6,
                    &quot;offsetStart&quot;: 0.8  
                },
                {
                    &quot;type&quot; = &quot;line&quot;, 
                    &quot;range&quot; = [30],
                    &quot;lineColor&quot;= &quot;red&quot;,
                    &quot;lineWidth&quot;= 2,
                    &quot;lineStyle&quot;=&quot;solid&quot;,
                    &quot;alpha&quot;=&quot;0.8&quot;,
                &quot;label&quot;= {
                   &quot;text&quot;= &quot;scaleR のマーカーのラベルを個別にテスト&quot;
                    }
                }
            ]
}    
</cfscript>
<cfchartset  format=&quot;html&quot; layout=&quot;2x3&quot; height=&quot;800&quot; width=&quot;1400&quot;>
<cfchart type = &quot;bar&quot; showMarkers = &quot;true&quot; markers=&quot;#markers#&quot;  >
    <cfchartseries >
        <cfchartdata item = &quot;2015&quot; value = 20>
        <cfchartdata item = &quot;2016&quot; value = 40>
        <cfchartdata item = &quot;2017&quot; value = 60>
        <cfchartdata item = &quot;2018&quot; value = 80>
    </cfchartseries>
</cfchart>
<cfchart type = &quot;gauge&quot; scaleR=&quot;#scaleR#&quot;>
    <cfchartseries >
        <cfchartdata item = &quot;2015&quot; value = 20>
        <cfchartdata item = &quot;2016&quot; value = 40>
        <cfchartdata item = &quot;2017&quot; value = 60>
        <cfchartdata item = &quot;2018&quot; value = 80>
    </cfchartseries>
</cfchart>
<cfchart type = &quot;gauge&quot;  markers=&quot;#markers#&quot;>
    <cfchartseries >
        <cfchartdata item = &quot;2015&quot; value = 20>
        <cfchartdata item = &quot;2016&quot; value = 40>
        <cfchartdata item = &quot;2017&quot; value = 60>
        <cfchartdata item = &quot;2018&quot; value = 80>
    </cfchartseries>
</cfchart>
<cfchart type=&quot;line&quot; markers=&quot;#markers#&quot; showMarkers =&quot;true&quot;>
     <cfchartseries>
        <cfchartdata item = &quot;2015&quot; value = 20>
        <cfchartdata item = &quot;2016&quot; value = 40>
        <cfchartdata item = &quot;2017&quot; value = 60>
        <cfchartdata item = &quot;2018&quot; value = 80>
    </cfchartseries>
</cfchart>
</cfchartset>

出力

マーカーのプロパティ

異なる図形（円、正方形、ひし形など）、サイズ、カラー、境界線を持つマーカーをカスタマイズします。また、ラベル、ツールチップ、またはアニメーションを表示して、追加のコンテキストを提供することもできます。

スタイル設定オプション	属性	指定できる値
Common	type	線、面積
	範囲	索引または値
	alpha	0 to 1
	label
	valueRange	true／false
	backgroundColor/background-color
	backgroundColor1/background-color-1
	backgroundColor2/background-color-2
	border	format:- [top right bottom left]
	borderAlpha/border-alpha	0 to 1
	borderColor/border-color	カラー名またはコード
	borderRadius	default-0,possible-negative and positive
	borderRadiusBottomLeft	default-0,possible-negative and positive
	borderRadiusBottomRight	default-0,possible-negative and positive
	borderRadiusTopLeft	default-0,possible-negative and positive
	borderRadiusTopRight	default-0,possible-negative and positive
	borderWidth/border-width	default-0
	fillAngle	default-90
	fillOffsetX	default-0
	fillOffsetY	default-0
	fillType	default-linear, possible linear,none,radial
	gradientColors
	gradientStops
	placement	top,bottom, default-bottom
	shadow	Default Value: false
	shadowAlpha	Default Value: 0.75
	shadowAngle	Default Value: 45
	shadowBlur	Default Value: 0
	shadowColor	Default Value: '#999'
	shadowDistance	Default Value: 2
label	labelAlignment/label-alignment	normal/opposite/auto
	labelPlacement/label-placement	normal／opposite
	labelTolerance/label-tolerance
	textAlign/text-align	中心、下、中央、右
	textAlpha/text-alpha	0 to 1
	overlap	true／false
	text	任意の文字列
	padding	例：- [10,4,20,30] - 上、右、下、左にそれぞれ
	paddingLeft/padding-left	default-value : 2 、設定可能な値：- 数値
	paddingRight/padding-right	default-value : 2 、設定可能な値：- 数値
	textDecoration/text-decoration
	underline
	url
	bold	true／false
	verticalAlign/vertical-align	top,middle.bottom
	visible	true／false
	rtl	true／false
	fontColor/font-color
	fontFamily/font-family
	fontSize/font-size
	fontSize/font-size
line marker specific	lineColor/line-color
	lineGapSize/line-gap-size(works with this lineSegmentSize line-segment-size)
	lineStyle/line-style	dashdot, dashed, dotted, solid
	lineWidth/line-width
	offsetX/offset-x
	offsetY/offset-y
	offsetEnd
	offsetStart
area markers specific	type
	範囲
	alpha
	label
	valueRange
	backgroundColor/background-color
	backgroundColor1/background-color-1
	backgroundColor2/background-color-2
	border
	borderAlpha/border-alpha
	borderColor/border-color
	borderWidth/border-width
	fillAngle
	fillOffsetX
	fillOffsetY
	fillType
	gradientColors
	gradientStops
	placement

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

新規ユーザーの場合

ColdFusion のチャートのマーカー

カスタマイズオプション

使用を開始するためのコード例

マーカーのプロパティ

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

このページを共有

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

サポート