2013年11月27日

WPF Chart: 円グラフ (PieChart)

   このエントリーをはてなブックマークに追加 Clip to Evernote
円グラフを表示するには、PieSeriesコンポーネントを使います。

ここではブラウザのシェアを円グラフにしてみました。(実際の市場シェア値とは異なります)

PieChartSample


まずは、モデル側のブラウザシェアを保持するクラスのC#のコード。

public class BrowserRate {
    public List<KeyValuePair<string, double>> Items { get; set; }
    public BrowserRate() {
        Items = new List<KeyValuePair<string, double>>();
        Items.Add(new KeyValuePair<string, double>("IE", 56.6));
        Items.Add(new KeyValuePair<string, double>("Firefox", 18.3));
        Items.Add(new KeyValuePair<string, double>("Chrome", 17.8));
        Items.Add(new KeyValuePair<string, double>("Safari", 5.4));
        Items.Add(new KeyValuePair<string, double>("Opera", 1.5));
        Items.Add(new KeyValuePair<string, double>("Other", 0.4));
    }
}

KeyValuePairオブジェクトのKey部にブラウザ名をValue部にシェア割合を割り当て、 それをListに保持するようにしました。

円グラフを表示するには、PieChartコンポーネントを使います。 上記オブジェクトをChartのDataContextに設定すれば円グラフが表示できます。

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="PieChartSample.MainWindow"
        xmlns:my="clr-namespace:PieChartSample"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <chartingToolkit:Chart
            Title="ブラウザの利用割合" >
            <chartingToolkit:Chart.DataContext>
                <my:BrowserRate/>
            </chartingToolkit:Chart.DataContext>
            <chartingToolkit:PieSeries Margin="0"
                                       ItemsSource="{Binding Path=Items}"
                                       IndependentValuePath="Key"
                                       DependentValuePath="Value"  />
        </chartingToolkit:Chart>
     </Grid>
</Window>

今回は、Windows.Resourcesを使わずに、 Chart.DataContextに直接、BrowserRateオブジェクトを割り当ててみました。

  

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

2013年11月17日

WPF Chart:横棒グラフ (BarChart)

   このエントリーをはてなブックマークに追加 Clip to Evernote
今回は横棒グラフに挑戦です。
といっても、縦棒グラフと横棒グラフの違いは、ColumnSeriesをBarSeriesに変えるだけなのですが… データソースは、前回と同じものを利用します。

BarChart

その他の部分でもXAMLに手を加えてみました。

以下XAMLです。

<Window
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:my="clr-namespace:BarChartSample"
        xmlns:chartingToolkit="clr-namespace:System.Windows.Controls.DataVisualization.Charting;assembly=System.Windows.Controls.DataVisualization.Toolkit" x:Class="BarChartSample.MainWindow"
        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>
    </Grid>
</Window>

BarSeries以外で前回と異なるのは、MyDataオブジェクトを、Window.DataContextに設定するのではなく、 Windows.Resourcesにリソースとして登録しておき、Chartコンポーネントの DataContextに設定している点です。
どちらが良いかは意見の分かれるところですが、MyDataオブジェクトが、グラフのViewに直結した クラスだとすれば、こちらのほうが良いのかなという気もします。

今回も、ChartとBarSeriesのTitleプロパティを設定しました。
これでチャートの全体のタイトルと、凡例のタイトルを設定することができます。
DependentValuePath、IndependentValuePathの設定は、横棒グラフと同じです。 これが、X軸、Y軸という指定だったら、こうはいきませんね。

ColumnChartとダブりますが、MyDataクラスも掲載しておきます。

    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:30Comments(0)TrackBack(0)

『C#プログラミングレッスン』の「C#5.0編」のバックナンバー

   このエントリーをはてなブックマークに追加 Clip to Evernote
メールマガジン『C#プログラミングレッスン』のバックナンバー「C#5.0編」を

メールマガジン『C#プログラミングレッスン』書庫

