Gushwell's Dev Notes

2013年12月26日

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

前回の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#のコードは、前回と同じなので省略します。

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

2013年12月21日

WPFでライフゲームを書く

Webサイト「Gushwell's C# Programming Page」に、「WPF: LifeGame (ライフゲーム)」の記事を掲載しました。

lifegame3

Posted by gushwell at 16:35 │Comments(0) │TrackBack(0)

2013年12月19日

WPFChart: 凡例表示を消す

Chartクラスには、凡例のスタイルを指定する LegendStyleプロパティがあります。
このLegendStyleでスタイルを変更することで、凡例表示を消す事ができます。

LegendStyle01

上に示したチャートでは、グラフの右側が詰まりすぎないように、Widthプロパティを10にし、Opacityプロパティを 0 （完全透過）にしています。
その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="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>

    </Grid>
</Window>

C#のコードは以下の通りです。

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

namespace ChartSample2 {
    public partial class MainWindow : Window {
        public MainWindow() {
            InitializeComponent();
        }
    }

    public class MyData {
        public MyData() {
            Items = new List<MyItem> {
                new MyItem { Rate=56.6, Browser="IE" },
                new MyItem { Rate=18.3, Browser="Firefox" },
                new MyItem { Rate=17.8, Browser="Chrome" },
                new MyItem { Rate=5.4, Browser="Safari" },
                new MyItem { Rate=1.9, Browser="Other" },
            };
        }
        public List<MyItem> Items { get; set; }
    }

    public class MyItem {
        public double Rate { get; set; }
        public string Browser { get; set; }
    }


}

Posted by gushwell at 23:00 │Comments(0) │TrackBack(0)

2013年12月11日

WPF Chart: バブルチャート (Bubble Chart)

バブルチャートを表示するには、BubbleSeriesコンポーネントを使います。

まずは、チャートに表示するデータの定義から。

public class MyData {
    public int Hour { get; set; }
    public int Japanese { get; set; }
    public int Arithmetic { get; set; }
}
public class MyDataList {
    public List<MyData> Items { get; set; }
    public MyDataList() {
        Items = new List<MyData> {
            new MyData {  Hour=25, Japanese=95, Arithmetic=65 },
            new MyData {  Hour=22, Japanese=70, Arithmetic=50 },
            new MyData {  Hour=18, Japanese=85, Arithmetic=95 },
            new MyData {  Hour=14, Japanese=60, Arithmetic=85 },
            new MyData {  Hour=10, Japanese=80, Arithmetic=60 },
            new MyData {  Hour=8,  Japanese=60, Arithmetic=50 },
            new MyData {  Hour=4,  Japanese=50, Arithmetic=40 },
        };
    }
}

ここでは、X軸に、Hourを、Y軸に JapaneseをそしてArithmeticをバルーンのサイズに割り当てることとします。
Hourは家庭での学習時間、Japaneseは国語の点数、Arithmeticは数学の点数という設定です。
データそのものは、僕のでっちあげなので、意味はありません

XAMLを示します。

<Window
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:my="clr-namespace:BubbleChartSample"
        xmlns:chartingToolkit="clr-namespace:System.Windows.Controls.DataVisualization.Charting;assembly=System.Windows.Controls.DataVisualization.Toolkit" 
        x:Class="BubbleChartSample.MainWindow"
        Title="MainWindow" Height="350" Width="525">
    <Window.Resources>
        <my:MyDataList x:Key="myDataList"/>
    </Window.Resources>
    <Grid >
        <chartingToolkit:Chart
            DataContext="{Binding Mode=OneWay, Source={StaticResource myDataList}}">
            <chartingToolkit:BubbleSeries
                ItemsSource="{Binding Items}"
                    DependentValuePath="Japanese" IndependentValuePath="Hour"
                SizeValuePath="Arithmetic"  />
        </chartingToolkit:Chart>
    </Grid>
</Window>

これで次のようなバブルチャートが表示されます。

BubbleChart

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

2013年12月04日

WPF Chart: 散布図 (ScatterChart)

散布図とは、あるデータが持つ２つの属性（項目）を横軸と縦軸にとり、それぞれの値をプロットした図のことです。
これで２つの項目間の関連性を調べることができます。

ScatterSeries を使うとこの散布図を描くことができます。
ScatterSeriesを使う以外は、BarSeriesとかと同じ使い方です。

まずは、チャートに表示するデータの定義。数学と、物理の点数のつもり。

    public class MyData {
        public MyData() {
            Items = new List<MyItem> {
                new MyItem { Mathematics=28,Physics=30  },
                new MyItem { Mathematics=31,Physics=34  },
                new MyItem { Mathematics=35,Physics=40  },
                new MyItem { Mathematics=34,Physics=26  },
                new MyItem { Mathematics=44,Physics=50  },
                new MyItem { Mathematics=47,Physics=43  },
                new MyItem { Mathematics=48,Physics=32  },
                new MyItem { Mathematics=51,Physics=40  },
                new MyItem { Mathematics=53,Physics=54  },
                new MyItem { Mathematics=53,Physics=52  },
                new MyItem { Mathematics=54,Physics=65  },
                new MyItem { Mathematics=55,Physics=59  },
                new MyItem { Mathematics=60,Physics=49  },
                new MyItem { Mathematics=57,Physics=65  },
                new MyItem { Mathematics=63,Physics=58  },
                new MyItem { Mathematics=64,Physics=63  },
                new MyItem { Mathematics=65,Physics=70  },
                new MyItem { Mathematics=69,Physics=75  },
                new MyItem { Mathematics=70,Physics=60  },
                new MyItem { Mathematics=73,Physics=69  },
                new MyItem { Mathematics=78,Physics=78  },
                new MyItem { Mathematics=80,Physics=69  },
                new MyItem { Mathematics=80,Physics=84  },
                new MyItem { Mathematics=85,Physics=80  },
                new MyItem { Mathematics=90,Physics=90  },
                new MyItem { Mathematics=96,Physics=88  },
            };
        }
        public List<MyItem> Items { get; set; }
    }
    public class MyItem {
        public int Physics { get; set; }
        public int Mathematics { get; set; }
    }
}

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="ScatterChartSample.MainWindow"
        xmlns:my="clr-namespace:ScatterChartSample" 
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <chartingToolkit:Chart Title="散布図">
            <chartingToolkit:Chart.DataContext>
                <my:MyData/>
            </chartingToolkit:Chart.DataContext>
            <chartingToolkit:ScatterSeries 
                    ItemsSource="{Binding Items}"
                    Title="点数"
                    IndependentValuePath="Mathematics"
                    DependentValuePath="Physics" />
        </chartingToolkit:Chart>
    </Grid>
</Window>

実行すると、以下のような散布図が表示されます。

ScatterSeries