アクセシビリティ
デベロッパーリソース

目次

ColdFusion Report Builderの使用 – パート2:レポート内のチャートの作成

インタラクティブなチャート作成の例

このセクションには、ColdFusionレポートでのチャートの作成方法を学習するために実行できる作業手順の例が含まれています。この例は、直前のチュートリアル「ColdFusion Report Builderの使用—パート1:レポートおよびサブレポートの作成」の例を拡張したものです。最初の演習を完了することにより、次の演習に必要なCFRファイルを取得できます。最初の記事のサンプルファイルにバンドルされたレポートを使用することもできます。

このチュートリアルでは、ColdFusion MX 7とともにサンプルアプリケーションをインストールしているものとします。cfdocexamplesデータベースを指定するcfdocexamplesデータソースを使用します。ColdFusionサンプルアプリケーションをインストールしていない場合は、ColdFusionインストーラをもう一度実行し、サンプルアプリケーションをインストールするオプションを選択してください。

Report Builderのチャートコンポーネント

ColdFusion MX 7 Report Builderには、チャートコンポーネントがツールボックスに含まれるので、チャートを簡単に作成できます。図4のReport Builderのツールボックスで選択されているチャートコンポーネントを参照してください。

チャートコンポーネントが選択されたReport Builderのツールボックス

図4.チャートコンポーネントが選択されたReport Builderのツールボックス

チャートコンポーネントを選択し、ステージの上にドラッグすると、チャートウィザードが表示されます。ここで次の内容を設定できます。

  1. 希望するチャートのタイプ(円、棒、折れ線など)
  2. データをチャートにバインドする方法
  3. チャートをフォーマットする方法(フォント、外観、一般的な美しさ)

次の手順に従って、例を使用してチャートを設定します。

チャートサンプル

