ColdFusion-開発効率を求められる今だから知りたい高性能Webアプリケーションサーバー

第4回 ColdFusionでグラフを描く

この記事を読むのに必要な時間:およそ 5 分

クエリーのデータを描画する

ColdFusionでは,もちろんクエリーなどの動的なデータも描画することができます。前回の連載で使用したcfartgalleryデータソースのartテーブルに保存されているデータを描画してみることにしましょう。artテーブルの情報は以下の通りです。

列名備考
artIDintプライマリーキー
artistIDintartistテーブルのプライマリーキー値
artNamevarchar商品名
descriptionclob商品の説明
isSoldint商品が売れたかどうか
largeImagevarchar商品の画像へのパス
mediaIDintmediaテーブルのプライマリーキー値
priceint商品の価格

今回は『mediaID』ごとにいくつ在庫があるかをグラフにしてみることにします(isSoldが0の場合,売却が決まっていない在庫になります)⁠以下のコードをcfchart2.cfmとして保存し,実行してみましょう。

<cfprocessingdirective pageEncoding="UTF-8" />
<cfcontent type="text/html; charset=UTF-8">
<!DOCTYPE html PUBLIC "-//W3C/DTD HTML 4.01 Transitional//EN">
<cfquery datasource="cfartgallery" name="qry">
  SELECT
    COUNT(art.artID) AS num, art.mediaID
  FROM
    art
  WHERE
    isSold = 0
  GROUP BY
    mediaID
</cfquery>
<title>メディアIDごとの在庫数</title>
<cfchart format="flash" chartheight="200" chartwidth="440" font="arialunicodeMS" xAxisTitle="メディアID " yAxisTitle="個">
  <cfchartseries type="bar" seriesLabel="在庫" >
    <cfloop query="qry">
      <cfchartdata item="#qry.mediaID#" value="#qry.num#">
    </cfloop>
  </cfchartseries>
</cfchart>

図2 cfchart2.cfmの実行結果

図2 cfchart2.cfmの実行結果

cfloopタグでクエリー(qry)に含まれているデータの個数だけcfchartdataタグを繰り返すようにしています。また,cfchartdataタグのitem属性とvalue属性にはクエリーのデータを渡したいため,シャープマークで囲っていることに注意してください。⁠#qry.mediaID#』『クエリーqryの列名「mediaID」のデータを取り出す』という意味になります。シャープマークで囲わない場合,qry.mediaID」という文字列を渡す』という意味になります。

なお,クエリーのデータをそのまま使う場合,cfchartseriesタグのquery属性に描画対象のデータを含むクエリーオブジェクトを渡し,itemColumn属性でX軸の項目名にするクエリーの列名,valueColumn属性でY軸の値にするクエリーの列名を指定することができます。以下のコードは本質的にcfchart2.cfmと同等です。

<cfprocessingdirective pageEncoding="UTF-8" />
<cfcontent type="text/html; charset=UTF-8">
<!DOCTYPE html PUBLIC "-//W3C/DTD HTML 4.01 Transitional//EN">
<cfquery datasource="cfartgallery" name="qry">
  SELECT
    COUNT(art.artID) AS num, art.mediaID
  FROM
    art
  WHERE
    isSold=0
  GROUP BY
    mediaID
</cfquery>
<title>メディアIDごとの在庫数</title>
<cfchart format="flash" chartheight="200" chartwidth="440" font="arialunicodeMS" xAxisTitle="メディアID " yAxisTitle="個">
  <cfchartseries type="bar" query="qry" itemColumn="mediaID" valueColumn="num" seriesLabel="在庫" ></cfchartseries>
</cfchart>

また,売却済み(isSold=1)のものと購入可能なもの(isSold=0)をグラフ化することもできます。上のコードを元にクエリーをもう一つ発行し、cfchartseriesタグを追加するだけです。以下の例をchchart3.cfmとして保存し,実行してみましょう。

<cfprocessingdirective pageEncoding="UTF-8" />
<cfcontent type="text/html; charset=UTF-8">
<!DOCTYPE html PUBLIC "-//W3C/DTD HTML 4.01 Transitional//EN">
<cfquery datasource="cfartgallery" name="qrySold">
  SELECT
    COUNT(art.artID) AS num, art.mediaID
  FROM
    art
  WHERE
    isSold = 1
  GROUP BY
    mediaID
