GrapeCity ActiveReports for .NET 16.0J
積層ポーラーチャートの作成
ActiveReportsユーザーガイド > 概念 > ページレポート/RDLレポートの概念 > ページレポート/RDLレポートのレポートコントロール > Chart > プロット > ポーラーチャート > 積層ポーラーチャートの作成

以下のトピックでは、積層ポーラーチャートを作成する方法を紹介します。このチャートは、商品カテゴリごとの各販売チャネルの販売額を示します。積層ポーラーチャートでは、データ値はサブカテゴリに分類され、互いに重なり合わせて表示されます。最終的なチャートは次のようになります。

Stacked Polar Chart Final

新しいレポートを作成する

デザイナアプリにて、[ファイル]メニューをクリックし、 [RDLレポート] を選択して、新しいレポートを作成します。

レポートをデータ連結しデータセットを追加する

[データソースウィザードを開く]オプションをオンにすると、新しいレポートを作成するときに[レポートデータソース]ダイアログが表示されます。このダイアログは、レポートエクスプローラで[データソース]ノードを右クリックして、[データソースの追加]のオプションを選択する時も表示されます。

データソースを追加する

  1. [レポートデータソース]ダイアログで[全般]ページを選択し、名前を「NwindDataSource」に変更します。
  2. 種類を「Json Provider」に設定します。
  3. [コンテンツ]タブに移動し、JSONデータの形式の選択を「外部ファイルまたはURL」に設定します。
  4. [ファイル/URLの選択または入力]フィールドに、次のURLを入力します。
    https://demodata-jp.grapecity.com/contoso/odata/v1/FactSales
    詳細については、「JSON Provider」を参照してください。
  5. [接続文字列]タブに移動し、[データソースを確認]Validate Iconアイコンをクリックして、生成された接続文字列を確認します。
  6. [OK]をクリックして変更を保存し、[データセット]ダイアログを開きます。

データセットを追加する

  1. [データセット]ダイアログで、[全般]ページを選択し、[名前]フィールドに「FactSales」と入力します。
  2. [データセット]ダイアログの[クエリ]ページで、[クエリ]フィールドに次のクエリを入力します。
    データセットクエリ
    コードのコピー
    $.value[*]
  3. クエリを検証するために、クエリボックスの横にある[データセットの検証]アイコンをクリックします。
  4. [フィールド]ページに移動して使用可能なフィールドを表示し、[SalesAmount]フィールドの名前を[売上高]に変更します。
  5. 同じページに、2つの計算フィールドを追加します。
    名前
    商品カテゴリ =Switch([ProductKey] < 116, "オーディオプレーヤー", [ProductKey] >= 116 And [ProductKey] < 338, "テレビとビデオ", [ProductKey] >= 338 And [ProductKey] < 944, "コンピュータ", [ProductKey] >= 944 And [ProductKey] < 1316, "カメラ", [ProductKey] >= 1316, "携帯電話")
    販売チャネル =Switch([ChannelKey] = 1, "店舗", [ChannelKey] = 2, "オンライン", [ChannelKey] = 3, "カタログ", [ChannelKey] = 4, "再販業者")
  6. [フィルタ]ページに移動し、新しいフィルタを追加し、そのプロパティを次のように設定します。
    演算子 値 > 式
    =[販売チャネル] NotEqual 1
    =[ProductKey] GreaterThan 338
  7. [OK]をクリックして変更を保存します。

チャートを作成する

チャートウィザードを使用して、チャートのデータ値を構成し、チャートをカスタマイズします。レポートがデータセットに接続している場合、チャートウィザードは自動的に表示されます。詳細については、「チャートウィザード」を参照してください。

  1. Chartコントロールをレポートのデザイン面にドラッグ&ドロップします。チャートウィザードが表示され、データセットとチャートの種類を選択できます。
  2. データセット名を「FactSales」に設定し、[種類の設定]を「ポーラー」に設定します。
  3. [次へ]をクリックし、さまざまな販売チャネルの売上高を表示するためのデータ値を定義します。
  4. [データ]では、商品カテゴリごとの売上高を表示するためのデータ値を定義します。
    フィールド 集計
    =[売上高] Sum
  5. [カテゴリ]では、フィールドを「=[販売チャネル]」に設定します。
  6. [次へ]をクリックして、グラフをプレビューします。
     Stacked Polar Chart Wizard Settings
    プレビュー画面では、チャートのパレットを変更したり、その他のカスタマイズを行うこともできます。または、以下で説明するように、ウィザードを終了してこれらのスマートパネルにアクセスできます。

カスタマイズを設定する

グラフがデータ値で構成されたので、スマートパネルを使用して、グラフ要素をカスタマイズします。

