バージョン

ドリルダウン グラフの設定

このトピックは、データの詳細を徐々に提示するためのドリルダウン設定方法について説明します。グラフのひとつまたはすべての要素は、ユーザーが要素をクリックでき、同じグラフ タイプまたは異なるグラフ タイプに、そしてアプリケーションが必要とする深さに対してドリルダウンが可能です。

以下はトピック全体で使用される用語のリストです。

  • ドリル レベル — ユーザーがドリルダウンする深さは、トップレベルのグラフでは 0 から増分します。

  • 親グラフ — ユーザーがドリル可能なグラフ要素をクリックした場合の Chart。親グラフはより全般的な情報を表示します。

  • 子グラフ — ユーザーがドリルダウン可能なグラフ要素をクリックした時に表示されるグラフ。子グラフはより特定な情報を表示します。さらなるドリルダウンをサポートしている子グラフは親グラフにもなります。

  • ドリルバック — 以前に提示された親グラフへのユーザーによるドリルアップのプロセスで、一度にひとつのレベル。

  • トップレベル グラフ — ユーザーに WebChart によって最初に表示されるグラフ。これは親グラフとしての役割を果たし、ドリルダウン階層である「子孫ツリー」のルートに存在します。ユーザーはトップレベル グラフからドリルバックできません。

以下の手順は、4 つの縦棒を持つ親柱状グラフと 3 つのスライスを持つ子円グラフとの間のリンクの定義方法を示しています。ユーザーが親(トップレベル)グラフの最初の列をクリックすると、子グラフが表示されます。

DrillElement で親 WebChart を初期化

Page_Load イベントで親 WebChart を設定します。この例では、ゼロ原点の柱状グラフが使用され、一般的な DataBinding が実行されます。次に DrillElement を設定し、構文のコードの引用を検証します。

そして DrillElement を設定します。

  1. UltraChart.Drill.Enabled を True に設定します。

  2. UltraChart.Drill.DrillElements を新しい DrillElement を含む新しい DrillElement 配列に設定します。

  3. DrillElement の DrillDown プロパティを IDrillDown を実装する新しいオブジェクトに設定します。

この例では、「MyDrillDown」と呼ばれるクラスを作成します。これは IDrillDown を実装します。

Visual Basic の場合:

Imports Infragistics.WebUI.UltraWebChart
Imports Infragistics.UltraChart.Shared
Imports Infragistics.UltraChart.Resources
Imports Infragistics.UltraChart.Shared.Styles
...
Private Sub Page_Load(ByVal sender As System.Object, _
ByVal e As System.EventArgs) Handles MyBase.Load
If Me.UltraChart1.Data.DataSource Is Nothing Then
' 親データのグラフを構成します
Me.UltraChart1.ChartType = ChartType.ColumnChart
Me.UltraChart1.Data.ZeroAligned = True
' 親データのためのデータソースを設定します
Me.UltraChart1.Data.DataSource = GetColumnData()
Me.UltraChart1.Data.IncludeColumn(0, False)
' DrillElement を初期化します
Me.UltraChart1.Drill.Enabled = True
Me.UltraChart1.Drill.DrillElements = New DrillElement() {New DrillElement()}
Me.UltraChart1.Drill.DrillElements(0).DrillDown = New MyDrillDown(UltraChart1)
Me.UltraChart1.Data.DataBind()
End If
End Sub

C# の場合:

using Infragistics.WebUI.UltraWebChart;
using Infragistics.UltraChart.Shared;
using Infragistics.UltraChart.Resources;
using Infragistics.UltraChart.Shared.Styles;
...
private void Page_Load(object sender, System.EventArgs e)
{
if (this.ultraChart1.Data.DataSource == null)
        {
// 親データのグラフを構成します
this.UltraChart1.ChartType = ChartType.ColumnChart;
this.UltraChart1.Data.ZeroAligned = true;
// 親データのためのデータソースを設定します
this.UltraChart1.Data.DataSource = GetColumnData();
this.UltraChart1.Data.IncludeColumn(0, false);
// DrillElement を初期化します
this.UltraChart1.Drill.Enabled = true;
this.UltraChart1.Drill.DrillElements = new DrillElement[] {new DrillElement()};
this.UltraChart1.Drill.DrillElements[0].DrillDown = new MyDrillDown(UltraChart1);
this.UltraChart1.Data.DataBind();
        }
}

