IgxDataChart – プロットエリアの背景色を部分的に変更する

IgxDataChart ではデータ注釈レイヤーを使用してチャートのプロットエリア(背景)に線や矩形などを追加することができます。
この機能を使用し、プロットエリアの背景色を部分的に変更することが可能です。

このような折れ線チャートがあるとします。

IgxDataAnnotationStripLayer を使用して特定のX軸の範囲に対して背景色を付与することができます。

<igx-data-chart .....>
      <igx-category-x-axis #xAxis .....>
      </igx-category-x-axis>
      <igx-numeric-y-axis #yAxis .....>
      </igx-numeric-y-axis>

      <igx-data-annotation-strip-layer
            name="StripLayer"
            #stripLayer
            [dataSource]="annotationStripData"
            [targetAxis]="xAxis"
            startValueMemberPath="start"
            endValueMemberPath="end"
            startLabelDisplayMode="Hidden"
            endLabelDisplayMode="Hidden"
            brush="yellow"
            outline="transparent">
      </igx-data-annotation-strip-layer>
.....
</igx-data-chart>

public annotationStripData = [
		{ start: 1, end: 2},
		{ start: 3, end: 5.5}
	];

また、IgxDataAnnotationRectLayer を使用してプロットエリア上の特定の矩形領域の背景色を変更することも可能です。

<igx-data-chart .....>
      <igx-category-x-axis #xAxis .....>
      </igx-category-x-axis>
      <igx-numeric-y-axis #yAxis .....>
      </igx-numeric-y-axis>

      <igx-data-annotation-rect-layer name="RectLayer" #rectLayer 
            [dataSource]="annotationRectData" 
            [targetAxis]="xAxis"
            startLabelXDisplayMode="Hidden" 
            endLabelXDisplayMode="Hidden"
            brush="purple"
            outline="transparent" 
            startValueXMemberPath="startX" 
            startValueYMemberPath="startY"
            endValueXMemberPath="endX" 
            endValueYMemberPath="endY">
      </igx-data-annotation-rect-layer> 
.....
</igx-data-chart>

public annotationRectData = [
		{ startX: 5, startY: 20, endX: 9, endY: 70 }
	];