からダウンロードできるようにしました。
  
Posted by gushwell at 10:48Comments(0)TrackBack(0)

2013年11月10日

WPF Chart: はじめてのチャート (縦棒グラフ)

   このエントリーをはてなブックマークに追加 Clip to Evernote
1年以上続けてきたWPFサンプルですが、ひとまず終わりにして、今度は、WPFのチャート機能に挑戦します。
WPFでチャート(グラフ)を表示するには、WPF toolkitを使う必要があるのですが、 この WPF toolkitは、WPF4には対応していないみたいです。
.NET Framework4.xから、.NET Framework2ベースのアセンブリを呼び出すこともできますので、 WPF4から、WPF3.5用の WPF toolkitを使うこともできるのかも知れませんが試してません。
どうせならば、WPF4に対応したものを使いたい。

なので、WPF4でチャートを使う方法はないかなーと、Webをさまよっていたら、見つかりました。

MSDN Blogs の Delay's Blog にWPF4に対応したChartコントロールがアップロードされています。
Bitbucketにも、WPF4に対応した、WPF-Toolkitが登録されているようですが、 今回は、前述のライブラリを利用して、チャートのサンプルを示していこうと思います。


■準備

では、早速、ダウンロードしましょう。まず、以下のURLにアクセスします。

http://blogs.msdn.com/b/delay/archive/2010/04/20/phone-y-charts-silverlight-wpf-data-visualization-development-release-4-and-windows-phone-7-charting-sample.aspx

表示されたページを少しスクロールすると以下の文言がありますので、これをクリックします。ダウンロードが開始されます。

[Click here to download the SilverlightWpfDataVisualization solution including complete source code and pre-compiled binaries for all platforms.]

すると、SilverlightWpfDataVisualization.zip がダウンロードされますので、このzipファイルを展開します。
展開した中に、Binariesフォルダがあり、その下に、WPF4フォルダがあります。
この中の、System.Windows.Controls.DataVisualization.Toolkit.dll が、Chartコントロールが入ったアセンブリファイルになります。
これをプロジェクトの参照設定に追加すれば、Chartが利用可能になります。

この System.Windows.Controls.DataVisualization.Toolkit.dll ファイルを 任意のフォルダに置いておきます。


■プロジェクトの作成

これで準備は整いましたので、簡単な縦棒グラフを描いてみましょう。
プロジェクトの新規作成で、WPFアプリケーションプロジェクトを作成します。
プロジェクトの名前は、ColumnChartSampleとでもしましょう。


■Toolkitをツールボックスへ追加

次に、 Visual Studioのツールボックスウインドウの空白部分を右クリックし、メニューから「タブの追加」を選びます。

ColumnChartSample1

新しいタブができますので、名前を WPFChartとしてください。
先ほどダウンロードしたSystem.Windows.Controls.DataVisualization.Toolkit.dll をエクスプローラから、 WPFChartタブの上にドラッグ&ドロップします。
ドラッグ&ドロップすると、System.Windows.Controls.DataVisualization.Toolkit.dll内にある チャートコントロールが、ツールボックスに追加されます。

ColumnChartSample2


■デザイナーでXAMLを編集

ツールボックスから、Chartコントロールを デザイナー画面の MainWondow の貼り付けます。 これでチャートを表示する枠ができました。
System.Windows.Controls.DataVisualization.Toolkit.dll の参照設定はこれで自動で行われます。

ColumnChartSample3

次に、ColumnSeries コントロールを、先ほど貼り付けた Chartコントロール画面の上にドラッグ&ドロップします。
Chart、ColumnSeries のレイアウト関連のロパティを変更し、表示を整えます。

ColumnChartSample4

この時点のXAMLを示します。

