バージョン

軸ラベル テンプレートの構成

XamDataChart コントロールでは、カスタム DataTemplate を提供し、それを Axis オブジェクトの Label プロパティにバインドすることによって、軸ラベルの外観を変更できます。

以下のコード例は、xamDataChart コントロールで CategoryXAxis および NumericYAxis のカスタム DataTemplate を使用する方法を示します。

XAML の場合:

<ig:XamDataChart x:Name="xmDataChart">
    <ig:XamDataChart.Axes>
        <ig:CategoryXAxis x:Name="xmDateXAxis"
                          ItemsSource="{Binding}">
            <ig:CategoryXAxis.LabelSettings>
                <ig:AxisLabelSettings Location="OutsideBottom"
                                      Visibility="Visible" />
            </ig:CategoryXAxis.LabelSettings>
            <ig:CategoryXAxis.Label>
                <DataTemplate>
                    <Border Margin="5"
                            Background="#FF00B3F1"
                            RenderTransformOrigin="0,0">
                        <Border.RenderTransform>
                            <TransformGroup>
                                <RotateTransform Angle="20" />
                                <TranslateTransform  X="30"/>
                            </TransformGroup>
                        </Border.RenderTransform>
                        <TextBlock Foreground="White"
                                   Margin="2"
                                   Padding="1"
                                   Width="68"
                                   FontSize="14.667"
                                   Text="{Binding Item.Date}"
                                   VerticalAlignment="Center"
                                   HorizontalAlignment="Center">
                        </TextBlock>
                    </Border>
                </DataTemplate>
            </ig:CategoryXAxis.Label>
        </ig:CategoryXAxis>
        <ig:NumericYAxis x:Name="xmPriceYAxis">
            <ig:NumericYAxis.LabelSettings>
                <ig:AxisLabelSettings Location="OutsideLeft"
                                      Extent="80"
                                      Visibility="Visible" />
            </ig:NumericYAxis.LabelSettings>
            <ig:NumericYAxis.Label>
                <DataTemplate>
                    <Border Margin="5"
                            HorizontalAlignment="Right"
                            Background="#FF484848">
                            <Border.RenderTransform>
                                <TransformGroup>
                                    <RotateTransform Angle="0" />
                                </TransformGroup>
                            </Border.RenderTransform>
                            <TextBlock Foreground="White"
                                       Margin="2"
                                       Padding="1"
                                       Width="50"
                                       Text="{Binding Item}"
                                       FontSize="14.667"
                                       VerticalAlignment="Center"
                                       HorizontalAlignment="Center">
                            </TextBlock>
                        </Border>
                    </DataTemplate>
                </ig:NumericYAxis.Label>
            </ig:NumericYAxis>
        </ig:XamDataChart.Axes>
</ig:XamDataChart>

以下の画像は、XamDataChart コントロールが CategoryXAxis および NumericYAxis のカスタム DataTemplate でどのように見えるかを示しています。

xamWebDataChart Axes Axis Label Templates 01.png

関連コンテンツ: