ActiveReports for .NET 18.0J
ファンネルチャートの作成
ActiveReportsユーザーガイド > 概念 > ページレポート/RDLレポートの概念 > ページレポート/RDLレポートのレポートコントロール > Chart > プロット > ファンネルとピラミッドチャート > ファンネルチャートの作成

以下のトピックでは、ファンネルチャートを作成する方法を紹介します。このチャートは、関連するさまざまな値がどのように積み重ねられているか、どのように配置されているかを示します。たとえば、このチュートリアルでは販売プロセスのファンネルチャートを表し、組織内の訪問者数、潜在顧客、総合的品質管理、顧客を示しています。訪問者数はWebサイトの訪問者の総数を表し、潜在顧客は潜在的な訪問者の数を表し、顧客は顧客数、総合的品質管理は顧客満足度を高める活動を示しています。

最終的なチャートは次のようになります。このチャートは、理想的なマーケティングセールスファンネルによく似ていて、Webサイトの訪問者、潜在顧客、総合的品質管理、顧客を表示します。

Funnel Chart

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

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

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

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

データソースを追加する

  1. [レポートデータソース]ダイアログで[全般]ページを選択し、名前を「NwindDataSource」に変更します。
  2. 種類を「Json Provider」に設定します。
  3. [コンテンツ]タブに移動し、JSONデータの形式の選択を「埋め込み」に設定します。
  4. [埋め込むファイル/URLの選択、またはデータの入力]フィールドに、次のデータを入力します。

    JSONデータ

    コードのコピー
    {
       "data":{
          "values":[
             {
                "タイプ":"顧客",
                "人数":91658
             },
             {
                "タイプ":"総合的品質管理",
                "人数":200400
             },
             {
                "タイプ":"潜在顧客",
                "人数":360470
             },
             {
                "タイプ":"訪問者数",
                "人数":550000
             }
          ]
       }
    }
    
    詳細については、「JSON Provider」を参照してください。
  5. クエリを検証するために、クエリボックスの横にある[データセットの検証]アイコンをクリックします。
  6. [OK]をクリックして変更を保存します。

データセットを追加する

  1. [データセット]ダイアログで、[全般]ページを選択し、[名前]フィールドに「SaleStages」と入力します。
  2. [データセット]ダイアログの[クエリ]ページで、[クエリ]フィールドに次のクエリを入力します。
    データセットクエリ
    Copy Code
    $.data.values[*]
       
  3. クエリを検証するために、クエリボックスの横にある[データセットの検証]アイコンをクリックします。
  4. [OK]をクリックして変更を保存します。

チャートを作成する

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

  1. Chartコントロールをレポートのデザイン面にドラッグ&ドロップします。チャートウィザードが表示され、データセットとチャートの種類を選択できます。
  2. データセット名を「SaleStages」に設定し、[種類の設定]を「ファンネル」に設定します。
  3. [次へ]をクリックします。
  4. [データ]では、新しい値を追加し、[フィールド]を「=[人数]」に設定します。
  5. [カテゴリ]では、[フィールド]を「=[タイプ]」に設定し、[内訳]を「Stacked」に設定します。
  6. [次へ]をクリックして、グラフをプレビューします。
     Funnel Chart - Preview
    プレビュー画面では、チャートのパレットを変更したり、その他のカスタマイズを行うこともできます。または、以下で説明するように、ウィザードを終了してこれらのスマートパネルにアクセスできます。 

カスタマイズを設定する

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

プロット

  1. プロットの詳細設定用のスマートパネルを開くには、レポートエクスプローラで[プロット-Plot1]を右クリックし、[プロパティ設定ダイアログ]を選択します。
  2. [エンコード]ページに移動し、[詳細]タブで、が「=[タイプ]」に設定されていることを確認します。[並べ替え]フィールドから値を削除します。
  3. [外観]ページに移動して、次のプロパティを設定します。
    • 棒 > 下部の幅:15%
    • 棒 > ネック位置:20%
    • 共通 > 透明度:70%
  4. [全般]タブを選択し、次のプロパティを設定します。
    • テンプレート:{detailFields.value}
    • 位置:Center
    • 重なり調整:Auto
  5. [外観]タブを選択し、次のプロパティを設定します。
    • フォント > サイズ:10pt
    • フォント > 色:DimGray
  6. [OK]をクリックして、プロットの設定を完了します。

Y軸

  1. Y軸の詳細設定用のスマートパネルを開くには、レポートエクスプローラで[Y軸 - [Plot1]]を右クリックし、[プロパティ設定ダイアログ]を選択します。
  2. [タイトル]ページに移動し、[タイトル]フィールドからテキストを削除して、グラフのY軸のタイトルを非表示にします。
  3. [ラベル]ページに移動し、[全般]タブを選択し、書式を「Default」に設定します。
  4. [外観]タブを選択し、次のプロパティを設定します。
    • フォント > サイズ:8pt
    • フォント > 色:DimGray
  5. [軸線]ページに移動し、[軸を表示する]オプションのチェックボックスをオフにします。
  6. [主グリッド線]ページに移動し、次のプロパティを設定します。
    • グリッド線 > グリッド線を表示する:オンにします。
    • グリッド線 > 幅:1pt
    • グリッド線 > 色:WhiteSmoke
    • グリッド線 > スタイル:Solid
  7. [スケール]ページに移動し、[スケールタイプ]を「Linear」に設定します。
  8. [OK]をクリックして、Y軸の設定を完了します。

X軸

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

チャートパレット

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

ヘッダ

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