</cfquery>
<cfquery datasource="cfartgallery" name="qryNotSold">
  SELECT
    COUNT(art.artID) AS num, art.mediaID
  FROM
    art
  WHERE
    isSold = 0
  GROUP BY
    mediaID
</cfquery>
<title>メディアIDごとの在庫状況</title>
<cfchart format="flash" showLegend="true" chartheight="200" chartwidth="440" font="arialunicodeMS" xAxisTitle="メディアID" yAxisTitle="個">
  <cfchartseries type="bar" query="qrySold" itemColumn="mediaID" valueColumn="num" seriesLabel="売約済み" />
  <cfchartseries type="bar" query="qryNotSold" itemColumn="mediaID" valueColumn="num" seriesLabel="購入可能" />
</cfchart>

図3 cfchart3.cfmの実行結果

図3 cfchart3.cfmの実行結果

attributeCollectionでタグに属性をまとめて渡す

cfchartタグやcfchartseriesタグには指定できる属性が多数あります。それらをいちいち指定するのが面倒くさい場合,構造体(他の言語の連想配列に相当します)「属性名=属性値」を設定し,その構造体をattributeCollection属性として渡すことで,個別に属性を指定するのと同じ事ができます。なお,attributeCollection属性はcfchartタグだけでなく,cfqueryタグなど大抵のCFMLタグに渡すことができます。

<cfprocessingdirective pageEncoding="UTF-8" />
<cfcontent type="text/html; charset=UTF-8">
<!DOCTYPE html PUBLIC "-//W3C/DTD HTML 4.01 Transitional//EN">
<cfquery datasource="cfartgallery" name="qry">
  SELECT
    COUNT(art.artID) AS num, art.mediaID
  FROM
    art
  GROUP BY
    mediaID
</cfquery>
<title>メディアIDごとの在庫数</title>
<cfset attrCollection = {format="flash", chartheight=200, chartwidth=400, font="arialunicodeMS", xAxisTitle="メディアID", yAxisTitle="個"}>
<cfchart attributeCollection="#attrCollection#">
  <cfchartseries type="bar" query="qry" itemColumn="mediaID" valueColumn="num"></cfchartseries>
</cfchart>

なお,上の例でattrCollection構造体を作成するのに使用したシンタックスはColdFusion 8から導入されたものです。ColdFusion 8以前で同様のことを使用とした場合,以下のようなCFMLになります。

<cfset attrCollection = StructNew()>
<cfset attrCollection.format = "flash">
<cfset attrCollection.chartheight = 200>
<cfset attrCollection.chartwidth = 400>
<cfset attrCollection.font = "arialunicodeMS">
<cfset attrCollection.xAxisTitle = "mediaID">
<cfset attrCollection.yAxisTitle = "個">

まとめと次回予告

今回はColdFusionでグラフを描画する方法を学びました。他の言語でグラフを描画するにはメソッドを多数呼び出したり,データを配列に入れるなどの繁雑な作業が必要ですが,ColdFusionではcfchartタグ,cfchartseriesタグ,cfchartdataタグを使用し,HTMLのテーブルを作成するのと同じような感覚でグラフを描画できることが分かりました。

また,ColdFusion 8から,多数の属性を渡す必要があるタグについては,⁠属性名=属性値」を持った構造体をattributeCollection属性に渡すことで,多数の属性を指定する手間を省くことができることが分かりました。

次回は,HTMLのフォームなどから渡された値をColdFusionで処理する方法を学びます。

著者プロフィール

酒井克幸(さかいかつゆき)

フリーのテクノロジーコンサルタント。サーバー選定やネットワーク設計などハードウェアレイヤーから,Webアプリケーションの実装(サーバーサイド,クライアントサイド共)などのソフトウェアレイヤーまでの幅広い経験を活かし,クライアント企業のWebアプリケーション構築支援を行っている。殊にAdobe製品(特にMacromedia)製品には精通している。

ブログcyano(シアノ)