cfchartタグ Tips ② - ColdFusion Associate

別のFAQ記事として記載しています「cfchartタグ Tips」のパート２です。このトピックでは、チャートのスタイルや表示を変更する参考情報を紹介していきます。

【このトピックの記載に関する注意点】

こちらで確認した限りの情報となります。このトピックで紹介した以外の方法でも同等、または、それ以上に良い方法があるかもしれません。
- 内容については、予告なく追加や変更、削除する場合があります事を予めご了承下さい。
特に表記が無い限り、Windows 64bit 版 ColdFusion 2021で動作を確認しています。異なるOSでは正しく表示されない場合があります。

⑪ Y軸の項目の表示の最小値・最大値・間隔を固定にする（2023.3.6 追加）

⇒

Y軸の項目は、チャートに表示する値によって動的に生成されますが、それによって本来表示したい範囲で表示できない場合があります。例えば、左図は「cfchartタグ Tips」の⑨のプログラムを実行した例で、各月の売上実績が10000～100000までランダムの値をチャートで表示していますが、いずれの月も売上実績の最大が低かった場合（いずれの月も90000未満だった場合）は、Y軸の目盛りが0～100000ではなく0～90000で表示されます。
Y軸の項目の最大を100000で固定して表示したい場合は、Y軸の最小値（0）・最大値（100000）・間隔（20000）をYAxisのminValue、maxValue、stepのそれぞれの値として設定し、cfchartのyAxis属性に指定します（これらの値を設定するとY軸のスタイルが初期化されるため、見た目を変更前と同じにする設定も含まれています）。

jpgやpng形式のチャートを表示する際は、以下の点に注意してください

stepの値は数字で指定（引用符を付けない）しないとTypeError: Cannot find function toFixed in object 01000.が発生します

チャートに表示する項目や種類によっては、cfchartのheightを500以上にすると、y軸の最大値が表示されない場合があります

<cfset stPlotarea=StructNew()>
<cfset stPlotarea["margin-top"]=30>
<cfset stPlotarea["margin-right"]=10>
<cfset stPlotarea["margin-left"]=50>
<cfset stPlotarea["margin-bottom"]=60>

<cfset stXAxis=StructNew()>
<cfset stXAxis["max-labels"]="100">
<cfset stXAxis["items-overlap"]="true">
<cfset stXAxis["item"]["font-size"]="10">
<cfset stXAxis["item"]["angle"]="-45">
<cfset stXAxis["item"]["max-chars"]="20">

<cfset stYAxis=StructNew()>
<cfset stYAxis["line-color"]="##cccccc">
<cfset stYAxis["line-width"]="2">
<cfset stYAxis["tick"]["line-color"]="##cccccc">
<cfset stYAxis["tick"]["size"]="10">
<cfset stYAxis["tick"]["line-width"]="1">
<cfset stYAxis["tick"]["line-gap-size"]="0">
<cfset stYAxis["minValue"]="0">
<cfset stYAxis["maxValue"]="100000">
<cfset stYAxis["step"]=20000>

<cfchart width="480" font="arialunicodeMS" format="html" title="売上実績グラフ" showLegend="false" xAxis="#stXAxis#" yAxis="#stYAxis#" plotarea="#stPlotarea#"> 
    <cfchartseries type="line">
      <cfloop from="1" to="12" index="i">
        <cfchartdata item="2015年#i#月" value=#RandRange(10000,100000)#> 
      </cfloop>
    </cfchartseries>
</cfchart>

⑫ Y2軸（右側）の項目線を調整する（2023.3.6 追加）

⇒

目盛りの最小・最大値の異なる2種類の項目を表示するチャートの場合、片方の項目をY2軸（右側）で表示するのは有効な手段ですが、左のY軸とY2軸の項目数が違う場合、両方の項目線によってチャート上に横線が増えて見づらくなる場合があります。左図の例では曲線グラフ（値は0～24のランダム値）の項目をY2軸で表示していますが、左軸の項目が6個に対して右側の項目が4個のため、互いの横線によって見づらくなっています。
対策としては、先の⑪の例のように、Y2軸で表示する項目数をY軸の項目数と同じになるように最小値・最大値・間隔を調整することでY軸・Y2軸両方の横線が同じ位置に重ね合わせることが出来ますが、上記の場合だと間隔が6（0,6,12,18,24,30）となるため、やっぱり10ずつの項目の方が分かりやすいという場合もあります。この場合は、Y2軸の横線を非表示（guideのvisibleをfalse）にすることが有効な方法です（Y2軸の見た目をY軸と同じにするため、下記にはその設定も含まれています）。

<cfset stPlotarea=StructNew()>
<cfset stPlotarea["margin-top"]=30>
<cfset stPlotarea["margin-right"]=10>
<cfset stPlotarea["margin-left"]=50>
<cfset stPlotarea["margin-bottom"]=60>

<cfset stXAxis=StructNew()>
<cfset stXAxis["max-labels"]="100">
<cfset stXAxis["items-overlap"]="true">
<cfset stXAxis["item"]["font-size"]="10">
<cfset stXAxis["item"]["angle"]="-45">
<cfset stXAxis["item"]["max-chars"]="20">

