2014年01月08日

WPFChart: Y軸のラベル位置をずらす

   このエントリーをはてなブックマークに追加 Clip to Evernote
デフォルトのY軸のラベルは、グラフ本体との間隔がなく、少々見づらくなっています。そのため、グラフ本体をすこし右に移動させることで、見易さを改善してみます。

変更前
WPFXAxis1

変更後
WPFXAxis2

AxisLabelStyleで、Y軸のラベル表示をカスタマイズ(TextBlockのマージンを変更)することで、Y軸のラベルとチャートの本体の間をあけることができます。
以下に示したXAML要素をChartの子要素として記述します。

<chartingToolkit:Chart.Axes>
      <chartingToolkit:CategoryAxis
          Orientation="Y" >
          <chartingToolkit:CategoryAxis.AxisLabelStyle>
              <Style TargetType="chartingToolkit:AxisLabel">
                  <Setter Property="Template">
                      <Setter.Value>
                          <ControlTemplate TargetType="chartingToolkit:AxisLabel">
                              <TextBlock Text="{TemplateBinding FormattedContent}"
                                         Margin="0,0,5,0">
                              </TextBlock>
                          </ControlTemplate>
                      </Setter.Value>
                  </Setter>
              </Style>
          </chartingToolkit:CategoryAxis.AxisLabelStyle>
      </chartingToolkit:CategoryAxis>
</chartingToolkit:Chart.Axes>



コード全体を以下に示します。

<Window x:Class="WpfAxisSample.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:my="clr-namespace:WpfAxisSample"
        xmlns:chartingToolkit="clr-namespace:System.Windows.Controls.DataVisualization.Charting;assembly=System.Windows.Controls.DataVisualization.Toolkit" 
        Title="MainWindow" Height="350" Width="525">
    <Window.Resources>
        <my:MyData x:Key="myData" />
    </Window.Resources>
    <Grid>
        <chartingToolkit:Chart 
            Title="Sample Chart"
            DataContext="{Binding Mode=OneWay, Source={StaticResource myData}}" >
            <chartingToolkit:BarSeries
                Title="売上数量"
                  ItemsSource="{Binding Items}"
                DependentValuePath="Value" IndependentValuePath="Year" />
            <chartingToolkit:Chart.Axes>
                <chartingToolkit:CategoryAxis Orientation="Y" >
                    <chartingToolkit:CategoryAxis.AxisLabelStyle>
                        <Style TargetType="chartingToolkit:AxisLabel">
                            <Setter Property="Template">
                                <Setter.Value>
                                    <ControlTemplate TargetType="chartingToolkit:AxisLabel">
                                        <TextBlock Text="{TemplateBinding FormattedContent}"
                                         Margin="0,0,5,0">
                                        </TextBlock>
                                    </ControlTemplate>
                                </Setter.Value>
                            </Setter>
                        </Style>
                    </chartingToolkit:CategoryAxis.AxisLabelStyle>
                </chartingToolkit:CategoryAxis>
            </chartingToolkit:Chart.Axes>
        </chartingToolkit:Chart>
    </Grid>
</Window>


using System.Collections.Generic;
using System.Windows;

namespace WpfAxisSample {
    /// <summary>
    /// MainWindow.xaml の相互作用ロジック
    /// </summary>
    public partial class MainWindow : Window {
        public MainWindow() {
            InitializeComponent();
        }
    }

    public class MyData {
        public MyData() {
            Items = new List<MyItem> {
                new MyItem { Year=2008, Value=1800 },
                new MyItem { Year=2009, Value=2800 },
                new MyItem { Year=2010, Value=2500 },
                new MyItem { Year=2011, Value=3500 },
                new MyItem { Year=2012, Value=3800 },
            };
        }
        public List<MyItem> Items { get; set; }
    }

    public class MyItem {
        public int Year { get; set; }
        public int Value { get; set; }
    }
}


 

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

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