ColdFusion でのドーナツグラフの作成

scaleR アトリビュート

ColdFusion では、scaleR アトリビュートを使用してドーナツグラフのスケールを設定します。 scaleR アトリビュートの aperture プロパティと refAngle プロパティは、次のように動作します。

aperture：このプロパティは、スケールが占める度合いを設定します。これを変更するには、scaleR オブジェクトに aperture アトリビュートを追加します。例えば、aperture 値が 180 の場合、半円が作成されます。aperture 値が 360 の場合、完全な円グラフが作成されます。
refAngle：このプロパティは、グラフの回転角度を設定します。refAngle を 45 度、aperture を 180 にすると、半円のドーナツグラフが 45 度回転します。

例 1

この例では、スクリプトで refAngle を 0、aperture を 360 に設定しています。

scaleR={"refAngle":0,"aperture":360}

</cfscript>

</cfchartseries>

</cfchart>

<cfscript> scaleR={"refAngle":0,"aperture":360} </cfscript> <cfchart format="html" chartWidth="800" chartHeight="400" scaleR="#scaleR#" showLegend=FALSE title="Web サイトトラフィック"> <cfchartseries type="ring" serieslabel="2024"> <cfchartdata item="1 月" value="6000"> <cfchartdata item="2 月" value="3456"> <cfchartdata item="3 月" value="446"> <cfchartdata item="4 月" value="7887"> <cfchartdata item="5 月" value="4356"> <cfchartdata item="6 月" value="789"> </cfchartseries> </cfchart>

<cfscript>
    scaleR={&quot;refAngle&quot;:0,&quot;aperture&quot;:360}
</cfscript>
<cfchart format=&quot;html&quot; chartWidth=&quot;800&quot; chartHeight=&quot;400&quot; scaleR=&quot;#scaleR#&quot; showLegend=FALSE title=&quot;Web サイトトラフィック&quot;>
    <cfchartseries type=&quot;ring&quot; serieslabel=&quot;2024&quot;>
        <cfchartdata item=&quot;1 月&quot; value=&quot;6000&quot;>
        <cfchartdata item=&quot;2 月&quot; value=&quot;3456&quot;>
        <cfchartdata item=&quot;3 月&quot; value=&quot;446&quot;>
        <cfchartdata item=&quot;4 月&quot; value=&quot;7887&quot;>
        <cfchartdata item=&quot;5 月&quot; value=&quot;4356&quot;>
        <cfchartdata item=&quot;6 月&quot; value=&quot;789&quot;>
    </cfchartseries>
</cfchart>

出力

例 2

この例では、スクリプトで refAngle を 180、aperture を 180 に設定しています。

scaleR={"refAngle":180,"aperture":180}

</cfscript>

</cfchartseries>

</cfchart>

<cfscript> scaleR={"refAngle":180,"aperture":180} </cfscript> <cfchart format="html" chartWidth="800" chartHeight="400" scaleR="#scaleR#" showLegend=FALSE title="Web サイトトラフィック"> <cfchartseries type="ring" serieslabel="2024"> <cfchartdata item="1 月" value="6000"> <cfchartdata item="2 月" value="3456"> <cfchartdata item="3 月" value="446"> <cfchartdata item="4 月" value="7887"> <cfchartdata item="5 月" value="4356"> <cfchartdata item="6 月" value="789"> </cfchartseries> </cfchart>

<cfscript>
    scaleR={&quot;refAngle&quot;:180,&quot;aperture&quot;:180}
</cfscript>
<cfchart format=&quot;html&quot; chartWidth=&quot;800&quot; chartHeight=&quot;400&quot; scaleR=&quot;#scaleR#&quot; showLegend=FALSE title=&quot;Web サイトトラフィック&quot;>
    <cfchartseries type=&quot;ring&quot; serieslabel=&quot;2024&quot;>
        <cfchartdata item=&quot;1 月&quot; value=&quot;6000&quot;>
        <cfchartdata item=&quot;2 月&quot; value=&quot;3456&quot;>
        <cfchartdata item=&quot;3 月&quot; value=&quot;446&quot;>
        <cfchartdata item=&quot;4 月&quot; value=&quot;7887&quot;>
        <cfchartdata item=&quot;5 月&quot; value=&quot;4356&quot;>
        <cfchartdata item=&quot;6 月&quot; value=&quot;789&quot;>
    </cfchartseries>
</cfchart>

出力

例 3

この例では、スクリプトで refAngle を 180、aperture を 360 に設定しています。

scaleR={"refAngle":180,"aperture":360}

</cfscript>

</cfchartseries>

</cfchart>

<cfscript> scaleR={"refAngle":180,"aperture":360} </cfscript> <cfchart format="html" chartWidth="800" chartHeight="400" scaleR="#scaleR#" showLegend=FALSE title="Web サイトトラフィック"> <cfchartseries type="ring" serieslabel="2024"> <cfchartdata item="1 月" value="6000"> <cfchartdata item="2 月" value="3456"> <cfchartdata item="3 月" value="446"> <cfchartdata item="4 月" value="7887"> <cfchartdata item="5 月" value="4356"> <cfchartdata item="6 月" value="789"> </cfchartseries> </cfchart>

