Angular チャート マーカー

Ignite UI for Angular マーカーは、カテゴリ チャートのプロット領域にデータ ポイントの値を表示する視覚要素です。値が主グリッド線と副グリッド線の間にある場合も指定したデータ ポイントの値をただちに識別できるようユーザーをサポートします。

Angular チャート マーカーの例

次の例では、折れチャートは、2009 年から 2019 年までのヨーロッパ、中国、および米国の国々の再生可能エネルギーの発電量を比較しています。マーカーが MarkerTypes プロパティを Circle 列挙値に設定して有効になっています。

マーカーのカラーは、以下のサンプルの MarkerBrushesプロパティと MarkerOutlines プロパティを設定することによっても管理されます。このサンプルでは、ドロップダウンを使用してマーカーと CategoryChart.ChartType を構成できます。

Angular チャート マーカー サイズ

MarkerSize プロパティをマーカーをサポートするシリーズに設定することで、データ ポイント マーカーのデバイス非依存ピクセル寸法を正確に制御できます。これにより、マーカー テンプレートやスタイルに関係なく、マーカーが画面上に表示される大きさを正確に制御できます。

デフォルトでは、マーカーのサイズはシリーズのマーカー テンプレートによって決まります。MarkerSize に特定の数値を設定すると、そのシリーズのすべてのマーカーがその正確なデバイス非依存ピクセルの幅と高さでレンダリングされます。MarkerSize を NaN に戻すと、デフォルトのテンプレート駆動のサイズ設定が復元されます。

MarkerSize プロパティは、MarkerSeries から派生するすべてのシリーズ タイプ (LineSeries、SplineSeries、AreaSeries、ColumnSeries、ScatterSeries、ScatterLineSeries、ScatterSplineSeries、極座標/放射状シリーズ タイプなど) で使用できます。

次のコード例は、DataChart コントロールの ScatterLineSeries で MarkerSize を 30 デバイス非依存ピクセルに設定する方法を示しています。

マーカーをデフォルトのテンプレート駆動サイズにリセットするには、MarkerSize を NaN に設定します (またはマークアップで属性を削除します)。

次のサンプルは、インタラクティブなエディターを使用して散布図シリーズで MarkerSize を示しています。

Angular チャート チェックマーク マーカー タイプ

Ignite UI for Angular チャートは、MarkerType 列挙型に Checkmark オプションを含んでいます。このマーカーは、チャートのデータ ポイントに円の中に V 字型のチェックマーク アイコンを描画します。

Checkmark マーカー タイプを個々のシリーズに適用するには、シリーズの MarkerType プロパティを MarkerType.Checkmark に設定します。チャート内のすべてのシリーズに同時にチェックマーク形状を使用するには、チャートの MarkerAutomaticBehavior プロパティを MarkerAutomaticBehavior.Checkmark に設定します。

SeriesViewer.CheckmarkMarkerTemplate プロパティは、チェックマーク マーカー タイプを持つシリーズに使用されるマーカー テンプレートを定義し、チャート全体の外観をカスタマイズするために使用できます。

Angular チャート マーカー テンプレート

以下の例に示すように、マーカー プロパティに加えて、CategoryChart コントロールで描画されたシリーズの MarkerTemplate プロパティに関数を設定することで、独自のマーカーを実装できます。

その他のリソース

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

• チャート注釈
• チャートのハイライト表示

API リファレンス