Web Components 軸タイプ

    Ignite UI for Web Components カテゴリ チャートは、IgcCategoryXAxisComponent および IgcNumericYAxisComponent タイプを 1 つだけ使用します。同様に、Ignite UI for Web Components ファイナンシャル チャートは、IgcTimeXAxisComponent タイプと IgcNumericYAxisComponent タイプを 1 つだけ使用します。ただし、Ignite UI for Web Components データ チャートは複数の軸タイプをサポートしており、軸の位置を設定してチャートの任意の側に配置したり、軸交差プロパティを使用してチャートの内部に配置したりできます。このトピックでは、相互に互換性のある軸とシリーズ、および固有の軸に対するいくつかの特定のプロパティについて、それぞれについて説明します。

    デカルト軸

    デカルト軸を持つ IgcDataChartComponent では 3 つのタイプの X 軸を使用して水平 (X 軸) および垂直 (X 軸) 方向にデータをプロットすることが可能です。 (IgcCategoryXAxisComponentIgcNumericXAxisComponent、および IgcTimeXAxisComponent) と 2 つのタイプの Y 軸 (IgcCategoryYAxisComponent および IgcNumericYAxisComponent)。

    カテゴリ X 軸

    IgcCategoryXAxisComponent は、そのデータを一連のカテゴリ データ項目として扱います。文字列や数値など、ほぼすべてのタイプのデータを表示できます。この軸に数値をプロットする場合、この軸は離散軸であり、連続ではないことに注意してください。これは、各カテゴリ データ項目がその前のデータ項目から等距離に配置されることを意味します。また、項目は軸のデータ ソースに表示される順序でプロットされます。

    IgcCategoryXAxisComponent では、データをプロットするために DataSourcelabel を提供する必要があります。通常、次のタイプの系列をプロットするために IgcNumericYAxisComponent と共に使用されます。

    次の例は、上記のスタイル設定プロパティの使用法を示しています:

    EXAMPLE
    DATA
    TS
    HTML
    CSS

    このサンプルが気に入りましたか? 完全な Ignite UI for Web Componentsツールキットにアクセスして、すばやく独自のアプリの作成を開始します。無料でダウンロードできます。

    カテゴリ Y 軸

    IgcCategoryYAxisComponent は、上記の IgcCategoryXAxisComponent と非常によく似た働きをしますが、水平ではなく垂直に配置されます。また、この軸では、データをプロットするために DataSourcelabel を提供する必要があります。IgcCategoryYAxisComponent は通常 IgcNumericXAxisComponent と組み合わせて次のタイプのシリーズをプロットするために使用されます。

    次の例は、IgcCategoryYAxisComponent タイプの使用法を示しています:

    EXAMPLE
    DATA
    TS
    HTML
    CSS

    数値 X 軸

    IgcNumericXAxisComponent は、そのデータを連続的に変化する数値データ項目として扱います。この軸のラベルは、X 軸に沿って水平に配置されます。IgcNumericXAxisComponent ラベルの位置は、IgcNumericYAxisComponent と組み合わせた場合にサポートされるさまざまな ScatterSeries (散布シリーズ) の XMemberPath プロパティに依存します。または、IgcCategoryXAxisComponent と組み合わせた場合、これらのラベルは、IgcBarSeriesComponentIgcStackedBarSeriesComponent、および IgcStacked100BarSeriesComponentValueMemberPath に対応して配置されます。

    IgcNumericXAxisComponent は、次のタイプのシリーズと互換性があります:

    次の例は、IgcNumericXAxisComponent の使用法を示しています:

    EXAMPLE
    DATA
    TS
    HTML
    CSS

    数値 Y 軸

    IgcNumericYAxisComponent は、そのデータを連続的に変化する数値データ項目として扱います。この軸のラベルは、Y 軸に沿って垂直に配置されます。IgcNumericYAxisComponent ラベルの位置は、IgcNumericXAxisComponent と組み合わせた場合にサポートされるさまざまな ScatterSeries (散布シリーズ) の YMemberPath プロパティに依存します。または、IgcCategoryYAxisComponent と組み合わせた場合、これらのラベルは、上記の表に記載されているカテゴリまたは積層シリーズの ValueMemberPath に対応して配置されます。財務シリーズのいずれかを使用している場合、Open/High/Low/Close のパスと使用しているシリーズ タイプに対応して配置されます。

    IgcNumericYAxisComponent は、次のタイプのシリーズと互換性があります:

    次の例は、IgcNumericYAxisComponent の使用法を示しています:

    EXAMPLE
    DATA
    TS
    HTML
    CSS

    時間 X 軸

    IgcTimeXAxisComponent は、そのデータを、日付でソートされた一連のデータ項目として扱います。この軸タイプのラベルは日付であり、日付間隔に従ってフォーマットおよび配置できます。この軸の日付範囲は、DateTimeMemberPath を使用してマップされたデータ列の日付値によって決定されます。これは、DataSource とともに、この軸タイプでデータをプロットするために必要です。

    IgcTimeXAxisComponent は、IgcFinancialChartComponent コンポーネントの X 軸タイプです。

    時間 X 軸のブレーク

    IgcTimeXAxisComponent には、breaks (ブレーク) を使用してデータの間隔を除外するオプションがあります。その結果、ラベルとプロットされたデータは除外された間隔では表示されません。たとえば、勤務日/休業日、休日、週末などです。IgcTimeAxisBreakComponent のインスタンスを軸の Breaks コレクションに追加し、一意の startend、および interval を使用して構成できます。

    時間 X 軸の書式設定

    IgcTimeXAxisComponent には、IgcTimeAxisLabelFormatComponent オブジェクトのコレクションを表す LabelFormats プロパティがあります。コレクションに追加された各 IgcTimeAxisLabelFormatComponent は、一意の format (書式) と range (範囲) を割り当てる役割を果たします。これは、データを年からミリ秒にドリルダウンし、チャートに表示される時間の範囲に応じてラベルを調整する場合に特に役立ちます。

    IgcTimeAxisLabelFormatComponentformat プロパティは、特定の表示範囲に使用する形式を指定します。IgcTimeAxisLabelFormatComponentrange プロパティは、軸ラベルの形式が別の形式に切り替わる表示範囲を指定します。たとえば、範囲が 10 日と 5 時間に設定された 2 つの IgcTimeAxisLabelFormatComponent 要素がある場合、軸の表示範囲が 10 日未満になるとすぐに、5 時間形式に切り替わります。

    時間 X 軸の間隔

    IgcTimeXAxisComponent は、カテゴリ軸と数値軸の従来の interval プロパティを IgcTimeAxisIntervalComponent 型の Intervals コレクションに置き換えます。コレクションに追加された各 IgcTimeAxisIntervalComponent は、一意の intervalrange、および intervalType を割り当てる役割を果たします。これは、データを年単位からミリ秒単位にドリルダウンして、チャートに表示される時間の範囲に応じてラベル間に一意の間隔を設ける場合に特に役立ちます。これらのプロパティの説明は次のとおりです。

    • interval: 使用する間隔を指定します。intervalType プロパティに関連付けられています。たとえば、intervalTypeDays に設定されている場合、interval で指定される数値は日数になります。
    • range: 軸間隔が別の間隔に切り替わる可視範囲を指定します。たとえば、範囲が 10 日間および 5 時間に設定された 2 つの TimeAxisInterval がある場合、軸の表示範囲が 10 日間より短くなる際に 5 時間範囲の間隔に変更します。
    • intervalType: interval プロパティの時間単位を指定します。

    極座標軸

    極座標軸を持つ IgcDataChartComponent により、チャートの中心から外側 (半径軸) およびチャートの中心の周り (角度軸) にデータをプロットできます。

    カテゴリ角度軸

    IgcCategoryAngleAxisComponent は、そのデータを一連のカテゴリ データ項目として扱います。この軸のラベルは、その順序での位置に従って円の端に沿って配置されます。この軸のタイプでは、数字、文字列などのほぼすべてのデータのタイプを表示できます。

    IgcCategoryAngleAxisComponent は通常、ラジアル シリーズをプロットするために IgcNumericRadiusAxisComponent と共に使用されます。

    次の例は、IgcCategoryAngleAxisComponent タイプの使用法を示しています:

    EXAMPLE
    DATA
    TS
    HTML
    CSS

    比例カテゴリ角度軸

    IgcProportionalCategoryAngleAxisComponent は、そのデータを一連のカテゴリ データ項目として扱います。この軸のラベルは、シーケンス内の位置に応じて円の端に沿って配置されます。この軸の種類では、数字、文字列などのほぼすべてのデータのタイプを表示できます。

    IgcProportionalCategoryAngleAxisComponent は通常、IgcNumericRadiusAxisComponent と一緒に使用され、円チャートをプロットします (例: ラジアル シリーズ)。

    次の例は、IgcProportionalCategoryAngleAxisComponent タイプの使用方法を示しています。

    EXAMPLE

    数字角度軸

    IgcNumericAngleAxisComponent は、そのデータを連続的に変化する数値データ項目として扱います。この軸領域のラベルは、円形プロットの中心から始まる半径線に沿って配置されます。IgcNumericAngleAxisComponent のラベルの位置は、極座標シリーズ オブジェクトの RadiusMemberPath プロパティまたはラジアル シリーズ オブジェクトの ValueMemberPath プロパティを使用してマップされたデータ列の値によって異なります。

    IgcNumericAngleAxisComponent は、IgcCategoryAngleAxisComponent と共に使用してラジアル シリーズをプロットするか、IgcNumericRadiusAxisComponent と共に使用して極座標シリーズをプロットすることができます。

    次の例は、IgcNumericAngleAxisComponent タイプの使用法を示しています:

    EXAMPLE
    DATA
    TS
    HTML
    CSS

    数字半径軸

    IgcNumericRadiusAxisComponent は、データを連続的に変化する数値データ項目として扱います。この軸のラベルは、円形プロットの周りに配置されます。ラベルの位置は、対応する極座標シリーズの AngleMemberPath プロパティを使用してマップされたデータ列の値によって異なります。

    IgcNumericRadiusAxisComponentIgcNumericRadiusAxisComponent と共に使用して、極座標シリーズをプロットできます。

    次の例は、IgcNumericRadiusAxisComponent タイプの使用法を示しています:

    EXAMPLE
    DATA
    TS
    HTML
    CSS

    Ignite UI for Web Components | CTA Banner

    その他のリソース

    関連するチャート機能の詳細については、次のトピックを参照してください: