2014年01月29日

WPF Chart: 2軸グラフを表示する

   このエントリーをはてなブックマークに追加 Clip to Evernote
前回は、2つの棒グラフを表示する例をお見せしましたが、今度は、棒グラフと折れ線グラフの複合グラフを表示してみます。

LineAndColumn

前回のXAMLが理解できていれば、どうやるかは容易に想像できますよね。 XAMLを示します。

<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="LineAndColumnSample.MainWindow"
        xmlns:local="clr-namespace:LineAndColumnSample"
        Title="MainWindow" Height="350" Width="525">
    <Window.Resources>
        <local:MyResults x:Key="myResults" />
    </Window.Resources>
    <Grid>
        <chartingToolkit:Chart
            DataContext="{Binding Source={StaticResource myResults}}"
            Margin="10" Name="chart1"
            >
            <chartingToolkit:ColumnSeries                   
                Title="累計回数"
                DependentValuePath="TotalCount"
                IndependentValuePath="Hour"
                ItemsSource="{Binding Items}" />
            <chartingToolkit:LineSeries      
                Title="回数"
                DependentValuePath="Count"
                IndependentValuePath="Hour"
                ItemsSource="{Binding Items}" >
            </chartingToolkit:LineSeries>
        </chartingToolkit:Chart>
    </Grid>
</Window>

C#も示しておきます。
ランダムにデータを作成するようにしてみました。

using System;
using System.Collections.ObjectModel;
using System.Windows;
// 棒グラフと折れ線グラフを同時に表示する。
namespace LineAndColumnSample {
    public partial class MainWindow : Window {
        public MainWindow() {
            InitializeComponent();
        }
    }
    public class MyResults {
        public ObservableCollection<MyResult> Items { get; set; }
        public MyResults() {
            Random rnd = new Random();
            Items = new ObservableCollection<MyResult>();
            var old = new MyResult();
            for (int h = 9; h < 18; h++) {
                var r = new MyResult();
                r.Hour = h;
                r.Count = rnd.Next(25, 50);
                r.TotalCount = old.TotalCount + r.Count;
                Items.Add(r);
                old = r;
            }
        }
    }
    public class MyResult {
        public int Hour { get; set; }
        public int Count { get; set; }
        public int TotalCount { get; set; }
    }
}

これを実行したのが以下の画面。

LineAndColumn0

でも、折れ線グラフが、下のほうにあって、なんだか見づらいです。 これを縦軸が左右にある 2 軸グラフにしてみます。
XAMLです。

<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="LineAndColumnSample.MainWindow"
        xmlns:local="clr-namespace:LineAndColumnSample"
        Title="MainWindow" Height="350" Width="525">
    <Window.Resources>
        <local:MyResults x:Key="myResults" />
    </Window.Resources>
    <Grid>
        <chartingToolkit:Chart
            DataContext="{Binding Source={StaticResource myResults}}"
            Margin="10" Name="chart1"
            >
            <chartingToolkit:ColumnSeries                   
                Title="累計回数"
                DependentValuePath="TotalCount"
                IndependentValuePath="Hour"
                ItemsSource="{Binding Items}" />
            <chartingToolkit:LineSeries      
                Title="回数"
                DependentValuePath="Count"
                IndependentValuePath="Hour"
                ItemsSource="{Binding Items}" >
                <chartingToolkit:LineSeries.DependentRangeAxis>
                    <chartingToolkit:LinearAxis
                        Orientation="Y"
                        Interval="10"
                        Minimum="0"
                        Maximum="55" />
                </chartingToolkit:LineSeries.DependentRangeAxis>
            </chartingToolkit:LineSeries>
        </chartingToolkit:Chart>
    </Grid>
</Window>

LineSeriesオブジェクトのDependentRangeAxisプロパティに、最小値、最大値、間隔等を指定したLinearAxisオブジェクトを設定しています。
これにより、折れ線グラフ用に、右側にもうひとつの縦軸を表示することができます。
この例では、折れ線グラフのY軸の値の範囲を 0 〜 55 に、その間隔を 10 に設定しています。

