バージョン

日時シリーズを表示

始める前に

xamTimeline コントロールを使用して DateTime データを表示できます。このコントロールは日付順に並べられた、連続するタイムラインを表すために DateTimeSeries オブジェクトを提供します。

達成すること

xamTimeline を使用して DateTime データを表示する方法を学習します。

XamTimeline Display Date Time Series 01.png

次の手順を実行します

  1. Microsoft® WPF プロジェクトを作成します。

  2. ソリューション エクスプローラーで次の参照をプロジェクトに追加します。

    • InfragisticsWPF4.Controls.Timelines.XamTimeline.v22.1.dll

    • InfragisticsWPF4.DataVisualization.v22.1.dll

    • InfragisticsWPF4.v22.1.dll

  1. xamTimeline の以下の名前空間宣言を追加します。

XAML の場合:

xmlns:igtl="http://schemas.infragistics.com/xaml"

Visual Basic の場合:

Imports Infragistics.Controls.Timelines

C# の場合:

using Infragistics.Controls.Timelines;
  1. DateTimeSeries オブジェクトと共にページに XamTimeline コントロールをページに追加します。

XAML の場合:

<igtl:XamTimeline x:Name="xamTimeline"
                     Width="1000" Height="580" Margin="15">
            <igtl:XamTimeline.Series>
                <igtl:DateTimeSeries Title="Date Time Series"
                                     Position="TopOrLeft">
                    <!-- TODO: 日時エントリを追加 -->
                </igtl:DateTimeSeries>
            </igtl:XamTimeline.Series>
            <!-- TODO: Axis プロパティを設定 -->
</igtl:XamTimeline>

Visual Basic の場合:

Dim xamTimeline As New xamTimeline()
Me.LayoutRoot.Children.Add(xamTimeline)
Dim dateTimeSeries As New DateTimeSeries()
'TODO: 日時エントリを追加
xamTimeline.Series.Add(dateTimeSeries)

C# の場合:

XamTimeline xamTimeline = new xamTimeline();
this.LayoutRoot.Children.Add(xamTimeline);
DateTimeSeries dateTimeSeries = new DateTimeSeries();
//TODO: 日時エントリを追加
xamTimeline.Series.Add(dateTimeSeries);
  1. DateTimeEntry オブジェクトをシリーズに追加することによってデータをタイムラインに追加できます。

XAML の場合:

<igtl:DateTimeSeries.Entries>
      <igtl:DateTimeEntry Time="01/01/1996" Title="Date Time Entry 1"
                                            Details="Details Time Entry 1"/>
      <igtl:DateTimeEntry Time="01/01/2000" Title="Date Time Entry 2"
                                            Details="Details Time Entry 2"/>
      <igtl:DateTimeEntry Time="01/01/2004" Title="Date Time Entry 3"
                                            Details="Details Time Entry 3"/>
      <igtl:DateTimeEntry Time="01/01/2008" Title="Date Time Entry 4"
                                            Details="Details Time Entry 4"/>
      <igtl:DateTimeEntry Time="01/01/2012" Title="Date Time Entry 5"
                                            Details="Details Time Entry 5"/>
</igtl:DateTimeSeries.Entries>

Visual Basic の場合:

For ind As Integer = 1 To 5
    Dim dateEntry As New DateTimeEntry()
    dateEntry.Time = New DateTime(1992 + ind * 4, 1, 1)
    dateEntry.Title = "Date Time Entry " + ind.ToString()
    dateEntry.Details = "Details Time Entry " + ind.ToString()
    dateTimeSeries.Entries.Add(dateEntry)
Next

C# の場合:

for (int ind = 1; ind <= 5;="" ind++)="" temp_line_break="" {="" datetimeentry="" dateentry="<SPAN" class="blue">new DateTimeEntry();
    dateEntry.Time = new DateTime(1992 + ind * 4, 1, 1);
    dateEntry.Title = "Date Time Entry " + ind.ToString();
    dateEntry.Details = "Details Time Entry " + ind.ToString();
    dateTimeSeries.Entries.Add(dateEntry);
}
  1. タイムラインの範囲を制御するために xamTimeline に DateTimeAxis オブジェクトを作成します。xamTimeline コントロールの軸の詳細は、 「軸」を参照してください。

    • Minimum を 01/01/1992 に設定します。

    • Maximum を 12/01/2015 に設定します。

    • AutoRange を False に設定します。

    • Unit を 2 に設定します。

    • UnitType プロパティを Years に設定します。Numeric Time シリーズと異なり、DateTime シリーズは異なる単位のタイプを持つことができます。タイムラインが正しく表示するためには UnitType プロパティを設定が重要です。

XAML の場合:

<igtl:XamTimeline.Axis>
      <igtl:DateTimeAxis  Minimum="01/01/1992" Maximum="12/01/2015"
                          AutoRange=" UnitType="Years" Unit="2"/>
</igtl:XamTimeline.Axis>

Visual Basic の場合:

Dim axis As New DateTimeAxis()
axis.Minimum = DateTime.Parse("01/01/1992")
axis.Maximum = DateTime.Parse("12/01/2015")
axis.AutoRange = False
axis.Unit = 2
axis.UnitType = DateTimeUnitType.Years
xamTimeline.Axis = axis

C# の場合:

DateTimeAxis axis = new DateTimeAxis()
{
        Minimum = DateTime.Parse("01/01/1992"),
        Maximum = DateTime.Parse("12/01/2015"),
        AutoRange = false,
        Unit = 2, UnitType = DateTimeUnitType.Years
};
xamTimeline.Axis = axis;
  1. アプリケーションを実行します。xamTimeline コントロールはデータを表示します。そのイベントの詳細を確認するためにスライダーをイベントに移動できます。

XamTimeline Display Date Time Series 01.png