IDrillDown を実装するクラスを作成

DrillElement を動作するには、コードは IDrillDown 付きのクラスを必要とします。IDrillDown には Drill() メソッドがひとつだけ含まれます。これは後で使用します。

しかし、最初にコンストラクタを実装します。ここでの最良の実施例は、前の手順で行ったように WebChart への参照を渡すことです。

Note

注: WebChart のタイトルなどの他の情報をコンストラクタを通して渡すことができます。この例では、グラフ参照だけが渡されます。

次に Drill メソッドが書き込まれます。渡されるパラメータで、これはドリルダウン中にこのメソッドを呼び出すときにアクセスできる情報です。このメソッドは非常に柔軟です。この例では、必要となるパラメータは「chartType」と「dataSource」だけです。この代わりに、「行」および「列」の整数値に基づいてデータを(親テーブルから)フェッチできます。

"Drill" メソッドで以下を実行する必要があります。

  • 子グラフを構成します、そして

  • 子グラフをデータ バインドします。

ドリルの深さを決定するなど条件ロジックもここで使用できます。

Note

注: WebChart では Drill.Depth プロパティは実装されていないので、他の手段でこれを決定する必要があります(コンストラクタに固有の深さの値を渡す、または Drill() の引数のいずれかを使用することができます)。

Visual Basic の場合:

Friend Class MyDrillDown
Implements IDrillDown
Private myChart As UltraChart
Public Sub New(ByVal chart As UltraChart)
                myChart = chart
End Sub
Public Sub Drill(ByVal row As Integer, ByVal column As Integer, ByVal chartType As _
          Infragistics.UltraChart.Shared.Styles.ChartType, ByVal dataSource As Object) Implements _
          Infragistics.UltraChart.Resources.IDrillDown.Drill
' 子グラフを初期化します
                myChart.ChartType = chartType
                myChart.Drill.Enabled = False
                myChart.Data.DataSource = dataSource
                myChart.Data.IncludeColumn(0, False)
                myChart.Data.IncludeColumn(1, False)
                myChart.Data.DataBind()
End Sub
End Class

C# の場合:

internal class MyDrillDown : IDrillDown
{
private UltraChart myChart;
public MyDrillDown(UltraChart chart)
        {
                myChart = chart;
        }
#region IDrillDown Members
void Infragistics.UltraChart.Resources.IDrillDown.Drill(int row, int column,
          Infragistics.UltraChart.Shared.Styles.ChartType chartType, object dataSource)
        {
// 子グラフを初期化します
                myChart.ChartType = chartType;
                myChart.Drill.Enabled = false;
                myChart.Data.DataSource = dataSource;
                myChart.Data.IncludeColumn(0, false);
                myChart.Data.IncludeColumn(1, false);
                myChart.Data.DataBind();
        }
#endregion
}

ChartDataClicked イベントを実装

WebChart でクリックすると UltraChart.ChartDataClicked イベントが発生します。このイベント ハンドラでは、ドリルされる(親の)行と列などの必要となるすべての情報にアクセスします。この情報は ChartDataEventArgs ("e") からアクセスできます。

ドリルダウンのシナリオでは、 DrillElementのDrillDown.Drill() メソッドを呼び出す必要があります(Page_Load で設定したもの)。これは IDrillDown クラスに実装された同じメソッドです。このメソッド呼び出しの引数では、子グラフを初期化するために使用する値を渡します。

Visual Basic の場合:

Private Sub UltraChart1_ChartDataClicked(ByVal sender As Object, _
ByVal e As Infragistics.UltraChart.Shared.Events.ChartDataEventArgs) _
Handles UltraChart1.ChartDataClicked
Me.UltraChart1.Drill.DrillElements(0).DrillDown.Drill(e.DataRow, e.DataColumn, _
          ChartType.LineChart, GetLineData())
End Sub

C# の場合:

private void UltraChart1_ChartDataClicked(object sender,
  Infragistics.UltraChart.Shared.Events.ChartDataEventArgs e)
{
this.UltraChart1.Drill.DrillElements[0].DrillDown.Drill(e.DataRow,
          e.DataColumn, ChartType.LineChart, GetLineData());
}

これでプロジェクトをビルドおよび実行する準備が完了です。