<Window
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:visualizationToolkit="clr-namespace:System.Windows.Controls.DataVisualization;assembly=System.Windows.Controls.DataVisualization.Toolkit" 
        xmlns:chartingToolkit="clr-namespace:System.Windows.Controls.DataVisualization.Charting;assembly=System.Windows.Controls.DataVisualization.Toolkit" 
        x:Class="ColumnChartSample.MainWindow"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <chartingToolkit:Chart Margin="20" >
            <chartingToolkit:ColumnSeries />
        </chartingToolkit:Chart>
    </Grid>
</Window>


■モデル(チャートの元データ)の作成

次にやることは、グラフに表示する数値データを用意することです。
ここでは、C#のコードに直書きします。

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; }
}


■モデルをChartにバインド

ここまでできれば、あとば、 ColumnSeries の ItemsSource にバインドしてあげるだけです。

<Window
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:my="clr-namespace:ColumnChartSample"
        xmlns:visualizationToolkit="clr-namespace:System.Windows.Controls.DataVisualization;assembly=System.Windows.Controls.DataVisualization.Toolkit" 
        xmlns:chartingToolkit="clr-namespace:System.Windows.Controls.DataVisualization.Charting;assembly=System.Windows.Controls.DataVisualization.Toolkit" 
        x:Class="ColumnChartSample.MainWindow"
        Title="MainWindow" Height="350" Width="525">
    <Window.DataContext>
        <my:MyData />
    </Window.DataContext>
    <Grid>
        <chartingToolkit:Chart Margin="20" >
            <chartingToolkit:ColumnSeries 
                ItemsSource="{Binding Items, Mode=OneWay}"
                DependentValuePath="Value"
                IndependentValuePath="Year" />
        </chartingToolkit:Chart>
    </Grid>
</Window>


なお、バインドするときに、Year, Value がIndependentValue、DependentValue の どちらにあたるのかを指定しておきます。
IndependentValueはなんと約すのでしょうか? 独立値かな。
DependentValue は、従属値?
日本語でなんていうかは置いといて、3500とか、3800という値は、それ自身のみでは意味を持たず、 年に従属している、一方、2011, 2012という年を表す値はそれ自身が独立して意味を持つという ことを理解できれば、

DependentValuePath="Value"
IndependentValuePath="Year"

という記述が何を意味しているのかが分かると思います。
物理的な X軸、Y軸を表しているわけではありません。


■プログラムの実行

これで完成です。
F5キーを押して実行してみましょう。

ColumnChartSample5

うまくいきました。
あっ、でも右側の凡例の「Series 1」というのが気になりますね。これは、ColumnSeries にTtileプロパティを設定することで、変更できます。 それとついでに、Chart コントロールの Title プロパティにも値を設定しておきましょう。
<chartingToolkit:Chart Margin="20" Title="縦棒グラフのサンプル">
    <chartingToolkit:ColumnSeries 
        ItemsSource="{Binding Items, Mode=OneWay}"
        DependentValuePath="Value"
        IndependentValuePath="Year" 
        Title="売上数量"
        />
</chartingToolkit:Chart>

ColumnChartSample6

次回以降、横棒グラフ、折れ線グラフ、円グラフおよび、グラフ表示のカスタマイズについて サンプルを順次掲載していく予定です。

ちなみに、ここで示すサンプルコードは、WPF3.5でもそのまま動作するはずです。
  
Posted by gushwell at 22:00Comments(0)TrackBack(0)

2013年11月05日

WPFサンプル・目次

   このエントリーをはてなブックマークに追加 Clip to Evernote
昨年(2012年)から掲載しているWPFのサンプルコードですが、随分と数が増えてきたので、目次を作成しました。
※ この目次の順序は、記事の掲載順とは若干変更しています。

コントロール リソースの利用 データ・バインディング イベント コマンド 2D Graphics スタイル トリガー DataTemplate等によるコントロールのカスタマイズ アニメーション ドラッグ・ドロップ アプリケーション・ファイル その他   
Posted by gushwell at 21:30Comments(6)TrackBack(0)

2013年11月04日