XamDataChart のシリーズを網掛けで表示する

XamDataChart で特定のシリーズを網掛けパターンで塗りつぶすには、そのシリーズの Brush プロパティに VisualBrush を設定します。

<ig:StackedFragmentSeries .....>
	<ig:StackedFragmentSeries.Brush>
		<VisualBrush TileMode="Tile" Viewport="0,0,10,10" ViewportUnits="Absolute" Viewbox="0,0,10,10" ViewboxUnits="Absolute">
			<VisualBrush.Visual>
				<Grid Background="SkyBlue">
					<Path Data="M 0 10 L 10 0" Stroke="DarkBlue" />
					<Path Data="M 0 0 L 10 10" Stroke="DarkBlue" />
				</Grid>
			</VisualBrush.Visual>
		</VisualBrush>
	</ig:StackedFragmentSeries.Brush>
</ig:StackedFragmentSeries>

次の例では、売り上げデータを「実績」と「予測」に分けて表示し、予測部分のシリーズに網掛けを適用することで、両者を視覚的に区別しています。

<ig:XamDataChart Grid.Column="0" x:Name="Chart" Legend="{Binding ElementName=Legend}">
	<ig:XamDataChart.Axes>
		<ig:CategoryXAxis x:Name="xAxis" ItemsSource="{Binding Actual}" Label="{}{Month}" Interval="1" Gap=".5" />
		<ig:CategoryXAxis x:Name="xAxisForecast" ItemsSource="{Binding Forecast}" Label="{}{Month}" Interval="1" Gap=".5" >
			<ig:CategoryXAxis.LabelSettings>
				<ig:AxisLabelSettings Visibility="Collapsed" />
			</ig:CategoryXAxis.LabelSettings>
		</ig:CategoryXAxis>
		<ig:NumericYAxis x:Name="yAxis" MaximumValue="600000" Label="{}{:N0}"/>
	</ig:XamDataChart.Axes>
	<ig:XamDataChart.Series>
		<ig:StackedColumnSeries XAxis="{Binding ElementName=xAxis}"
						YAxis="{Binding ElementName=yAxis}"
						ItemsSource="{Binding Actual}">
			<ig:StackedColumnSeries.Series>
				<ig:StackedFragmentSeries ValueMemberPath="Electronics" Title="家電" Brush="SkyBlue" OutlineMode="Collapsed" />
				<ig:StackedFragmentSeries ValueMemberPath="Clothing" Title="衣料品"  Brush="PaleGreen" OutlineMode="Collapsed"/>
				<ig:StackedFragmentSeries ValueMemberPath="Groceries" Title="食料品"  Brush="Violet" OutlineMode="Collapsed">
				</ig:StackedFragmentSeries>
			</ig:StackedColumnSeries.Series>
		</ig:StackedColumnSeries>
		<ig:StackedColumnSeries XAxis="{Binding ElementName=xAxisForecast}"
						YAxis="{Binding ElementName=yAxis}"
						ItemsSource="{Binding Forecast}">
			<ig:StackedColumnSeries.Series>
				<ig:StackedFragmentSeries ValueMemberPath="Electronics" Title="家電(予測)" OutlineMode="Collapsed">
					<ig:StackedFragmentSeries.Brush>
						<VisualBrush TileMode="Tile" Viewport="0,0,10,10" ViewportUnits="Absolute" Viewbox="0,0,10,10" ViewboxUnits="Absolute">
							<VisualBrush.Visual>
								<Grid Background="SkyBlue">
									<Path Data="M 0 10 L 10 0" Stroke="DarkBlue" />
									<Path Data="M 0 0 L 10 10" Stroke="DarkBlue" />
								</Grid>
							</VisualBrush.Visual>
						</VisualBrush>
					</ig:StackedFragmentSeries.Brush>
				</ig:StackedFragmentSeries>
				<ig:StackedFragmentSeries ValueMemberPath="Clothing" Title="衣料品(予測)" OutlineMode="Collapsed">
					<ig:StackedFragmentSeries.Brush>
						<VisualBrush TileMode="Tile" Viewport="0,0,10,10" ViewportUnits="Absolute" Viewbox="0,0,10,10" ViewboxUnits="Absolute">
							<VisualBrush.Visual>
								<Grid Background="PaleGreen">
									<Path Data="M 0 10 L 10 0" Stroke="DarkGreen" />
									<Path Data="M 0 0 L 10 10" Stroke="DarkGreen" />
								</Grid>
							</VisualBrush.Visual>
						</VisualBrush>
					</ig:StackedFragmentSeries.Brush>
				</ig:StackedFragmentSeries>
				<ig:StackedFragmentSeries ValueMemberPath="Groceries" Title="食料品(予測)" OutlineMode="Collapsed">
					<ig:StackedFragmentSeries.Brush>
						<VisualBrush TileMode="Tile" Viewport="0,0,10,10" ViewportUnits="Absolute" Viewbox="0,0,10,10" ViewboxUnits="Absolute">
							<VisualBrush.Visual>
								<Grid Background="Violet">
									<Path Data="M 0 10 L 10 0" Stroke="DarkRed" />
									<Path Data="M 0 0 L 10 10" Stroke="DarkRed" />
								</Grid>
							</VisualBrush.Visual>
						</VisualBrush>
					</ig:StackedFragmentSeries.Brush>
				</ig:StackedFragmentSeries>
			</ig:StackedColumnSeries.Series>
		</ig:StackedColumnSeries>
	</ig:XamDataChart.Series>
</ig:XamDataChart >