マニュアル キャンセル

ColdFusion での面グラフの作成

 

階層グラフとも呼ばれる面グラフは、定量的なデータをグラフで表します。折れ線グラフに似ていますが、折れ線グラフと x 軸の間の領域が色またはシェーディングで塗りつぶされます。

階段領域を含む面グラフ

階段領域を含む面グラフは、標準的な面グラフに似たデータビジュアライゼーションのタイプですが、重要な違いがあります。階段領域を含む面グラフのデータポイントを結ぶ線は、直線ではなく階段のように傾斜しています。

この例では、スクリプトは次のプロットカスタマイズオプションを使用します。

  • アルファ領域:この属性はプロットの透明度を定義します。範囲は 0(クリア)~1(ソリッド)です。 
  • contourOnTop:この属性は、面グラフの上に輪郭線を描画するかどうかを決定します。輪郭線がシェーディングされた領域の上に表示されます。
  • segmentTrackers:segmentTracker の値が true の場合、線に沿ってポインタを合わせると値も表示されます。それ以外の場合は、データポイント上にポインタを合わせている間のみ値が表示されます。

例 1

プロットオプションで segmentTrackers=false を使用します。

コード

<cfscript>
plot={
&quot;alpha-area&quot;:1,
&quot;contourOnTop&quot;:true,
&quot;segmentTrackers&quot;: &quot;false&quot; // true の場合、ポインタを合わせると値が表示されます
};
</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;Web サイトトラフィック 2024&quot;>
<cfchartseries type=&quot;steppedarea&quot;>
<cfchartdata item=&quot;1 月&quot; value=&quot;503100&quot;>
<cfchartdata item=&quot;2 月&quot; value=&quot;620310&quot;>
<cfchartdata item=&quot;3 月&quot; value=&quot;688700&quot;>
<cfchartdata item=&quot;4 月&quot; value=&quot;986500&quot;>
<cfchartdata item=&quot;5 月&quot; value=&quot;1063911&quot;>
<cfchartdata item=&quot;6 月&quot; value=&quot;1115321&quot;>
</cfchartseries>
</cfchart>
<cfscript> plot={ &quot;alpha-area&quot;:1, &quot;contourOnTop&quot;:true, &quot;segmentTrackers&quot;: &quot;false&quot; // true の場合、ポインタを合わせると値が表示されます }; </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;Web サイトトラフィック 2024&quot;> <cfchartseries type=&quot;steppedarea&quot;> <cfchartdata item=&quot;1 月&quot; value=&quot;503100&quot;> <cfchartdata item=&quot;2 月&quot; value=&quot;620310&quot;> <cfchartdata item=&quot;3 月&quot; value=&quot;688700&quot;> <cfchartdata item=&quot;4 月&quot; value=&quot;986500&quot;> <cfchartdata item=&quot;5 月&quot; value=&quot;1063911&quot;> <cfchartdata item=&quot;6 月&quot; value=&quot;1115321&quot;> </cfchartseries> </cfchart>
<cfscript>
    plot={
        &quot;alpha-area&quot;:1,
        &quot;contourOnTop&quot;:true,
        &quot;segmentTrackers&quot;: &quot;false&quot; // true の場合、ポインタを合わせると値が表示されます
    };
</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;Web サイトトラフィック 2024&quot;>
  <cfchartseries type=&quot;steppedarea&quot;>
    <cfchartdata item=&quot;1 月&quot; value=&quot;503100&quot;>
    <cfchartdata item=&quot;2 月&quot; value=&quot;620310&quot;>
    <cfchartdata item=&quot;3 月&quot; value=&quot;688700&quot;>
    <cfchartdata item=&quot;4 月&quot; value=&quot;986500&quot;>
    <cfchartdata item=&quot;5 月&quot; value=&quot;1063911&quot;>
    <cfchartdata item=&quot;6 月&quot; value=&quot;1115321&quot;>
   </cfchartseries>
</cfchart>

出力

例 2

プロットオプションで segmentTrackers=true を使用します。 

コード

<cfscript>
plot={
&quot;alpha-area&quot;:1,
&quot;contourOnTop&quot;:true,
&quot;segmentTrackers&quot;: &quot;true&quot; // true の場合、ポインタを合わせると値が表示されます
};
</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;Web サイトトラフィック 2024&quot;>
<cfchartseries type=&quot;steppedarea&quot;>
<cfchartdata item=&quot;1 月&quot; value=&quot;503100&quot;>
<cfchartdata item=&quot;2 月&quot; value=&quot;620310&quot;>
<cfchartdata item=&quot;3 月&quot; value=&quot;688700&quot;>
<cfchartdata item=&quot;4 月&quot; value=&quot;986500&quot;>
<cfchartdata item=&quot;5 月&quot; value=&quot;1063911&quot;>
<cfchartdata item=&quot;6 月&quot; value=&quot;1115321&quot;>
</cfchartseries>
</cfchart>
<cfscript> plot={ &quot;alpha-area&quot;:1, &quot;contourOnTop&quot;:true, &quot;segmentTrackers&quot;: &quot;true&quot; // true の場合、ポインタを合わせると値が表示されます }; </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;Web サイトトラフィック 2024&quot;> <cfchartseries type=&quot;steppedarea&quot;> <cfchartdata item=&quot;1 月&quot; value=&quot;503100&quot;> <cfchartdata item=&quot;2 月&quot; value=&quot;620310&quot;> <cfchartdata item=&quot;3 月&quot; value=&quot;688700&quot;> <cfchartdata item=&quot;4 月&quot; value=&quot;986500&quot;> <cfchartdata item=&quot;5 月&quot; value=&quot;1063911&quot;> <cfchartdata item=&quot;6 月&quot; value=&quot;1115321&quot;> </cfchartseries> </cfchart>
<cfscript>
    plot={
        &quot;alpha-area&quot;:1,
        &quot;contourOnTop&quot;:true,
        &quot;segmentTrackers&quot;: &quot;true&quot; // true の場合、ポインタを合わせると値が表示されます
    };
</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;Web サイトトラフィック 2024&quot;>
  <cfchartseries type=&quot;steppedarea&quot;>
    <cfchartdata item=&quot;1 月&quot; value=&quot;503100&quot;>
    <cfchartdata item=&quot;2 月&quot; value=&quot;620310&quot;>
    <cfchartdata item=&quot;3 月&quot; value=&quot;688700&quot;>
    <cfchartdata item=&quot;4 月&quot; value=&quot;986500&quot;>
    <cfchartdata item=&quot;5 月&quot; value=&quot;1063911&quot;>
    <cfchartdata item=&quot;6 月&quot; value=&quot;1115321&quot;>
   </cfchartseries>
</cfchart>

出力

例 3

"contourOnTop"=true の使用

コード

<cfscript>
plot={
&quot;alpha-area&quot;=1,
&quot;contourOnTop&quot;=true
};
</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;
alpha=&quot;1&quot;
title=&quot;Web サイトトラフィック 2023&quot;>
<cfchartseries type=&quot;curvedarea&quot;>
<cfchartdata item=&quot;1 月&quot; value=&quot;503100&quot;>
<cfchartdata item=&quot;2 月&quot; value=&quot;620310&quot;>
<cfchartdata item=&quot;3 月&quot; value=&quot;688700&quot;>
<cfchartdata item=&quot;4 月&quot; value=&quot;986500&quot;>
<cfchartdata item=&quot;5 月&quot; value=&quot;1063911&quot;>
<cfchartdata item=&quot;6 月&quot; value=&quot;1115321&quot;>
</cfchartseries>
<cfchartseries type=&quot;curvedarea&quot;>
<cfchartdata item=&quot;1 月&quot; value=&quot;703100&quot;>
<cfchartdata item=&quot;2 月&quot; value=&quot;520310&quot;>
<cfchartdata item=&quot;3 月&quot; value=&quot;888700&quot;>
<cfchartdata item=&quot;4 月&quot; value=&quot;786500&quot;>
<cfchartdata item=&quot;5 月&quot; value=&quot;963911&quot;>
<cfchartdata item=&quot;6 月&quot; value=&quot;1015321&quot;>
</cfchartseries>
</cfchart>
<cfscript> plot={ &quot;alpha-area&quot;=1, &quot;contourOnTop&quot;=true }; </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; alpha=&quot;1&quot; title=&quot;Web サイトトラフィック 2023&quot;> <cfchartseries type=&quot;curvedarea&quot;> <cfchartdata item=&quot;1 月&quot; value=&quot;503100&quot;> <cfchartdata item=&quot;2 月&quot; value=&quot;620310&quot;> <cfchartdata item=&quot;3 月&quot; value=&quot;688700&quot;> <cfchartdata item=&quot;4 月&quot; value=&quot;986500&quot;> <cfchartdata item=&quot;5 月&quot; value=&quot;1063911&quot;> <cfchartdata item=&quot;6 月&quot; value=&quot;1115321&quot;> </cfchartseries> <cfchartseries type=&quot;curvedarea&quot;> <cfchartdata item=&quot;1 月&quot; value=&quot;703100&quot;> <cfchartdata item=&quot;2 月&quot; value=&quot;520310&quot;> <cfchartdata item=&quot;3 月&quot; value=&quot;888700&quot;> <cfchartdata item=&quot;4 月&quot; value=&quot;786500&quot;> <cfchartdata item=&quot;5 月&quot; value=&quot;963911&quot;> <cfchartdata item=&quot;6 月&quot; value=&quot;1015321&quot;> </cfchartseries> </cfchart>
<cfscript>
       plot={
        &quot;alpha-area&quot;=1,
        &quot;contourOnTop&quot;=true
       };
</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;
    alpha=&quot;1&quot;
   title=&quot;Web サイトトラフィック 2023&quot;>
  <cfchartseries type=&quot;curvedarea&quot;>
    <cfchartdata item=&quot;1 月&quot; value=&quot;503100&quot;>
    <cfchartdata item=&quot;2 月&quot; value=&quot;620310&quot;>
    <cfchartdata item=&quot;3 月&quot; value=&quot;688700&quot;>
    <cfchartdata item=&quot;4 月&quot; value=&quot;986500&quot;>
    <cfchartdata item=&quot;5 月&quot; value=&quot;1063911&quot;>
    <cfchartdata item=&quot;6 月&quot; value=&quot;1115321&quot;>
   </cfchartseries>
   <cfchartseries type=&quot;curvedarea&quot;>
    <cfchartdata item=&quot;1 月&quot; value=&quot;703100&quot;>
    <cfchartdata item=&quot;2 月&quot; value=&quot;520310&quot;>
    <cfchartdata item=&quot;3 月&quot; value=&quot;888700&quot;>
    <cfchartdata item=&quot;4 月&quot; value=&quot;786500&quot;>
    <cfchartdata item=&quot;5 月&quot; value=&quot;963911&quot;>
    <cfchartdata item=&quot;6 月&quot; value=&quot;1015321&quot;>
   </cfchartseries>
</cfchart>

出力

ご覧のように、contourOnTop が True の場合、輪郭線は面グラフのシェーディングされた領域の上に表示されます。 

例 4

"contourOnTop"=false の使用

コード

<cfscript>
plot={
&quot;alpha-area&quot;=1,
&quot;contourOnTop&quot;=false
};
</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;
alpha=&quot;1&quot;
title=&quot;Web サイトトラフィック 2023&quot;>
<cfchartseries type=&quot;curvedarea&quot;>
<cfchartdata item=&quot;1 月&quot; value=&quot;503100&quot;>
<cfchartdata item=&quot;2 月&quot; value=&quot;620310&quot;>
<cfchartdata item=&quot;3 月&quot; value=&quot;688700&quot;>
<cfchartdata item=&quot;4 月&quot; value=&quot;986500&quot;>
<cfchartdata item=&quot;5 月&quot; value=&quot;1063911&quot;>
<cfchartdata item=&quot;6 月&quot; value=&quot;1115321&quot;>
</cfchartseries>
<cfchartseries type=&quot;curvedarea&quot;>
<cfchartdata item=&quot;1 月&quot; value=&quot;703100&quot;>
<cfchartdata item=&quot;2 月&quot; value=&quot;520310&quot;>
<cfchartdata item=&quot;3 月&quot; value=&quot;888700&quot;>
<cfchartdata item=&quot;4 月&quot; value=&quot;786500&quot;>
<cfchartdata item=&quot;5 月&quot; value=&quot;963911&quot;>
<cfchartdata item=&quot;6 月&quot; value=&quot;1015321&quot;>
</cfchartseries>
</cfchart>
<cfscript> plot={ &quot;alpha-area&quot;=1, &quot;contourOnTop&quot;=false }; </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; alpha=&quot;1&quot; title=&quot;Web サイトトラフィック 2023&quot;> <cfchartseries type=&quot;curvedarea&quot;> <cfchartdata item=&quot;1 月&quot; value=&quot;503100&quot;> <cfchartdata item=&quot;2 月&quot; value=&quot;620310&quot;> <cfchartdata item=&quot;3 月&quot; value=&quot;688700&quot;> <cfchartdata item=&quot;4 月&quot; value=&quot;986500&quot;> <cfchartdata item=&quot;5 月&quot; value=&quot;1063911&quot;> <cfchartdata item=&quot;6 月&quot; value=&quot;1115321&quot;> </cfchartseries> <cfchartseries type=&quot;curvedarea&quot;> <cfchartdata item=&quot;1 月&quot; value=&quot;703100&quot;> <cfchartdata item=&quot;2 月&quot; value=&quot;520310&quot;> <cfchartdata item=&quot;3 月&quot; value=&quot;888700&quot;> <cfchartdata item=&quot;4 月&quot; value=&quot;786500&quot;> <cfchartdata item=&quot;5 月&quot; value=&quot;963911&quot;> <cfchartdata item=&quot;6 月&quot; value=&quot;1015321&quot;> </cfchartseries> </cfchart>
<cfscript>
       plot={
        &quot;alpha-area&quot;=1,
        &quot;contourOnTop&quot;=false
       };
</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;
    alpha=&quot;1&quot;
   title=&quot;Web サイトトラフィック 2023&quot;>
  <cfchartseries type=&quot;curvedarea&quot;>
    <cfchartdata item=&quot;1 月&quot; value=&quot;503100&quot;>
    <cfchartdata item=&quot;2 月&quot; value=&quot;620310&quot;>
    <cfchartdata item=&quot;3 月&quot; value=&quot;688700&quot;>
    <cfchartdata item=&quot;4 月&quot; value=&quot;986500&quot;>
    <cfchartdata item=&quot;5 月&quot; value=&quot;1063911&quot;>
    <cfchartdata item=&quot;6 月&quot; value=&quot;1115321&quot;>
   </cfchartseries>
   <cfchartseries type=&quot;curvedarea&quot;>
    <cfchartdata item=&quot;1 月&quot; value=&quot;703100&quot;>
    <cfchartdata item=&quot;2 月&quot; value=&quot;520310&quot;>
    <cfchartdata item=&quot;3 月&quot; value=&quot;888700&quot;>
    <cfchartdata item=&quot;4 月&quot; value=&quot;786500&quot;>
    <cfchartdata item=&quot;5 月&quot; value=&quot;963911&quot;>
    <cfchartdata item=&quot;6 月&quot; value=&quot;1015321&quot;>
   </cfchartseries>
</cfchart>

出力

曲線領域を含む面グラフ

曲線領域を含む面グラフは、標準的な面グラフのバリエーションです。この面グラフでは、データポイントを接続するために直線セグメントを使用する代わりに、近似曲線を描画してデータポイントを接続します。曲線と x 軸の間の領域は色で塗りつぶされます。 

cfchartseries type="curvedarea" で前の例を再利用します。 

コード

<cfscript>
plot={
&quot;alpha-area&quot;:1,
&quot;contourOnTop&quot;:true,
&quot;segmentTrackers&quot;: &quot;false&quot; // true の場合、ポインタを合わせると値が表示されます
};
</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;Web サイトトラフィック 2024&quot;>
<cfchartseries type=&quot;curvedarea&quot;>
<cfchartdata item=&quot;1 月&quot; value=&quot;503100&quot;>
<cfchartdata item=&quot;2 月&quot; value=&quot;620310&quot;>
<cfchartdata item=&quot;3 月&quot; value=&quot;688700&quot;>
<cfchartdata item=&quot;4 月&quot; value=&quot;986500&quot;>
<cfchartdata item=&quot;5 月&quot; value=&quot;1063911&quot;>
<cfchartdata item=&quot;6 月&quot; value=&quot;1115321&quot;>
</cfchartseries>
</cfchart>
<cfscript> plot={ &quot;alpha-area&quot;:1, &quot;contourOnTop&quot;:true, &quot;segmentTrackers&quot;: &quot;false&quot; // true の場合、ポインタを合わせると値が表示されます }; </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;Web サイトトラフィック 2024&quot;> <cfchartseries type=&quot;curvedarea&quot;> <cfchartdata item=&quot;1 月&quot; value=&quot;503100&quot;> <cfchartdata item=&quot;2 月&quot; value=&quot;620310&quot;> <cfchartdata item=&quot;3 月&quot; value=&quot;688700&quot;> <cfchartdata item=&quot;4 月&quot; value=&quot;986500&quot;> <cfchartdata item=&quot;5 月&quot; value=&quot;1063911&quot;> <cfchartdata item=&quot;6 月&quot; value=&quot;1115321&quot;> </cfchartseries> </cfchart>
<cfscript> 
    plot={ 
        &quot;alpha-area&quot;:1, 
        &quot;contourOnTop&quot;:true, 
        &quot;segmentTrackers&quot;: &quot;false&quot; // true の場合、ポインタを合わせると値が表示されます 
    }; 
</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;Web サイトトラフィック 2024&quot;> 

  <cfchartseries type=&quot;curvedarea&quot;> 
    <cfchartdata item=&quot;1 月&quot; value=&quot;503100&quot;> 
    <cfchartdata item=&quot;2 月&quot; value=&quot;620310&quot;> 
    <cfchartdata item=&quot;3 月&quot; value=&quot;688700&quot;> 
    <cfchartdata item=&quot;4 月&quot; value=&quot;986500&quot;> 
    <cfchartdata item=&quot;5 月&quot; value=&quot;1063911&quot;> 
    <cfchartdata item=&quot;6 月&quot; value=&quot;1115321&quot;> 
   </cfchartseries> 
</cfchart>

出力

垂直領域を含む面グラフ

垂直領域を含む面グラフは、x 軸と y 軸の役割が入れ替わった標準的な面グラフのバリエーションです。一般的な面グラフでは、x 軸はカテゴリまたは期間を表し、y 軸は数値を表します。 垂直領域を含む面グラフでは、これが反転されます。y 軸はカテゴリまたは期間を表し、x 軸は数値を表します。

cfchartseries type="varea" で前の例を再利用します。 

コード

<cfscript>
plot={
&quot;alpha-area&quot;:1,
&quot;contourOnTop&quot;:true,
&quot;segmentTrackers&quot;: &quot;true&quot; // true の場合、ポインタを合わせると値が表示されます
};
</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;Web サイトトラフィック 2024&quot;>
<cfchartseries type=&quot;varea&quot;>
<cfchartdata item=&quot;1 月&quot; value=&quot;503100&quot;>
<cfchartdata item=&quot;2 月&quot; value=&quot;620310&quot;>
<cfchartdata item=&quot;3 月&quot; value=&quot;688700&quot;>
<cfchartdata item=&quot;4 月&quot; value=&quot;986500&quot;>
<cfchartdata item=&quot;5 月&quot; value=&quot;1063911&quot;>
<cfchartdata item=&quot;6 月&quot; value=&quot;1115321&quot;>
</cfchartseries>
</cfchart>
<cfscript> plot={ &quot;alpha-area&quot;:1, &quot;contourOnTop&quot;:true, &quot;segmentTrackers&quot;: &quot;true&quot; // true の場合、ポインタを合わせると値が表示されます }; </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;Web サイトトラフィック 2024&quot;> <cfchartseries type=&quot;varea&quot;> <cfchartdata item=&quot;1 月&quot; value=&quot;503100&quot;> <cfchartdata item=&quot;2 月&quot; value=&quot;620310&quot;> <cfchartdata item=&quot;3 月&quot; value=&quot;688700&quot;> <cfchartdata item=&quot;4 月&quot; value=&quot;986500&quot;> <cfchartdata item=&quot;5 月&quot; value=&quot;1063911&quot;> <cfchartdata item=&quot;6 月&quot; value=&quot;1115321&quot;> </cfchartseries> </cfchart>
<cfscript>
    plot={
        &quot;alpha-area&quot;:1,
        &quot;contourOnTop&quot;:true,
        &quot;segmentTrackers&quot;: &quot;true&quot; // true の場合、ポインタを合わせると値が表示されます
    };
</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;Web サイトトラフィック 2024&quot;>
  <cfchartseries type=&quot;varea&quot;>
    <cfchartdata item=&quot;1 月&quot; value=&quot;503100&quot;>
    <cfchartdata item=&quot;2 月&quot; value=&quot;620310&quot;>
    <cfchartdata item=&quot;3 月&quot; value=&quot;688700&quot;>
    <cfchartdata item=&quot;4 月&quot; value=&quot;986500&quot;>
    <cfchartdata item=&quot;5 月&quot; value=&quot;1063911&quot;>
    <cfchartdata item=&quot;6 月&quot; value=&quot;1115321&quot;>
   </cfchartseries>
</cfchart>

出力

クラスター化された面グラフと積み重ね面グラフ

また、階段領域、垂直領域、曲線領域を含む面グラフでは、2 つ以上のチャートをクラスター化できます。プロットのカスタマイズオプションで、stacked=true を使用してクラスター化されたチャートを作成します。 

例 1

階段領域を含む積み重ね面グラフを作成します。 

コード

<cfscript>
plot={
&quot;alpha-area&quot;:1,
&quot;contourOnTop&quot;: &quot;true&quot;,
&quot;stepped&quot;: &quot;true&quot;,
&quot;stacked&quot;: &quot;true&quot;
}
</cfscript>
<cfchart format =&quot;html&quot; type=&quot;steppedarea&quot; width=&quot;600&quot; height=&quot;400&quot; plot=&quot;#plot#&quot;
title=&quot;階段領域を含む積み重ね面グラフ&quot;>
<cfchartseries label=&quot;1 週目&quot;>
<cfchartdata item=1 value=10>
<cfchartdata item=2 value=20>
<cfchartdata item=3 value=30>
<cfchartdata item=4 value=20>
<cfchartdata item=5 value=40>
</cfchartseries>
<cfchartseries label=&quot;2 週目&quot;>
<cfchartdata item=1 value=0>
<cfchartdata item=2 value=30>
<cfchartdata item=3 value=-36>
<cfchartdata item=4 value=29>
<cfchartdata item=5 value=48>
</cfchartseries>
</cfchart>
<cfscript> plot={ &quot;alpha-area&quot;:1, &quot;contourOnTop&quot;: &quot;true&quot;, &quot;stepped&quot;: &quot;true&quot;, &quot;stacked&quot;: &quot;true&quot; } </cfscript> <cfchart format =&quot;html&quot; type=&quot;steppedarea&quot; width=&quot;600&quot; height=&quot;400&quot; plot=&quot;#plot#&quot; title=&quot;階段領域を含む積み重ね面グラフ&quot;> <cfchartseries label=&quot;1 週目&quot;> <cfchartdata item=1 value=10> <cfchartdata item=2 value=20> <cfchartdata item=3 value=30> <cfchartdata item=4 value=20> <cfchartdata item=5 value=40> </cfchartseries> <cfchartseries label=&quot;2 週目&quot;> <cfchartdata item=1 value=0> <cfchartdata item=2 value=30> <cfchartdata item=3 value=-36> <cfchartdata item=4 value=29> <cfchartdata item=5 value=48> </cfchartseries> </cfchart>
<cfscript>
    plot={
        &quot;alpha-area&quot;:1,
        &quot;contourOnTop&quot;: &quot;true&quot;,
        &quot;stepped&quot;: &quot;true&quot;,
        &quot;stacked&quot;: &quot;true&quot;
    }
</cfscript>
<cfchart format =&quot;html&quot; type=&quot;steppedarea&quot; width=&quot;600&quot; height=&quot;400&quot; plot=&quot;#plot#&quot; 
title=&quot;階段領域を含む積み重ね面グラフ&quot;>
   <cfchartseries label=&quot;1 週目&quot;>
        <cfchartdata item=1 value=10>
        <cfchartdata item=2 value=20>
        <cfchartdata item=3 value=30>
        <cfchartdata item=4 value=20>
        <cfchartdata item=5 value=40>
    </cfchartseries>
   <cfchartseries label=&quot;2 週目&quot;>
        <cfchartdata item=1 value=0>
        <cfchartdata item=2 value=30>
        <cfchartdata item=3 value=-36>
        <cfchartdata item=4 value=29>
        <cfchartdata item=5 value=48>
    </cfchartseries>
</cfchart>

出力

例 2

スクリプトを再利用して、クラスター化された階段領域を含む面グラフを作成します。この場合、階段領域を含む面グラフは 2 つの連続したクラスターで表されます。 負の値は、ゼロスケールの下に表示されます。

コード

<cfscript>
plot={
&quot;alpha-area&quot;:1,
&quot;contourOnTop&quot;: &quot;true&quot;,
&quot;clustered&quot;: &quot;true&quot;
}
</cfscript>
<cfchart format =&quot;html&quot; type=&quot;steppedarea&quot; width=&quot;600&quot; height=&quot;400&quot; plot=&quot;#plot#&quot;
title=&quot;階段領域を含むクラスター化された面グラフ&quot;>
<cfchartseries label=&quot;1 週目&quot;>
<cfchartdata item=1 value=10>
<cfchartdata item=2 value=20>
<cfchartdata item=3 value=30>
<cfchartdata item=4 value=20>
<cfchartdata item=5 value=40>
</cfchartseries>
<cfchartseries label=&quot;2 週目&quot;>
<cfchartdata item=1 value=0>
<cfchartdata item=2 value=30>
<cfchartdata item=3 value=-36>
<cfchartdata item=4 value=29>
<cfchartdata item=5 value=48>
</cfchartseries>
</cfchart>
<cfscript> plot={ &quot;alpha-area&quot;:1, &quot;contourOnTop&quot;: &quot;true&quot;, &quot;clustered&quot;: &quot;true&quot; } </cfscript> <cfchart format =&quot;html&quot; type=&quot;steppedarea&quot; width=&quot;600&quot; height=&quot;400&quot; plot=&quot;#plot#&quot; title=&quot;階段領域を含むクラスター化された面グラフ&quot;> <cfchartseries label=&quot;1 週目&quot;> <cfchartdata item=1 value=10> <cfchartdata item=2 value=20> <cfchartdata item=3 value=30> <cfchartdata item=4 value=20> <cfchartdata item=5 value=40> </cfchartseries> <cfchartseries label=&quot;2 週目&quot;> <cfchartdata item=1 value=0> <cfchartdata item=2 value=30> <cfchartdata item=3 value=-36> <cfchartdata item=4 value=29> <cfchartdata item=5 value=48> </cfchartseries> </cfchart>
<cfscript>
    plot={
        &quot;alpha-area&quot;:1,
        &quot;contourOnTop&quot;: &quot;true&quot;,
        &quot;clustered&quot;: &quot;true&quot;
     }
</cfscript>
<cfchart format =&quot;html&quot; type=&quot;steppedarea&quot; width=&quot;600&quot; height=&quot;400&quot; plot=&quot;#plot#&quot; 
title=&quot;階段領域を含むクラスター化された面グラフ&quot;>
   <cfchartseries label=&quot;1 週目&quot;>
        <cfchartdata item=1 value=10>
        <cfchartdata item=2 value=20>
        <cfchartdata item=3 value=30>
        <cfchartdata item=4 value=20>
        <cfchartdata item=5 value=40>
    </cfchartseries>
   <cfchartseries label=&quot;2 週目&quot;>
        <cfchartdata item=1 value=0>
        <cfchartdata item=2 value=30>
        <cfchartdata item=3 value=-36>
        <cfchartdata item=4 value=29>
        <cfchartdata item=5 value=48>
    </cfchartseries>
</cfchart>

出力

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

新規ユーザーの場合

Acrobat 購入相談

Acrobat 購入相談

Acrobat 購入相談

Acrobat 購入相談