<cfscript>
    scaleR={&quot;refAngle&quot;:180,&quot;aperture&quot;:360}
</cfscript>
<cfchart format=&quot;html&quot; chartWidth=&quot;800&quot; chartHeight=&quot;400&quot; scaleR=&quot;#scaleR#&quot; showLegend=FALSE title=&quot;Web サイトトラフィック&quot;>
    <cfchartseries type=&quot;ring&quot; serieslabel=&quot;2024&quot;>
        <cfchartdata item=&quot;1 月&quot; value=&quot;6000&quot;>
        <cfchartdata item=&quot;2 月&quot; value=&quot;3456&quot;>
        <cfchartdata item=&quot;3 月&quot; value=&quot;446&quot;>
        <cfchartdata item=&quot;4 月&quot; value=&quot;7887&quot;>
        <cfchartdata item=&quot;5 月&quot; value=&quot;4356&quot;>
        <cfchartdata item=&quot;6 月&quot; value=&quot;789&quot;>
    </cfchartseries>
</cfchart>

出力

例 4

この例では、スクリプトで refAngle を 180、aperture を 270 に設定しています。

scaleR={"refAngle":180,"aperture":270}

</cfscript>

</cfchartseries>

</cfchart>

<cfscript> scaleR={"refAngle":180,"aperture":270} </cfscript> <cfchart format="html" chartWidth="800" chartHeight="400" scaleR="#scaleR#" showLegend=FALSE title="Web サイトトラフィック"> <cfchartseries type="ring" serieslabel="2024"> <cfchartdata item="1 月" value="6000"> <cfchartdata item="2 月" value="3456"> <cfchartdata item="3 月" value="446"> <cfchartdata item="4 月" value="7887"> <cfchartdata item="5 月" value="4356"> <cfchartdata item="6 月" value="789"> </cfchartseries> </cfchart>

<cfscript>
    scaleR={&quot;refAngle&quot;:180,&quot;aperture&quot;:270}
</cfscript>
<cfchart format=&quot;html&quot; chartWidth=&quot;800&quot; chartHeight=&quot;400&quot; scaleR=&quot;#scaleR#&quot; showLegend=FALSE title=&quot;Web サイトトラフィック&quot;>
    <cfchartseries type=&quot;ring&quot; serieslabel=&quot;2024&quot;>
        <cfchartdata item=&quot;1 月&quot; value=&quot;6000&quot;>
        <cfchartdata item=&quot;2 月&quot; value=&quot;3456&quot;>
        <cfchartdata item=&quot;3 月&quot; value=&quot;446&quot;>
        <cfchartdata item=&quot;4 月&quot; value=&quot;7887&quot;>
        <cfchartdata item=&quot;5 月&quot; value=&quot;4356&quot;>
        <cfchartdata item=&quot;6 月&quot; value=&quot;789&quot;>
    </cfchartseries>
</cfchart>

出力

Slice アトリビュート

ColdFusion では、slice 属性でドーナツグラフのリングのサイズを制御します。目的のリングのサイズをパーセント値またはピクセル値で指定できます。例えば、slice が 50％の場合、ドーナツグラフは半径の 50％から始まることを意味します。パーセント値は、ドーナツの半径に対する相対値です。

plot オブジェクトを使用して、slice プロパティを指定します。

plot = {"slice":"50%"}

例 1 - slice が 50％の場合

plot = {"slice":"50%"}

</cfscript>

<cfchart format="html" type="ring" chartWidth="600" chartHeight="400"

title="Web サイトトラフィック 2023" plot="#plot#">

</cfchartseries>

</cfchart>

<cfscript> plot = {"slice":"50%"} </cfscript> <cfchart format="html" type="ring" chartWidth="600" chartHeight="400" title="Web サイトトラフィック 2023" plot="#plot#"> <cfchartseries serieslabel="Visits"> <cfchartdata item="1 月" value="6000"> <cfchartdata item="2 月" value="3456"> <cfchartdata item="3 月" value="446"> <cfchartdata item="4 月" value="7887"> <cfchartdata item="5 月" value="4356"> <cfchartdata item="6 月" value="789"> </cfchartseries> </cfchart>

<cfscript>
    plot = {&quot;slice&quot;:&quot;50%&quot;}
</cfscript>
<cfchart format=&quot;html&quot; type=&quot;ring&quot; chartWidth=&quot;600&quot; chartHeight=&quot;400&quot; 
title=&quot;Web サイトトラフィック 2023&quot; plot=&quot;#plot#&quot;>
    <cfchartseries serieslabel=&quot;Visits&quot;>
        <cfchartdata item=&quot;1 月&quot; value=&quot;6000&quot;>
        <cfchartdata item=&quot;2 月&quot; value=&quot;3456&quot;>
        <cfchartdata item=&quot;3 月&quot; value=&quot;446&quot;>
        <cfchartdata item=&quot;4 月&quot; value=&quot;7887&quot;>
        <cfchartdata item=&quot;5 月&quot; value=&quot;4356&quot;>
        <cfchartdata item=&quot;6 月&quot; value=&quot;789&quot;>
    </cfchartseries>
