はじめに

深層学習の勉強中に、プログラムでグラフを描画したときのメモです。WPFよりもWindows Formsで作る記事が多かったので、WPFでも描けるように色々調べました。

お品書き

参照の追加
XAMLデザイン
描画ロジック
実行結果

1. 参照の追加

どうやら Windows Forms の参照を使うのが一般的らしいので、WPFアプリを作成して参照を追加します。

WindowsFormIntegration
System.Windows.Forms
System.Windows.Forms.DataVisualization

ディレクティブは次の2つを使います

using System.Windows.Forms.DataVisualization.Charting;
using System.Windows.Forms.Integration;

2. XAMLデザイン

ボタンをクリックしたらグラフを表示させるようにしたいので、グラフコントロールを持ったGridを左側に配置しました。 wfcの属性を付け加える必要があります。

xmlns:wfc="clr-namespace:System.Windows.Forms.DataVisualization.Charting;assembly=System.Windows.Forms.DataVisualization"
<Grid>
        <Button Content="ステップ関数" HorizontalAlignment="Left" Margin="650,45,0,0" VerticalAlignment="Top" Width="75" Click="Button_Click"/>
        <Grid HorizontalAlignment="Left" Height="340" Margin="56,45,0,0" VerticalAlignment="Top" Width="430" Name="GraphArea">
            <WindowsFormsHost>
                <wfc:Chart Name="Graph"/>
            </WindowsFormsHost>
        </Grid>
    </Grid>

f:id:takunology:20191029212219p:plain

3. 描画ロジック

使用するコントロールは Windows Forms のものなので、これをXAMLのGridに適用させます。グラフの目盛りは MaximumとMinimumを設定したうえで、Intervalを設定しないと反映されません。関数をグラフ化するにはなるべく連続データを扱いたいのでdouble変数を for 文でぶん回しています。

今回描くのはステップ関数です。他にも三角関数や対数関数など、Points.AddXY(x, y) の y の値を変更すれば好きなグラフを描けます。

public MainWindow()
{
    InitializeComponent();
}

private void Button_Click(object sender, RoutedEventArgs e)
{
    var windowsFormsHost = (WindowsFormsHost)GraphArea.Children[0];
    var graph = (Chart)windowsFormsHost.Child;

    // ChartArea追加
    graph.ChartAreas.Add("Graph1");
    // Seriesの作成と値の追加
    Series seriesStep = new Series();
    seriesStep.ChartType = SeriesChartType.Line;
    graph.ChartAreas[0].AxisX.Maximum = 2; //そのグラフの最小値
    graph.ChartAreas[0].AxisX.Minimum = -2; //そのグラフの最大値
    graph.ChartAreas[0].AxisX.Interval = 1; //目盛りの間隔（最大値と最小値の設定が必要）

    int y = 0; //ステップ関数の初期値
    for (double x = -2; x <= 2; x = x + 0.001)
    {
        if (x > 0)
        {
            y = 1;  //0を超えたら1を出力
        }
        seriesStep.Points.AddXY(x, y);
        seriesStep.BorderWidth = 3;
    }
    graph.Series.Add(seriesStep);
}