Angular ポイント チャート

    Ignite UI for Angular ポイント チャートは、ポイントのコレクションを描画します。値は Y 軸 (左側のラベル) に表示され、カテゴリは X 軸 (下部のラベル) に表示されます。これらのチャートは、プロットされた値の合計を表示することにより、一定期間の変化量を強調したり、複数の項目や全体の一部の関係を比較したりします。

    Angular ポイント チャートの例

    IgxCategoryChartComponent コントロールで Angular ポイント チャートを作成するには、以下の例のように、データを ItemsSource プロパティにバインドし、chartType プロパティを Point 列挙型に設定します。

    Code Sandbox Stackblitz

    単一シリーズの Angular ポイント チャート

    次の例では、Angular ポイント チャートは、y 軸に数値データ列を、x 軸に非数値データ列を自動的に選択することにより、単一のデータ ソースをプロットします。

    Code Sandbox Stackblitz

    複数シリーズの Angular ポイント チャート

    Angular ポイント チャートを使用すると、複数のシリーズを組み合わせて時間の経過に伴う変化を比較または確認できます。中国と米国のデータを含むデータ ソースにバインドするだけで、ポイント チャートは追加データに合わせて自動的に更新されます。

    Code Sandbox Stackblitz

    Angular ポイント チャートのスタイル設定

    Angular ポイント チャートを設定したら、マーカーとそのアウトライン、ブラシ、太さを変更するなど、スタイルをさらにカスタマイズします。

    Code Sandbox Stackblitz

    高度なタイプのポイント チャート

    次のトピックに従って、IgxCategoryChartComponent コントロールの代わりに IgxDataChartComponent コントロールを使用して、より高度なタイプの Angular ポイント チャートを作成できます。

    その他のリソース

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

    API メンバー

    以下は、上記のセクションで説明されている API メンバーのリストです。