GrapeCity ActiveReports for .NET 16.0J
複合グラフ(クラシック)
ActiveReportsユーザーガイド > サンプルとチュートリアル > チュートリアル > ページレポート/RDLレポートのチュートリアル > グラフ > 縦棒グラフ(クラシック) > 複合グラフ(クラシック)

ChartClassicコントロールを使用することで、複合グラフを含んだページレポート/RDLレポートを作成することができます。複合グラフは、複数の系列を値軸に取るグラフで、系列ごとに異なる種類のグラフを表示することができます。ActiveReportsでは、複合グラフは最大6つの系列を含むことができます。組み合わせることのできるグラフの種類は以下のとおりです。

このチュートリアルでは、3つの値軸系列を持つ複合グラフの作成方法を順を追って説明します。このチュートリアルは、以下の作業手順に分かれています。

注意:

チュートリアルを完了すると、次のようなレポートが作成されます。

デザイン時のレイアウト

実行時のレイアウト

Visual StudioにActiveReportsのプロジェクトを作成する

  1. Visual Studioで新しいプロジェクトを開きます([ファイル]メニューから[新規作成][プロジェクト]を選択)。
  2. [新しいプロジェクト]ダイアログが開きます。[ActiveReports 16.0Jページレポート アプリケーション]を選択し、ファイル名を「rpt複合グラフ」に変更します。
  3. [OK]をクリックするとActiveReports 16.0Jページレポートアプリケーションが新規作成されます。プロジェクトにはデフォルトでページレポートが追加されています。レポートレイアウトの追加については、「クイックスタート」を参照してください。

レポートをデータソースに接続する

  1. [レポートエクスプローラ]で、[データソース]ノードを右クリックして[データソースの追加]オプションを選択するか、[追加](+)ボタンから[データソース]を選択します。
  2. 表示される[レポートデータソース]ダイアログで、[全般]ページを選択し、名前を「グラフデータ」に変更します。
  3. このチュートリアルでは、Reelsデータベースに接続します。接続の詳細については、「データソースとの接続」を参照してください。

データセットを追加する

  1. [レポートエクスプローラ]で、さきほど追加した「グラフデータ」データソースノードを右クリックして[データセットの追加]オプションを選択するか、[追加](+)ボタンをクリックした後、[データセット]を選択します。
  2. 表示される[データセット]ダイアログで、[全般]ページを選択し、名前を「店舗概況データ」に変更します。
  3. [データセット]ダイアログの[クエリ]ページで、クエリフィールドに次のSQLクエリを入力します。
    SQLクエリ
    コードのコピー
    SELECT * from StoreSummary
    
  4. クエリボックスの右上にある[データセットの検証]アイコンをクリックしてクエリを検証します。            
  5. [OK]をクリックしてダイアログを閉じます。データセットとクエリに入力した各フィールドの名前がノードとして[レポートエクスプローラ]に表示されます。

データを含んだグラフをレポートに追加する

  1. [レポートエクスプローラ][レポート]を選択し、[プロパティ]ウィンドウでPaperOrientationプロパティを「Landscape」に設定します。
  2. ツールボックスからChartデータ領域をドラッグして、レポートのデザイナ面にドロップします。
  3. 表示される[グラフの種類を選択してください。]ウィザードで[縦棒]を選択し、[プロパティ]ウィンドウで各プロパティを以下のように設定します。
    プロパティ名 プロパティの値
    Location 0in, 0in
    Size 7.5in, 4.5in
  4. グラフ領域内をダブルクリックして、グラフの上下端と右端に、フィールドを配置するためのユーザーインタフェースを表示します。
  5. [レポートエクスプローラ]から[StoreName]フィールドをドラッグし、グラフの下端の[カテゴリフィールドを配置してください。]と記された領域にドロップします。これにより、StoreNameフィールドが自動的にX軸にバインドされます。

  6. グラフを選択し、[プロパティ]ウィンドウの下にある[グラフ Y軸]コマンドを選択します。
  7. 表示される[値軸]ダイアログの値軸タブで、値軸のタイトル]プロパティを「売上高」に設定します。
  8. [追加](+)ボタンをクリックして2つ目のY軸を追加します。[値軸のタイトル]プロパティを「総利益」に、余白プロパティを「0.8in」に設定します。
  9. [追加](+)ボタンをクリックして3つ目のY軸を追加します。[値軸のタイトル]プロパティを「販売数量」に、[値軸の横位置]プロパティを「Right」に設定します。
  10. [OK]ボタンをクリックしてダイアログを閉じます。
  11. グラフを選択し、[プロパティ]ウィンドウの下にある[データ]コマンドを選択します。
  12. [系列]ページを選択します。[追加](+)ボタンをクリックして1つ目のY軸の系列を追加し、各プロパティを以下のように設定します。
    プロパティ名 プロパティの値
    系列名 売上高
    =[GrossSales]
    グラフの種類 エリア プレーン
    値軸 Y1
  13. [追加](+)ボタンをクリックして2つ目のY軸の系列を追加し、各プロパティを以下のように設定します。
    プロパティ名 プロパティの値
    系列名 総利益
    =[GrossProfit]
    グラフの種類 折れ線 プレーン
    値軸 Y2
  14. [追加](+)ボタンをクリックして3つ目のY軸の系列を追加し、各プロパティを以下のように設定します。
    プロパティ名 プロパティの値
    系列名 販売数量
    =[TotalItems]
    グラフの種類 縦棒 プレーン
    値軸 Y3
  15. [OK]ボタンをクリックしてダイアログを閉じます。

グラフの外観を構成する

  1. グラフを選択し、[プロパティ]ウィンドウの下にある[外観]コマンドを選択します。
  2. 表示される[Chart 外観]ダイアログで[タイトル]ページを開き、タイトルフィールドに「店舗概況」と入力します。
  3. [パレット]ページを開き、[パレット]ドロップダウンから「Pastel」を選択します。
  4. [OK]ボタンをクリックしてダイアログを閉じます。
  5. グラフを選択し、[プロパティ]ウィンドウの下にある[グラフ X軸]コマンドを選択します。
  6. 表示される[グラフ カテゴリ軸 - タイトル]ダイアログで、各プロパティを以下のように設定します。
    プロパティ名 プロパティの値
    カテゴリ軸のタイトル 店舗名
    サイズ 6pt
  7. [OK]ボタンをクリックしてダイアログを閉じます。
  8. グラフを選択し、[プロパティ]ウィンドウの下にある[グラフ Y軸]コマンドを選択します。
  9. 値軸のリストから「Y1」を選択し、値軸タブで[文字の方向]ドロップダウンから「Stacked」を選択します。これにより、この値軸の文字列が縦書きに切り替わります。次に、[ラベル]タブで[値軸のラベルを表示]チェックボックスを選択します。また、[書式設定]ドロップダウンから「Currency」を選択します。
  10. 「Y2」に対して手順9の『[値軸]タブで~』以降の手順をくり返します。
  11. 値軸のリストから「Y3」を選択し、値軸タブで[文字の方向]ドロップダウンから「Stacked」を選択します。次に、[ラベル]タブで[値軸のラベルを表示]チェックボックスを選択します。
  12. [OK]ボタンをクリックしてダイアログを閉じます。

レポートを表示する

あるいは