<cfset stYAxis=StructNew()>
<cfset stYAxis["line-color"]="##cccccc">
<cfset stYAxis["line-width"]="2">
<cfset stYAxis["tick"]["line-color"]="##cccccc">
<cfset stYAxis["tick"]["size"]="10">
<cfset stYAxis["tick"]["line-width"]="1">
<cfset stYAxis["tick"]["line-gap-size"]="0">
<cfset stYAxis["minValue"]="0">
<cfset stYAxis["maxValue"]="100000">
<cfset stYAxis["step"]=20000>

<cfset stYAxis2=StructNew()>
<cfset stYAxis2["guide"]["visible"]="false">
<cfset stYAxis2["line-color"]="##cccccc">
<cfset stYAxis2["line-width"]="2">
<cfset stYAxis2["tick"]["line-color"]="##cccccc">
<cfset stYAxis2["tick"]["size"]="10">
<cfset stYAxis2["tick"]["line-width"]="1">
<cfset stYAxis2["tick"]["line-gap-size"]="0">


<cfchart width="480" font="arialunicodeMS" format="html" title="売上実績グラフ" showLegend="false" xAxis="#stXAxis#" yAxis="#stYAxis#" yAxis2="#stYAxis2#" plotarea="#stPlotarea#"> 
    <cfchartseries type="line" scales="x,y">
      <cfloop from="1" to="12" index="i">
        <cfchartdata item="2015年#i#月" value=#RandRange(10000,100000)#> 
      </cfloop>
    </cfchartseries>
    <cfchartseries type="curve" scales="x,y2">
      <cfloop from="1" to="12" index="i">
        <cfchartdata item="2015年#i#月" value=#RandRange(1,24)#> 
      </cfloop>
    </cfchartseries>
</cfchart>

または、Y2軸の横線の表示スタイルを変更する方法もあります。guideのプロパティに横線のスタイルを指定する項目があります。例えば、下記の例では青の点線（透明度0.1）で表示する例です。

<cfset stPlotarea=StructNew()>
<cfset stPlotarea["margin-top"]=30>
<cfset stPlotarea["margin-right"]=10>
<cfset stPlotarea["margin-left"]=50>
<cfset stPlotarea["margin-bottom"]=60>

<cfset stXAxis=StructNew()>
<cfset stXAxis["max-labels"]="100">
<cfset stXAxis["items-overlap"]="true">
<cfset stXAxis["item"]["font-size"]="10">
<cfset stXAxis["item"]["angle"]="-45">
<cfset stXAxis["item"]["max-chars"]="20">

<cfset stYAxis=StructNew()>
<cfset stYAxis["line-color"]="##cccccc">
<cfset stYAxis["line-width"]="2">
<cfset stYAxis["tick"]["line-color"]="##cccccc">
<cfset stYAxis["tick"]["size"]="10">
<cfset stYAxis["tick"]["line-width"]="1">
<cfset stYAxis["tick"]["line-gap-size"]="0">
<cfset stYAxis["minValue"]="0">
<cfset stYAxis["maxValue"]="100000">
<cfset stYAxis["step"]=20000>

<cfset stYAxis2=StructNew()>
<!---<cfset stYAxis2["guide"]["visible"]="false">--->
<cfset stYAxis2["guide"]["lineStyle"]="dashed">
<cfset stYAxis2["guide"]["lineColor"]="blue">
<cfset stYAxis2["guide"]["lineWidth"]="1">
<cfset stYAxis2["guide"]["alpha"]="0.1">
<cfset stYAxis2["line-color"]="##cccccc">
<cfset stYAxis2["line-width"]="2">
<cfset stYAxis2["tick"]["line-color"]="##cccccc">
<cfset stYAxis2["tick"]["size"]="10">
<cfset stYAxis2["tick"]["line-width"]="1">
<cfset stYAxis2["tick"]["line-gap-size"]="0">


<cfchart width="480" font="arialunicodeMS" format="html" title="売上実績グラフ" showLegend="false" xAxis="#stXAxis#" yAxis="#stYAxis#" yAxis2="#stYAxis2#" plotarea="#stPlotarea#"> 
    <cfchartseries type="line" scales="x,y">
      <cfloop from="1" to="12" index="i">
        <cfchartdata item="2015年#i#月" value=#RandRange(10000,100000)#> 
      </cfloop>
    </cfchartseries>
    <cfchartseries type="curve" scales="x,y2">
      <cfloop from="1" to="12" index="i">
        <cfchartdata item="2015年#i#月" value=#RandRange(1,24)#> 
      </cfloop>
    </cfchartseries>
</cfchart>

情報

ZingChart の表示項目について
http://www.zingchart.com/blog/2011/11/16/tokens-in-tooltips-value-boxes-and-more/
ZingChart Builder
http://www.zingchart.com/builder/
Scale-Yのプロパティ
https://www.zingchart.com/docs/api/json-configuration/graphset/scale-y
Scale-Y・Itemのプロパティ
https://www.zingchart.com/docs/api/json-configuration/graphset/scale-y/item

※記事のカテゴリを「ColdFusion 11情報」から「技術情報」に変更しました。

記事公開日：2023年03月06日
最終更新日：2023年03月22日

Sample Modal Window

This is just a sample…