Angular ラジアル チャート

Ignite UI for Angular ラジアル チャートは、データを取得し、円の周囲でラップされるデータ ポイントのコレクションとしてデータを描画するチャートのグループです (水平方向の線に沿って拡大するのではなく)。ラジアル チャートはチャートの範囲の最小から最大までのカテゴリのリストもマッピングし、カテゴリ グループ化メカニズムをサポートします。

Angular ラジアル エリア チャート

Ignite UI for Angular ラジアル エリア チャートは、データ ポイントを結ぶ直線のコレクションによってバインドされた塗りつぶされた多角形の形をしています。このチャートは、エリア チャートと同じデータ プロットの概念を使用しますが、データ ポイントを水平方向に引き伸ばすのではなく、円形の軸の周りにラップします。DataChart コントロールでこのチャート タイプを作成するには、以下の例のように、データを RadialAreaSeries にバインドします。

Angular ラジアル縦棒チャート

ラジアル縦棒チャートは、チャートの中心からデータ ポイントの位置に向けて広がる矩形のコレクションを使用して表示されます。これは縦棒チャートと同じデータ プロットの概念を使用していますが、データ ポイントを水平方向に引き伸ばすのではなく、データ ポイントを円でラップします。DataChart コントロールでこのチャート タイプを作成するには、以下の例のように、データを RadialColumnSeries にバインドします:

Angular ラジアル折れ線チャート

Ignite UI for Angular ラジアル折れ線チャートは、データ ポイントを結ぶ直線のコレクションとして描画されます。このチャートは、折れ線チャートと同じデータ プロットの概念を使用しますが、データ ポイントを水平方向に引き伸ばすのではなく、円形の軸の周りにラップします。DataChart コントロールでこのチャート タイプを作成するには、以下の例のように、データを RadialLineSeries にバインドします:

Angular ラジアル円チャート

ラジアル円チャートは、チャートの中心からデータ ポイントの位置に向けて広がる円スライスを使用します。このチャート タイプは、複数の一連のデータ ポイントを分類するという概念を採用しており、データ ポイントを水平線に沿って引き伸ばすのではなく、円形の軸に沿ってラップします。DataChart コントロールでこのチャート タイプを作成するには、以下の例のように、データを RadialPieSeries にバインドします:

Angular ラジアル チャートのスタイル設定

ラジアル チャートを作成したら、線の色、マーカーの種類、またはそれらのマーカーのアウトライン色の変更など、スタイルをさらにカスタマイズしたい場合があります。この例は、DataChart コントロールのスタイルをカスタマイズする方法を示しています。

Angular ラジアル チャートの設定

さらに、ラベルはチャートの近くまたは広い位置に表示されるように設定できます。これは、CategoryAngleAxis の LabelMode プロパティで設定できます。

その他のリソース

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

• エリア チャート
• 縦棒チャート
• ドーナツ チャート
• 折れ線チャート
• 円チャート

API リファレンス