プロット

  1. プロットの詳細設定用のスマートパネルを開くには、レポートエクスプローラで[プロット-Plot1]を右クリックし、[プロパティ設定ダイアログ]を選択します。
  2. [カテゴリ]ページに移動し、販売チャネルを売上高の昇順で並べ替えます。次の設定を入力します。
    フィールド 設定
    対象フィールド =[売上高]
    方向 Ascending
    集計 Sum
  3. [エンコード]ページに移動し、[詳細]タブで、新しい値を追加し、そのプロパティを次のように設定します。
    1. を=[商品カテゴリ]に設定して、携帯電話、コンピュータ、カメラ、テレビとビデオ、およびオーディオなどのさまざまな販売カテゴリの売上高を表示します。
    2. [グループ化]内の[グループ]を「Stack」に設定します。
  4. [カラー]タブに移動し、新しい値を追加し、[式]を「=[商品カテゴリ]」に設定します。
  5. [ラベル]ページに移動し、[全般]タブを選択し、次のプロパティを設定します。
    • テンプレート:{categoryField.value}
    • 位置:Outside
    • オフセット:30
  6. [外観]タブを選択して、次のプロパティを設定します。
    • フォント > 色:Black
    • フォント > サイズ:12pt
    • 引き出し線 > スタイル:Dotted
    • 引き出し線 > 色:Gainsboro
    • 引き出し線 > 幅:0.25pt
  7. [OK]をクリックして、プロットの設定を完了します。
  8. [プロット-Plot1]を選択した状態で、[プロパティ]ウィンドウに移動し、StartAngleプロパティを「90」に設定して、プロットの開始角度を設定します。

Y軸

  1. Y軸の詳細設定用のスマートパネルを開くには、レポートエクスプローラで[Y軸 - [Plot1]]を右クリックし、[プロパティ設定ダイアログ]を選択します。
  2. [タイトル]ページに移動し、[タイトル]フィールドからテキストを削除して、グラフのY軸のタイトルを非表示にします。
  3. [ラベル]ページに移動し、[全般]タブを選択し、次のプロパティを設定します。
    • 書式:Currency(最小桁数0)
    • 角度:-90
  4. [外観]タブを選択し、次のプロパティを設定します。
    • フォント > サイズ:12pt
    • フォント > 色:Black
  5. [軸線]ページに移動し、[軸を表示する]オプションのチェックボックスをオフにします。
  6. [主グリッド線]ページに移動し、次のプロパティを設定します。
    • 間隔:200000
    • グリッド線 > グリッド線を表示する:オンにします。
    • グリッド線 > 幅:0.25pt
    • グリッド線 > 色:#cccccc
    • グリッド線 > スタイル:Dashed   
  7. [OK]をクリックして、Y軸の設定を完了します。

X軸

  1. X軸の詳細設定用のスマートパネルを開くには、レポートエクスプローラで[X軸 - [Plot1]]を右クリックし、[プロパティ設定ダイアログ]を選択します。
  2. [タイトル]ページに移動し、[タイトル]フィールドからテキストを削除して、グラフのX軸のタイトルを非表示にします。
  3. [ラベル]ページに移動し、[ラベルを表示する]オプションのチェックボックスをオフにします。
  4. [軸線]ページに移動し、[軸を表示する]オプションのチェックボックスをオフにします。
  5. [主グリッド線]ページに移動し、[グリッド線を表示する]オプションのチェックボックスをオフにします。
  6. [OK]をクリックして、X軸の設定を完了します。

チャートパレット

  1. グラフの詳細設定用のスマートパネルを開くには、レポートエクスプローラで[Chart1]を右クリックし、[プロパティ設定ダイアログ]を選択します。
  2. [パレット]ページで、ドロップダウンから「Custom」を選択し、次の色を追加します。
    • #f26324
    • #1fd537
    • #e40010
  3. [OK]をクリックして、カスタムパレットの設定を完了します。

凡例-Color

  1. 凡例のスマートパネルを開くには、レポートエクスプローラーで[凡例-Color]を右クリックし、[プロパティ設定ダイアログ]を選択します。
  2. [レイアウト]ページに移動して、次のプロパティを設定します。
    • 位置:Top
    • レイアウト:Horizontal
  3. [外観]ページに移動して、次のプロパティを設定します。
    • フォント > サイズ:12pt
    • フォント > 色:DimGray
  4. [OK]をクリックして、グラフの凡例の設定を完了します。

ヘッダ

  1. グラフヘッダのスマートパネルを開くには、レポートエクスプローラで[ヘッダ]を右クリックし、[プロパティ設定ダイアログ]を選択します。
  2. [全般]ページに移動し、[タイトル]を「商品カテゴリおよび販売チャネル別売上高」に設定します。
  3. [フォント]ページに移動し、次のプロパティを設定します。
    • サイズ:24pt
    • :#3da7a8
  4. [OK]をクリックして、グラフヘッダの設定を完了します。
    必要に応じて、グラフのサイズを変更することができます。
       Stacked Polar Chart at Design Time
  5. チャートの構成とカスタマイズが完了したら、レポートをプレビューします。