Web Components 軸オプション

    すべての Ignite UI for Web Components チャートで、軸はタイトル、ラベル、範囲などの視覚的構成のプロパティを提供します。これらの機能は、以下の例で示されています。

    軸タイトルの例

    Web Components チャートの軸タイトル機能を使用すると、チャートにコンテキスト情報を追加できます。さまざまなフォントスタイル、色、マージン、および配置を適用するなど、さまざまな方法で軸タイトルの外観をカスタマイズできます。

    軸ラベルの例

    Web Components チャートは、チャートで表示されるラベルの構成、書式設定、およびラベル フォントのスタイル設定を制御することが可能です。軸ラベルの回転角度、マージン、水平および垂直方向の配置、色、余白、および表示設定を変更できます。次の例は、これらの軸の機能を使用する方法を示しています。

    軸ラベルの管理

    チャートの軸には、所有する軸のラベルに使用可能なスペースの量に関する拡張計算を実行する機能があります。この拡張された計算により、軸は、指定された軸に対してより多くのラベルを表示するために、指定されたスペースの量を最適化できます。

    この拡張された計算は、オプトインする必要があるものです。これは、useEnhancedIntervalManagement プロパティを true に設定することで実行できます。次に、軸の interval プロパティを手動で設定せずに、軸のディメンションに収まるだけの数のラベルを表示したい場合は、軸の enhancedIntervalPreferMoreCategoryLabels プロパティを true に設定できます。

    チャートには、ラベルが割り当てられたスペースに収まらない場合にラベルの自動回転を考慮する機能と、ラベルが収まるようにプロット領域に自動マージンを適用する機能もあります。これは、最初にチャートの autoMarginAndAngleUpdateMode プロパティを SizeChanging または SizeChangingAndZoom に設定することで最初にオプトインできるものです。これにより、必要に応じて、ラベルに適用された自動マージンと角度をいつ再評価するかがチャートに通知されます。

    autoMarginAndAngleUpdateMode を設定した後、shouldAutoExpandMarginForInitialLabels プロパティを true に設定して自動マージンをオプトインするか shouldConsiderAutoRotationForInitialLabels プロパティを true に設定して自動回転を行うことができます。autoExpandMarginExtraPaddingautoExpandMarginMaximumValue を設して、それぞれ追加のスペースまたは可能な最大マージンを提供することにより、適用される自動マージンをさらにカスタマイズすることもできます。

    軸範囲の例

    チャートでは数値軸または時間軸の範囲の最小値と最大値を定義できます。範囲の最小値は軸の最小値で、範囲の最大値は軸の最大値です。これらは、yAxisMinimumValue および yAxisMaximumValue オプションを設定することによって設定されます。

    既定では、Web Components チャートは、データ内の対応する最小値と最大値に基づいて、数値と時間軸の範囲の最小値と最大値を計算しますが、この自動計算は、データセットには適していません。たとえば、データの最小値が 850 の場合、yAxisMinimumValue を 800 に設定してください。これにより、軸の最小値とデータ ポイントの最小値の間に 50 のスペース値ができます。yAxisMaximumValue プロパティを使用して、同じ方法を軸の最小値と最大値に適用することができます。

    軸モードとスケール

    IgcFinancialChartComponent および IgcCategoryChartComponent コントロールでは、yAxisIsLogarithmic プロパティが true に設定されている場合はデータを Y 軸に沿って対数スケールでプロットするか、このプロパティが false (デフォルト価値) に設定されている場合は線形スケールでプロットするかを選択できます。

    yAxisLogarithmBase プロパティを使用すると、対数スケールのベースをデフォルト値の 10 から他の整数値に変更できます。IgcFinancialChartComponent とコントロールを使用すると、Numeric モードと PercentChange モードを提供する yAxisMode プロパティを使用して、Y 軸に沿ってデータをどのように表現するかを選択できます。Numeric モードは正確な値でデータをプロットし、PercentChange モードは提供された最初のデータ ポイントに対する変化率としてデータを表示します。デフォルト値は Numeric モードです。

    yAxisMode プロパティに加えて、IgcFinancialChartComponent コントロールには X 軸に Time モードと Ordinal モードを提供する xAxisMode プロパティがあります。Time モードはデータのギャップを X 軸にスペースを用いて描画します。つまり、週末または休日に株取引がないことを示します。Ordinal モードはデータがない日付領域を縮小します。デフォルト値は Ordinal モードです。

    軸間隔の例

    Web Components チャートの xAxisGap プロパティは、プロットされた系列の縦棒または棒間のスペースの量を決定します。このプロパティは、0.0 から 1.0 までの数値を受け入れます。値は、シリーズ間の利用可能なピクセル数からのギャップの相対幅を表します。このプロパティを 0 に設定すると、シリーズ間にギャップがレンダリングされず、1 に設定すると最大ギャップがレンダリングされます。

    Web Components チャートの xAxisMaximumGap プロパティは、許可される最大ギャップ値を決定します。このデフォルトは 1.0 に設定されていますが、xAxisGap の設定に応じて変更できます。

    Web Components チャートの xAxisMinimumGapSize プロパティは、可能であれば、カテゴリ間のギャップに使用する最小のピクセル数を決定します。

    以下の例は、ニューヨーク市のセントラル パークの摂氏の平均最高気温を示しています。これは、xAxisGap が最初に 1 に設定された縦棒チャートで表されているため、列の間にカテゴリ全体の幅があります。スライダーを使用すると、この例のギャップを構成して、さまざまな値の効果を確認できます。

    軸重複の例

    Web Components チャートの xAxisOverlap プロパティを使用すると、プロットされた系列の描画された縦棒または棒の重複を設定できます。このプロパティは、-1.0 から 1.0 までの数値を受け入れます。値は、各シリーズ専用の使用可能なピクセル数からの相対的な重なりを表します。このプロパティを負の値 (-1.0 まで) に設定すると、カテゴリが互いから離れてしまい、それらの間にギャップが生じます。逆に、このプロパティを正の値 (最大 1.0) に設定すると、カテゴリが互いに重なります。値が 1 の場合、チャートはカテゴリを互いの上に表示します。

    以下の例は、フランチャイズの世界の興行収入の合計とシリーズで最も収益の高い映画を比較した、世界で最も収益の高い映画フランチャイズの比較を示しています。これは、xAxisOverlap が最初に 1 に設定された縦棒チャートで表されており、列は完全に重なり合います。スライダーを使用すると、この例の重複を構成して、さまざまな値の効果を確認できます。

    その他のリソース

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

    API メンバー

    以下は、上記のセクションで説明した API メンバーのリストです。

    IgcDataChartComponent IgcFinancialChartComponent IgcCategoryChartComponent
    AxesIgcNumericYAxisComponentmaximumValue yAxisMaximumValue yAxisMaximumValue
    AxesIgcNumericYAxisComponentminimumValue yAxisMinimumValue yAxisMinimumValue
    AxesIgcNumericYAxisComponentisLogarithmic yAxisIsLogarithmic yAxisIsLogarithmic
    AxesIgcNumericYAxisComponentlogarithmBase yAxisLogarithmBase yAxisLogarithmBase
    AxesIgcCategoryXAxisComponentgap None xAxisGap
    AxesIgcCategoryXAxisComponentoverlap None xAxisOverlap
    AxesIgcTimeXAxisComponent xAxisMode None
    AxesIgcPercentChangeYAxisComponent yAxisMode None
    AxesIgcNumericYAxisComponentlabelSettings.angle yAxisLabelAngle yAxisLabelAngle
    AxesIgcNumericXAxisComponentlabelSettings.angle xAxisLabelAngle xAxisLabelAngle
    AxesIgcNumericYAxisComponentlabelSettings.textColor YAxisLabelForeground YAxisLabelForeground
    AxesIgcNumericXAxisComponentlabelSettings.textColor XAxisLabelForeground XAxisLabelForeground
    AxesIgcNumericYAxisComponentlabelSettings.visibility yAxisLabelVisibility yAxisLabelVisibility
    AxesIgcNumericXAxisComponentlabelSettings.visibility xAxisLabelVisibility xAxisLabelVisibility