IgbDataChart – 散布図マーカーの色設定

IgbDataChart の散布チャートである IgbScatterSeries において、表示されるマーカーの色やアウトラインを設定する方法についてご紹介します。

方法

IgbScatterSeries のプロパティ定義は以下のようになります。

• マーカー色の定義：MarkerBrush
• アウトライン色の定義：MarkerOutline
• アウトライン太さの定義：MarkerThickness

実際にこれらのプロパティを設定したコード例を以下に示します。
※アウトラインが不要の場合はMarkerOutline=”transparent”と定義します。

    <IgbScatterSeries DataSource="@DataSourceA"
                       Title="マーク A"
                       XMemberPath="XValue"
                       YMemberPath="YValue"
                       XAxisName="xAxis"
                       YAxisName="yAxis"
                       MarkerBrush="yellow"
                       MarkerOutline="black"
                       MarkerThickness="2"
                       />

    <IgbScatterSeries DataSource="@DataSourceB"
                       Title="マーク B"
                       XMemberPath="XValue"
                       YMemberPath="YValue"
                       XAxisName="xAxis"
                       YAxisName="yAxis"
                       MarkerBrush="red"
                       MarkerOutline="transparent"
                       />

これらのプロパティの設定で実際に描画されるマーカーは下図のようになります。

上記作例の Blazor アプリケーションのソースコードは以下からアクセス頂けます。

関連ドキュメント

• Ignite UI for Blazor 散布図
  Blazor 散布図 | データ可視化 | インフラジスティックス (infragistics.com)
• 特定のマーカーのみカスタマイズする方法はこちら
  IgbDataChart – バインドした項目のプロパティに基づいてマーカーの表示 (描画) をカスタマイズする – INFRAGISTICS ナレッジベース