2013年12月26日

WPF Chart: X軸、Y軸のタイトル指定と軸の範囲指定

   このエントリーをはてなブックマークに追加 Clip to Evernote
前回のXAMLに手を加えて、以下の2つのカスタマイズをしてみました。
・X軸とY軸のタイトル表示
・Y軸の最小値、最大値を指定

このチャートでは、数値ではなく、ブラウザの種類をX軸にとっていますので、CategoryAxis でタイトルを指定しています。Y軸は、LinearAxis を使いタイトルと最小値、最大値を指定しています。

<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="ChartSample2.MainWindow"
        xmlns:my="clr-namespace:ChartSample2"
        Title="MainWindow" Height="350" Width="525">
    <Window.Resources>
        <my:MyData x:Key="myData" />
    </Window.Resources>
    <Grid>
        <chartingToolkit:Chart HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
                               Margin="10" 
                               Title="ブラウザ利用割合"                                
                               DataContext="{Binding Source={StaticResource myData}}">
            
            <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:LinearAxis
                    Orientation="Y"
                    
                    Title="割合"                    
                    Interval="20"
                    Minimum="0" Maximum="80" />
            </chartingToolkit:Chart.Axes>

        </chartingToolkit:Chart>

    </Grid>
</Window>


実行時のスクリーンショットです。

AxisSeting

C#のコードは、前回と同じなので省略します。



 

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

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