</cfchart>

出力

例2 - スライスが 25%の場合

plot = {"slice":"25%"}

</cfscript>

<cfchart format="html" type="ring" chartWidth="600" chartHeight="400"

title="Website traffic 2023" plot="#plot#">

</cfchartseries>

</cfchart>

<cfscript> plot = {"slice":"25%"} </cfscript> <cfchart format="html" type="ring" chartWidth="600" chartHeight="400" title="Website traffic 2023" plot="#plot#"> <cfchartseries serieslabel="Visits"> <cfchartdata item="January" value="6000"> <cfchartdata item="Jaby" value="3456"> <cfchartdata item="March" value="446"> <cfchartdata item="April" value="7887"> <cfchartdata item="May" value="4356"> <cfchartdata item="June" value="789"> </cfchartseries> </cfchart>

<cfscript>
    plot = {&quot;slice&quot;:&quot;25%&quot;}
</cfscript>
<cfchart format=&quot;html&quot; type=&quot;ring&quot; chartWidth=&quot;600&quot; chartHeight=&quot;400&quot; 
title=&quot;Website traffic 2023&quot; plot=&quot;#plot#&quot;>
    <cfchartseries serieslabel=&quot;Visits&quot;>
        <cfchartdata item=&quot;January&quot; value=&quot;6000&quot;>
        <cfchartdata item=&quot;Jaby&quot; value=&quot;3456&quot;>
        <cfchartdata item=&quot;March&quot; value=&quot;446&quot;>
        <cfchartdata item=&quot;April&quot; value=&quot;7887&quot;>
        <cfchartdata item=&quot;May&quot; value=&quot;4356&quot;>
        <cfchartdata item=&quot;June&quot; value=&quot;789&quot;>
    </cfchartseries>
</cfchart>

出力

例3 - スライスが 75%の場合

plot = {"slice":"75%"}

</cfscript>

<cfchart format="html" type="ring" chartWidth="600" chartHeight="400"

title="Website traffic 2023" plot="#plot#">

</cfchartseries>

</cfchart>

<cfscript> plot = {"slice":"75%"} </cfscript> <cfchart format="html" type="ring" chartWidth="600" chartHeight="400" title="Website traffic 2023" plot="#plot#"> <cfchartseries serieslabel="Visits"> <cfchartdata item="January" value="6000"> <cfchartdata item="Jaby" value="3456"> <cfchartdata item="March" value="446"> <cfchartdata item="April" value="7887"> <cfchartdata item="May" value="4356"> <cfchartdata item="June" value="789"> </cfchartseries> </cfchart>

<cfscript>
    plot = {&quot;slice&quot;:&quot;75%&quot;}
</cfscript>
<cfchart format=&quot;html&quot; type=&quot;ring&quot; chartWidth=&quot;600&quot; chartHeight=&quot;400&quot; 
title=&quot;Website traffic 2023&quot; plot=&quot;#plot#&quot;>
    <cfchartseries serieslabel=&quot;Visits&quot;>
        <cfchartdata item=&quot;January&quot; value=&quot;6000&quot;>
        <cfchartdata item=&quot;Jaby&quot; value=&quot;3456&quot;>
        <cfchartdata item=&quot;March&quot; value=&quot;446&quot;>
        <cfchartdata item=&quot;April&quot; value=&quot;7887&quot;>
        <cfchartdata item=&quot;May&quot; value=&quot;4356&quot;>
        <cfchartdata item=&quot;June&quot; value=&quot;789&quot;>
    </cfchartseries>
</cfchart>

出力

一方、スライス属性を使用したくない場合は、そうすることもできます。次の例では、属性を使用しません。ただし、スライス属性を指定しない場合は、デフォルトでリングサイズは 35%になります。

次に例を示します。

</cfchartseries>

</cfchart>

<cfchart format=&quot;html&quot; type=&quot;ring&quot; chartWidth=&quot;600&quot; chartHeight=&quot;400&quot; title=&quot;Website traffic 2023&quot;> 
    <cfchartseries serieslabel=&quot;Visits&quot;> 
        <cfchartdata item=&quot;January&quot; value=&quot;6000&quot;> 
        <cfchartdata item=&quot;Jaby&quot; value=&quot;3456&quot;> 
        <cfchartdata item=&quot;March&quot; value=&quot;446&quot;> 
        <cfchartdata item=&quot;April&quot; value=&quot;7887&quot;> 
        <cfchartdata item=&quot;May&quot; value=&quot;4356&quot;> 
        <cfchartdata item=&quot;June&quot; value=&quot;789&quot;> 
    </cfchartseries> 
</cfchart>

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

新規ユーザーの場合

ColdFusion でのドーナツグラフの作成

ColdFusion でのドーナツグラフの作成

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

このページを共有

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

サポート