ColdFusionサーバサンプルアプリケーションをインストールしたら、次の手順に従ってチャートを作成します。

  1. このチュートリアルの「必要条件」のセクションにあるサンプルファイルのCompany-Departments.cfrレポートとDepartment-Employees.cfrレポートをダブルクリックします。ColdFusion Report Builderが開きます。ColdFusion Report Builderをインストールしていない場合は、「必要条件」のセクションの手順に従ってインストールします。
  2. Company-Departments.cfrおよびDepartment-Employees.cfrレポートをColdFusion Webルートに保存します。ColdFusionサーバを通じてこれらのレポートを正しく参照していることを確認してください。これを確認するには、レポートメニューに移動し、Report/Report Propertiesを選択します。「Report Preview URL」フィールドにhttp://localhost:8500/reporting/charting_example/Company-Departments.cfrに類似したURLが表示されます。ポートは、ColdFusionのインストールに応じて異なります。
  3. Company-Departments.cfrレポートをハイライト表示し、このレポートをプレビューして、すべてが適切に設定されたことを確認します。F12キーを押します。レポートが実行されます。問題が発生する場合は、データソースとReport Propertiesの設定をダブルチェックして、すべてが正しく設定されていることを確認します。
  4. レポートヘッダセクションの左側のベージュ色の部分をクリックして、このセクションをハイライト表示します。
  5. プロパティインスペクタのheightプロパティをハイライト表示します。heightプロパティにと入力して、高さインチを指定します。
  6. 図4に示すチャートコンポーネントをクリックします。レポートセクションの左上から右下までカーソルをドラッグします(この時点では、コンポーネントのサイズは気にしないでください)。チャートウィザードが表示されます。図5を参照してください。

    Report Builderのチャートウィザード

    図5.Report Builderのチャートウィザード

  7. 「Base Chart Type」として「Pie」を選択し、「次へ」をクリックします。
  8. 「Add」ボタンをクリックします。チャート系列ダイアログボックスが表示されます。
  9. 「系列ラベル」テキストボックスにDepartment Salariesと入力します。
  10. 「Data from a Query」ラジオボタンをクリックします。「クエリービルダー」ボタンが使用できるようになります。
  11. 「クエリービルダー」ボタンをクリックします。クエリービルダーが起動します。
  12. 左側ペインのcfdocexamplesデータソースに移動し、「テーブル」セクションを開きます(複数のテーブルリストが表示される)。
  13. 「Employee」テーブルと「Departmt」テーブルをダブルクリックします。この時点では、いずれのテーブルも、クエリービルダーの列グリッドの上に表示されます。
  14. 「Departmt」テーブルの「Dept_Name」フィールドをダブルクリックします(SQLコードを入力する必要がある)。
  15. 「Employee」テーブルの「Salary」フィールドをダブルクリックします。
  16. 「Departmt」テーブルの「Dept_ID」フィールドをダブルクリックします。
  17. クエリーグリッドで、「Dept_ID」の「Output」オプションの選択を解除して、クエリーの結果に表示しないようにします。
  18. クエリーグリッドの「Condition」列の「Salary」フィールドが含まれる行で、ポップアップリストから「合計」を選択します。
  19. クエリーグリッドの「Criteria」列の「Dept_ID」が含まれる行で、「= value」を選択します。
  20. SQLコードで、リテラルvalueを上書きしてEmployee.Dept_IDに置き換えます。
  21. クエリーグリッドの「Condition」列の「Dept_Name」行で、ポップアップリストから「Group By」を選択します。この結果、次のような正しい形式のSQLステートメントが作成されます。

    					
    SELECT    Departmt.Dept_Name, SUM(Employee.Salary) AS Sum_Salary
    FROM      Employee, Departmt 
    WHERE     (Departmt.Dept_ID = Employee.Dept_ID)
    GROUP BY Departmt.Dept_Name
    
  22. 結果が正しいかどうかを確認するため、「クエリーのテスト」ボタンをクリックします。「Department」によりグループ化された給与の合計が表示されます。結果ウィンドウを閉じます。
  23. 「保存」ボタンをクリックします。
  24. チャート系列にバインドするSQLクエリーのフィールドを識別します。「ラベル列」ポップアップメニューの「Dept_Name」を選択します。「Value Column」ドロップダウンリストの「Sum_Salary」を選択します。
  25. 「OK」をクリックします。
  26. 「次へ」をクリックします。
  27. 「次へ」をもう一度クリックします。ここで、チャートの外観やデザインを調整するパラメータを変更できます。
  28. 「3D表示」タブをクリックします。
  29. 「Show 3D」チェックボックスをオンにします。
  30. 「終了」をクリックします。
  31. チャートコンポーネントをハイライト表示し、高さプロパティを3.5に調整することにより、チャートの高さを3.5インチに調整します。
  32. F12キーを押して、新しいチャートでレポートをプレビューします。これで新しい円グラフが表示されます。
  33. レポートを閉じます。円グラフには部署ごとにラベルが付いていますが、強調するデータはありません。SQLコードを追加して、データを加えます。
  34. チャートコンポーネントをダブルクリックします。編集用にチャートウィザードが表示されます。
  35. 「次へ」をクリックします。
  36. 「Department Salaries」シリーズを選択し、「編集」をクリックします。
  37. 「クエリービルダー」ボタンをクリックします。
  38. SELECT節をコピーして、新しいコードでSELECT節を上書きします。これは、「SELECT」から「FROM」までの語のすべてです(または、オプションでこのコードを入力することもできます。正しく機能することが実証されているコードをコピーして貼り付けると簡単なことが経験によりわかっています。新しいコードを入力すると、エラーが発生することがあります)。

    SELECT	Departmt.Dept_Name & ' ' & 
    round((SUM(Employee.Salary)/(select sum(Employee.Salary) from Employee)) * 100, 1) & '%' as sal, 
    SUM(Employee.Salary) AS Sum_Salary
    

    この新しいSELECT節は、シリーズラベルに意味を追加するための単なる想像上の方法です。サブクエリーと呼ばれる技術をいくつかの単純なSQLの算術と組み合わせて、部署ごとのパーセンテージのグループを(適切なラベルとともに)生成できます。このクエリーは、ROUND関数を使用して読みやすいフォーマットを生成しています。Microsoft Accessでアンパサンドを使用して、レコードセットの文字列リテラルを結合することができます。クエリービルダは図6のように表示されます。

    最終的なSQLクエリー

    図6.最終的なSQLクエリー

    (+)拡大表示

  39. もう一度「クエリーのテスト」ボタンをクリックし、クエリーが正しく動作することを確認します。部署ごとの給与のグループが、パーセンテージを含むラベルとともに表示されます。結果ウィンドウを閉じます。
  40. [保存] をクリックします。
  41. 「ラベル列」のsalを選択します。
  42. 「OK」をクリックします。
  43. 「次へ」をクリックします。
  44. 「Titles & Series」タブをクリックします。
  45. 「Chart Title」テキストにDepartment Salariesと入力します。「終了」をクリックします。
  46. F12キーを押してレポートをプレビューします。レポートヘッダのチャートが図7のように表示されます。
最終的なチャート

図7.最終的なチャート

これで完成です。レポートから最初のColdFusionチャートを正しく作成できました。

高度なリソース

この記事を読み終えると、ColdFusion Report Builderのチャートコンポーネントの使用方法を学ぶことができます。チャートウィザードと最小限のコードおよび設定を使用して、さまざまなタイプのチャートをすばやく簡単に作成できるようになります。ここでは、クエリービルダーを使用してSQLコードを簡単に生成し、変更する方法について説明してきました。Report Builderウィザードのチャートオプションに慣れるまでに時間はかかりません。クエリーを管理できるだけではなく、チャートの美的特性も制御できます。ほとんどのColdFusionの開発と同様に、レポートとチャートの作成が比較的簡単な作業になることがわかります。