2014年01月15日

WPF Chart: X軸の項目名を斜めに傾ける

  
今回は、X軸の項目名を斜めに傾けてみます。

AxisSeting2

AxisLabelStyle のTemplateで、ControlTemplateを適用することで、X軸の項目名を斜めに傾けることができます。 ControlTemplateでは、TextBlockを配置し、TextBlockのLayoutTransformプロパティに、 RotateTransformを設定し、角度を指定してあげます。

これを応用すれば、色をつけたり、フォントを変更したりできますね。

<Window
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:chartingToolkit="clr-namespace:System.Windows.Controls.DataVisualization.Charting;assembly=System.Windows.Controls.DataVisualization.Toolkit" x:Class="ChartAxisLabelStyleSample.MainWindow"
        xmlns:my="clr-namespace:ChartAxisLabelStyleSample"
        Title="MainWindow" Height="350" Width="525">
    <Window.Resources>
        <my:MyData x:Key="myData" />
    </Window.Resources>
    <chartingToolkit:Chart 
       DataContext="{Binding Mode=OneWay, Source={StaticResource myData}}" 
       Margin="10" Name="chart1" 
       Title="ブラウザのシェア">
        <chartingToolkit:Chart.LegendStyle>
            <Style TargetType="Control">
                <Setter Property="Width" Value="10" />
                <Setter Property="Opacity" Value="0" />
            </Style>
        </chartingToolkit:Chart.LegendStyle>
        <chartingToolkit:ColumnSeries                    
           DependentValuePath="Rate" 
           IndependentValuePath="Browser" 
           ItemsSource="{Binding Items}" >
        </chartingToolkit:ColumnSeries>
        <chartingToolkit:Chart.Axes>
            <chartingToolkit:CategoryAxis
              Orientation="X"
              Title="ブラウザ" >                
                <chartingToolkit:CategoryAxis.AxisLabelStyle>
                    <Style TargetType="chartingToolkit:AxisLabel">
                        <Setter Property="Template">
                            <Setter.Value>
                                <ControlTemplate TargetType="chartingToolkit:AxisLabel">
                                    <TextBlock Text="{TemplateBinding FormattedContent}">
                                        <TextBlock.LayoutTransform>
                                            <RotateTransform Angle="-60"/>
                                        </TextBlock.LayoutTransform>
                                    </TextBlock>
                                </ControlTemplate>
                            </Setter.Value>
                        </Setter>
                    </Style>
                </chartingToolkit:CategoryAxis.AxisLabelStyle>
            </chartingToolkit:CategoryAxis>
        </chartingToolkit:Chart.Axes>        
    </chartingToolkit:Chart>
</Window>

C#のコードは、前々回と同じなので、割愛します。


 

この記事へのトラックバックURL

http://trackback.blogsys.jp/livedoor/gushwell/52338952