最後に、もう一度実行した画面を示します。

LineAndColumn
  

Posted by gushwell at 22:00Comments(0)TrackBack(0)

2014年01月22日

WPF Chart: 2種類の棒グラフを表示する

   このエントリーをはてなブックマークに追加 Clip to Evernote
Chart要素の子要素として、複数の Series 要素を設定することで、下記のようなチャートを表示できます。

TowColumnSample

XAMLは、以下のようになります。
Chartの子要素として、ColumnSeries を2つ設定しています。

<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="WpfTwoColumnSeriesSample.MainWindow"
        xmlns:my="clr-namespace:WpfTwoColumnSeriesSample"
        Title="MainWindow" Height="350" Width="525">
    <Window.Resources>
        <my:MyData x:Key="myData" />
    </Window.Resources>
    <chartingToolkit:Chart
            DataContext="{Binding Source={StaticResource myData}}"
            Margin="10" Name="chart1" >
        <chartingToolkit:ColumnSeries                   
                Title="部門A"
                DependentValuePath="Value"
                IndependentValuePath="Year"
                ItemsSource="{Binding SectionA}" />
        <chartingToolkit:ColumnSeries                   
                Title="部門B"
                DependentValuePath="Value"
                IndependentValuePath="Year"
                ItemsSource="{Binding SectionB}" />
    </chartingToolkit:Chart>
</Window>

C#のコードです。

using System.Collections.Generic;
using System.Windows;
namespace WpfTwoColumnSeriesSample {
    public partial class MainWindow : Window {
        public MainWindow() {
            InitializeComponent();
        }
    }
    public class MyData {
        public MyData() {
            SectionA = new List<MyItem> {
                new MyItem { Year=2009, Value=32 },
                new MyItem { Year=2010, Value=40 },
                new MyItem { Year=2011, Value=43 },
                new MyItem { Year=2012, Value=44 },
                new MyItem { Year=2013, Value=45 },
            };
            SectionB = new List<MyItem> {
                new MyItem { Year=2009, Value=10 },
                new MyItem { Year=2010, Value=12 },
                new MyItem { Year=2011, Value=20 },
                new MyItem { Year=2012, Value=27 },
                new MyItem { Year=2013, Value=36 },
            };
        }
        public List<MyItem> SectionA { get; set; }
        public List<MyItem> SectionB { get; set; }
    }
    public class MyItem {
        public int Year { get; set; }
        public int Value { get; set; }
    }
}
  
Posted by gushwell at 22:00Comments(0)TrackBack(0)

2014年01月19日

WindowsXPのシェアは?(当Blogのアクセス解析から)

   このエントリーをはてなブックマークに追加 Clip to Evernote
WindowsXPのサポート期限が迫ってきていますが、WindowsXPの利用はどんなものなのか、このブログのログ解析から調べてみました。

直近2ヶ月の結果です。

Windows割合

Windows8が出た直後は、50%弱がXPからのアクセスだと記憶してますので、一般的にはどうかわかりませんが、少なくとも僕のブログのアクセスログから判断すれば、随分とXPの利用者も減ったみたいです。
とは言え、僕の感覚からするとまだ10%もいるの?という感じですが...
Windows8は、まだこれからというところすかね。
NT の 3.95%というのは何だろうか? 3.95%というのはかなりの割合だと思うんだけど...

  
Posted by gushwell at 21:25Comments(0)TrackBack(0)

2014年01月15日

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

   このエントリーをはてなブックマークに追加 Clip to Evernote
今回は、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#のコードは、前々回と同じなので、割愛します。
  
Posted by gushwell at 22:00Comments(0)TrackBack(0)

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; }
    }
}
  
Posted by gushwell at 23:00Comments(0)TrackBack(0)