マニュアル キャンセル

ColdFusion でのフローティング棒グラフの作成

 

フローティング棒グラフ(横棒または縦棒)は、各カテゴリの最小値と最大値の間のデータ範囲を視覚化するチャートです。ベースライン(通常はゼロ)から開始する標準の棒グラフとは異なり、フローティング棒グラフは指定された値で開始および終了するので、指定された値内のデータの範囲、差異、または範囲を示すのに役立ちます。

ColdFusion でのフローティング棒グラフの作成方法は次のとおりです。

  1. チャートのタイプを指定します。フローティング横棒グラフの場合は hfbar、フローティング縦棒グラフの場合は fbar です。
  2. 系列のオフセット値(zvalues)を指定します。これにより、棒の開始点を確認できます。
  3. 各データオブジェクトに、オフセット値と棒の値を追加します。

zvalue プロパティはバーの開始点を制御し、value プロパティは終了点を制御します。これにより、すべての棒が同じベースラインから開始するのではなく、各棒が軸上の異なるポイントから開始する棒グラフを作成できます。これは、単一の値ではなく、各カテゴリの値の範囲を視覚化する場合など、様々なシナリオで役立ちます。

例えば、プロジェクトのタイムラインでは、フローティング棒グラフを使用して各フェーズの開始日と終了日を表示できます。各棒の長さはフェーズの期間を表し、時間軸に沿った棒の位置はフェーズの開始と終了を示します。

フローティング横棒グラフ

cfchart で hfbar タイプを指定し、cfchartdata タグで棒とオフセット(zvalue)の値を指定します。この例では、item=1 の場合、zvalue 4.5 は、棒が x 軸の 4.5 から開始し、x 軸の 14.5(zvalue=4.5+value=10)で終了します。詳しくは、出力を参照してください。

 

コード

<cfchart format=&quot;html&quot; type=&quot;hfbar&quot; width=&quot;600&quot; height=&quot;400&quot; showLegend = &quot;no&quot; title=&quot;フローティング横棒グラフ&quot;>
<cfchartseries>
<cfchartdata item=1 value=10 zvalue=4.5>
<cfchartdata item=2 value=20 zvalue=1>
<cfchartdata item=3 value=30 zvalue=20>
<cfchartdata item=4 value=20 zvalue=40>
<cfchartdata item=5 value=40 zvalue=10>
</cfchartseries>
</cfchart>
<cfchart format=&quot;html&quot; type=&quot;hfbar&quot; width=&quot;600&quot; height=&quot;400&quot; showLegend = &quot;no&quot; title=&quot;フローティング横棒グラフ&quot;> <cfchartseries> <cfchartdata item=1 value=10 zvalue=4.5> <cfchartdata item=2 value=20 zvalue=1> <cfchartdata item=3 value=30 zvalue=20> <cfchartdata item=4 value=20 zvalue=40> <cfchartdata item=5 value=40 zvalue=10> </cfchartseries> </cfchart>
<cfchart format=&quot;html&quot; type=&quot;hfbar&quot; width=&quot;600&quot; height=&quot;400&quot; showLegend = &quot;no&quot; title=&quot;フローティング横棒グラフ&quot;> 
    <cfchartseries> 
        <cfchartdata item=1 value=10 zvalue=4.5> 
        <cfchartdata item=2 value=20 zvalue=1> 
        <cfchartdata item=3 value=30 zvalue=20> 
        <cfchartdata item=4 value=20 zvalue=40> 
        <cfchartdata item=5 value=40 zvalue=10> 
    </cfchartseries> 
</cfchart>

出力

フローティング縦棒グラフ

cfchart で fbar タイプを指定し、cfchartdata タグで棒とオフセット(zvalue)の値を指定します。この例では、item=1 の場合、zvalue 4.5 は、棒が y 軸の 4.5 から開始し、y 軸の 14.5(zvalue=4.5+value=10)で終了します。詳しくは、出力を参照してください。

コード

<cfchart format=&quot;html&quot; type=&quot;fbar&quot; width=&quot;600&quot; height=&quot;400&quot; showLegend = &quot;no&quot; title=&quot;フローティング縦棒グラフ&quot;>
<cfchartseries>
<cfchartdata item=1 value=10 zvalue=4.5>
<cfchartdata item=2 value=20 zvalue=1>
<cfchartdata item=3 value=30 zvalue=20>
<cfchartdata item=4 value=20 zvalue=40>
<cfchartdata item=5 value=40 zvalue=10>
</cfchartseries>
</cfchart>
<cfchart format=&quot;html&quot; type=&quot;fbar&quot; width=&quot;600&quot; height=&quot;400&quot; showLegend = &quot;no&quot; title=&quot;フローティング縦棒グラフ&quot;> <cfchartseries> <cfchartdata item=1 value=10 zvalue=4.5> <cfchartdata item=2 value=20 zvalue=1> <cfchartdata item=3 value=30 zvalue=20> <cfchartdata item=4 value=20 zvalue=40> <cfchartdata item=5 value=40 zvalue=10> </cfchartseries> </cfchart>
<cfchart format=&quot;html&quot; type=&quot;fbar&quot; width=&quot;600&quot; height=&quot;400&quot; showLegend = &quot;no&quot; title=&quot;フローティング縦棒グラフ&quot;> 
    <cfchartseries> 
        <cfchartdata item=1 value=10 zvalue=4.5> 
        <cfchartdata item=2 value=20 zvalue=1> 
        <cfchartdata item=3 value=30 zvalue=20> 
        <cfchartdata item=4 value=20 zvalue=40> 
        <cfchartdata item=5 value=40 zvalue=10> 
    </cfchartseries> 
