ぺぷしのーげん

アプリケーションエンジニアによる雑記ブログ

WPFのチャートグラフコントロールSparrowChartで折れ線グラフを描く方法

f:id:hazakurakeita:20160429124822p:plain
4月に紹介したWPFの無料チャートライブラリSparrowChart。今後使い方を説明すると言って早2ヵ月。てめーいつ更新するんだという勢いで記事のPVも増えてきたので、重い腰を上げて今回は折れ線グラフの描き方を説明します!w

SparrowChartのインストール

僕はNugetを使ってプロジェクトにインストールしました。Visual StudioにNugetパッケージマネージャーをインストールし、パッケージマネージャーコンソールからコマンドを叩きました。

PM> Install-Package Sparrow.Chart.Wpf

Nugetについてはググればいくらでも出てくるので、そちらを参照してください。
yohshiy.blog.fc2.com

XAMLの書き方

インストールしたら早速XAMLでSparrowChartを表示してみましょう。

<Window x:Class="SparrowChart.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:SparrowChart"
        xmlns:sparrow="http://sparrowtoolkit.codeplex.com/wpf"
        mc:Ignorable="d"
        Title="MainWindow" Height="539.767" Width="535.234">
    <Grid>
        <sparrow:SparrowChart Visibility="Visible" VerticalAlignment="Top">
            <sparrow:SparrowChart.XAxis>
                <sparrow:LinearXAxis MinValue="0" MaxValue="10" Visibility="Visible"/>
            </sparrow:SparrowChart.XAxis>
            <sparrow:SparrowChart.YAxis>
                <sparrow:LinearYAxis MinValue="0" MaxValue="20" Visibility="Visible"/>
            </sparrow:SparrowChart.YAxis>
            <sparrow:LineSeries PointsSource="{Binding Path=Points}" XPath="X" YPath="Y"/>
            <sparrow:LineSeries PointsSource="{Binding Path=Points2}" XPath="X" YPath="Y" Stroke="Red" StrokeThickness="2"/>
        </sparrow:SparrowChart>
    </Grid>
</Window>

これで簡単な折れ線グラフを表示できます。縦軸と横軸が不要であってもSparrowChart.XAxisとYAxisは消さないでください。消してしまうとグラフが描画されません。表示したくない場合はVisibilityをHiddenやCollapsedにしましょう。

<sparrow:LineSeries PointsSource="{Binding Path=Points}" XPath="X" YPath="Y"/>
<sparrow:LineSeries PointsSource="{Binding Path=Points2}" XPath="X" YPath="Y" Stroke="Red" StrokeThickness="2"/>

ここが折れ線そのものの定義となります。折れ線グラフにはLineSeriesを使います。色は自動で割り当ててくれるので、指定せずとも同じ色になることはないのですが、Strokeプロパティで変更することもできます。他にもStrokeThicknessプロパティで線の太さを変えるなど、一般的なプロパティでグラフ描画を変更できるようになっています。

コードの書き方

さて、これだけでは当然グラフは描画されません。次はコードの書き方です。今回は表示についてだけなので、コードはMainWindow.xaml.csに直接書いてしまいます。

namespace SparrowChart
{
    /// <summary>
    /// MainWindow.xaml の相互作用ロジック
    /// </summary>
    public partial class MainWindow : Window
    {
        public ObservableCollection<Point> Points { get; set; }
        public ObservableCollection<Point> Points2 { get; set; }

        public MainWindow()
        {
            InitializeComponent();

            Points = new ObservableCollection<Point>();
            Points2 = new ObservableCollection<Point>();

            Points.Add(new Point { X = 0, Y = 0 });
            Points.Add(new Point { X = 1, Y = 5 });
            Points.Add(new Point { X = 2, Y = 7 });
            Points.Add(new Point { X = 3, Y = 14 });
            Points.Add(new Point { X = 4, Y = 10 });
            Points.Add(new Point { X = 5, Y = 12 });
            Points.Add(new Point { X = 6, Y = 7 });
            Points.Add(new Point { X = 7, Y = 18 });
            Points.Add(new Point { X = 8, Y = 18 });
            Points.Add(new Point { X = 9, Y = 10 });
            Points.Add(new Point { X = 10, Y = 14 });

            Points2.Add(new Point { X = 0, Y = 8 });
            Points2.Add(new Point { X = 2, Y = 3 });
            Points2.Add(new Point { X = 6, Y = 10 });
            Points2.Add(new Point { X = 10, Y = 5 });
            Points2.Add(new Point { X = 4, Y = 0 });

            this.DataContext = this;
        }
    }
}

XAMLのLineSeriesのPointSourceプロパティにPointとPoint2がバインディングされていました。このPointSourceプロパティにはObservableCollection型の変数をバインディングしてください。Point構造体にはXとYプロパティがありますが、これらはXAMLのXPathとYPathで指定されています。このため、Point構造体を使わなくてもXPathとYPathでプロパティを指定すればプロパティ名はXYである必要はありません。(あえて変えるメリットも分かりませんが)

実行結果

f:id:hazakurakeita:20160628010833p:plain

折れ線グラフが表示できました。

Points2.Add(new Point { X = 0, Y = 8 });
Points2.Add(new Point { X = 2, Y = 3 });
Points2.Add(new Point { X = 6, Y = 10 });
Points2.Add(new Point { X = 10, Y = 5 });
Points2.Add(new Point { X = 4, Y = 0 });

興味深いのは、XYを自動で並べ替えてくれるのではなく、Addした順に点が結ばれるということです。最後の点は(X=4, Y=0)ですが、(X=10, Y=5)の点から(X=4, Y=0)に線が結ばれています。感覚的には(X=2, Y=3)と(X=6, Y=10)の間に入りそうなので気をつけれければいけません。

まとめ

ということで、以上が折れ線グラフの描き方でした。バインディングで表示するので、グラフを動的に描画することも可能です。これはまた別の機会にソースコードを公開できればと思います(簡単ですけどね。。)


おしまい。