</cfchart>

出力

3D フローティング横棒グラフと縦棒グラフ

同様に、それぞれ hfbar3dfbar3d のタイプを指定して、3D フローティング横棒グラフと縦棒グラフを作成できます。

3D フローティング横棒グラフの例

コード

<cfchart format=&quot;html&quot; type=&quot;hfbar3d&quot; width=&quot;600&quot; height=&quot;400&quot; showLegend = &quot;no&quot; title=&quot;フローティング横棒グラフ&quot;>
<cfchartseries>
<cfchartdata item=1 value=10 zvalue=4.5>
<cfchartdata item=2 value=20 zvalue=1>
<cfchartdata item=3 value=30 zvalue=20>
<cfchartdata item=4 value=20 zvalue=40>
<cfchartdata item=5 value=40 zvalue=10>
</cfchartseries>
</cfchart>
<cfchart format=&quot;html&quot; type=&quot;hfbar3d&quot; width=&quot;600&quot; height=&quot;400&quot; showLegend = &quot;no&quot; title=&quot;フローティング横棒グラフ&quot;> <cfchartseries> <cfchartdata item=1 value=10 zvalue=4.5> <cfchartdata item=2 value=20 zvalue=1> <cfchartdata item=3 value=30 zvalue=20> <cfchartdata item=4 value=20 zvalue=40> <cfchartdata item=5 value=40 zvalue=10> </cfchartseries> </cfchart>
<cfchart format=&quot;html&quot; type=&quot;hfbar3d&quot; width=&quot;600&quot; height=&quot;400&quot; showLegend = &quot;no&quot; title=&quot;フローティング横棒グラフ&quot;> 
    <cfchartseries> 
        <cfchartdata item=1 value=10 zvalue=4.5> 
        <cfchartdata item=2 value=20 zvalue=1> 
        <cfchartdata item=3 value=30 zvalue=20> 
        <cfchartdata item=4 value=20 zvalue=40> 
        <cfchartdata item=5 value=40 zvalue=10> 
    </cfchartseries> 
</cfchart>

出力

3D フローティング縦棒グラフの例

コード

<cfchart format=&quot;html&quot; type=&quot;fbar3d&quot; width=&quot;600&quot; height=&quot;400&quot; showLegend = &quot;no&quot; title=&quot;フローティング縦棒グラフ&quot;>
<cfchartseries>
<cfchartdata item=1 value=10 zvalue=4.5>
<cfchartdata item=2 value=20 zvalue=1>
<cfchartdata item=3 value=30 zvalue=20>
<cfchartdata item=4 value=20 zvalue=40>
<cfchartdata item=5 value=40 zvalue=10>
</cfchartseries>
</cfchart>
<cfchart format=&quot;html&quot; type=&quot;fbar3d&quot; width=&quot;600&quot; height=&quot;400&quot; showLegend = &quot;no&quot; title=&quot;フローティング縦棒グラフ&quot;> <cfchartseries> <cfchartdata item=1 value=10 zvalue=4.5> <cfchartdata item=2 value=20 zvalue=1> <cfchartdata item=3 value=30 zvalue=20> <cfchartdata item=4 value=20 zvalue=40> <cfchartdata item=5 value=40 zvalue=10> </cfchartseries> </cfchart>
<cfchart format=&quot;html&quot; type=&quot;fbar3d&quot; width=&quot;600&quot; height=&quot;400&quot; showLegend = &quot;no&quot; title=&quot;フローティング縦棒グラフ&quot;> 
    <cfchartseries> 
        <cfchartdata item=1 value=10 zvalue=4.5> 
        <cfchartdata item=2 value=20 zvalue=1> 
        <cfchartdata item=3 value=30 zvalue=20> 
        <cfchartdata item=4 value=20 zvalue=40> 
        <cfchartdata item=5 value=40 zvalue=10> 
    </cfchartseries> 
</cfchart>

出力

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

新規ユーザーの場合

Acrobat 購入相談

Acrobat 購入相談

Acrobat 購入相談

Acrobat 購入相談