【WPF】いちばんやさしいScottPlot の使い方（WindowsForm共通）

フリーのチャートライブラリの中では、高機能且つ高速なのに知名度が低いScottPlot。

初期状態でデザインもそこそこなので、私としては一番のお気に入りです。

ただ、公式サイトのサンプルは充実しているというものの、いずれも具体的なコーディングばかりで、体系的な部分がほとんど解説されていません。

今回は、NuGetによるインストール方法と、基本的な描画手順について解説します。

この記事を読んだ後で公式サイトの CookBook を読んでいただくと、より分かりやすくなると思います。

尚、 2021年５月からVer 4.1 になり、機能が拡張され、記述方法が少し変わっています。この記事を読み終えたら、こちらのページで最新版の変更点、記述方法について確認しておいてください。

Contents

1 ScottPlotの概要
2 インストール方法
3 使い方
4 ScottPlotの構造
5 サンプルソース
6 ちょっと気になる点
7 まとめ

ScottPlotの概要

WPF,WindowsFormの両方をサポートするフリーのチャートライブラリです。

WindowsForm だと標準でChart というコントロールが付属していますが、WPFの場合はチャート用のコントロールが標準で付属していないので、サードパーティのチャートコントロールを使う機会が多くなります。

では、どんなチャートが作成できるのでしょうか。

詳しくはこちらの公式サイトに掲載されていますが、次のようなグラフが簡単に表示できます。

何の変哲もないグラフですが、一般的なチャートライブラリで描画可能な、折れ線グラフ、円グラフ、縦棒グラフ、横棒グラフ、積み上げグラフ、レーダーチャート、散布図、箱ひげ図、ヒートマップに対応しています。

また、他のチャートライブラリであまりサポートされていない機能として、文字列を任意の位置に表示したり、回帰分析による直線の傾きを求めるメソッド、標準偏差や平均などの統計情報を求めるメソッドが用意されているのも特徴です。

インストール方法

Nuget から scott で検索して下さい。

Windows Form版とWPF 版がありますので、必要な方をインストールして下さい。

Nugetの使い方に関しては、こちらの記事に記載しています。

使い方

プロジェクトにインストールすると、Visual Studioのツールボックスにコントロールが表示されます。

OxyPlotやLiveChartsなどはツールボックスにコントロールが表示されないので、XAMLでゴリゴリ書かなければなりませんが、ScottPlotはドラッグ＆ドロップで張り付けて使用できます。

ScottPlotの構造

ScottPlotは WpfPlot クラスのplt プロパティで取得できる Plot クラスに対して、タイトルやプロットデータ、縦軸横軸の設定などを行います。

そして、最後に WpfPlot クラスの Render メソッドを呼び出すことで、画面に表示されます。

具体的には、次のような手順になります。

まず、Visual Studio のレイアウトエディタで、ScottPlotコントロールをドラッグ＆ドロップして、uxChart という名前を付けると、次のようなXAMLになると思います。

<Window x:Class="ScotPlotTest.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:ScotPlotTest"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="1320" >
    <Grid>
        <WpfPlot x:Name="uxChart" Margin="0,47,0,0"/>
    </Grid>
</Window>

<Window x:Class="ScotPlotTest.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:ScotPlotTest"

mc:Ignorable="d"

Title="MainWindow" Height="450" Width="1320" >

<Grid>

</Grid>

</Window>

uxChart コントロールを使って、折れ線グラフを描画する場合、C#ソースコードは次の様になります。

uxChart.plt.Title(title);
uxChart.plt.PlotSignalXY(xs,ys);
uxChart.Render();

uxChart.plt.Title(title);

uxChart.plt.PlotSignalXY(xs,ys);

uxChart.Render();

最初にタイトルを表示するために Title メソッドを呼んでいます。

次に、PlotSignalXY メソッドにｘ座標、y座標のデータ (double[])を渡しています。

最後に、Renderメソッドを呼ぶことで、折れ線グラフが画面に表示されます。

簡単ですよね。

複数の折れ線を重ねて描画する場合、PlotSignalXY を複数回呼んで、最後に Render メソッドを呼ぶだけです。

サンプルソース

では、よく使いそうな設定を網羅した簡単なサンプルソースを紹介しておきます。

メソッド化しているので、引数にScottPlot のコントロールを渡してもらえれば、冒頭のチャート画像と同じものが表示されます。

uxChart という名前を付けたと仮定すると、次の方法で呼び出せます。

そうそう、C#ソースコードの参照設定に ScottPlot を記述しておいて下さいね。

//参照設定を忘れずに
using ScottPlot;

//メソッドの呼び出し方は、引数にScottPlot のコントロールを渡すだけ
DrawSample(uxChart);

//参照設定を忘れずに

using ScottPlot;

//メソッドの呼び出し方は、引数にScottPlot のコントロールを渡すだけ

DrawSample(uxChart);

以下が、実際のソースコードになります。

それぞれの設定にコメントを入れていますので、どんな設定が可能かがおおよそ分かると思います。

private void DrawSample(WpfPlot chart)
{
　　//描画するデータの作成
    Random rand = new Random(0);
    var xs = Enumerable.Range(0,100).Select(i=>(double)i).ToArray();
    var ys1 = DataGen.RandomWalk(rand, 100);
    var ys2 = DataGen.Sin(100,mult:25);
    var ys3 = DataGen.RandomWalk(rand, 100);
    var ys = new double[][] { ys1, ys2, ys3 };

    //折れ線グラフを作成し、プロットデータをCSVに書き出す
    for (int i = 0; i < 3; i++)
    {
        //折れ線グラフを表示
        var name = "Line_" + i.ToString();
        var sig = chart.plt.PlotScatter(xs,ys[i],label:name);

        //プロットデータをCSV形式で保存
        sig.SaveCSV(@".\" + name + ".csv");
    }

    //任意のドットを描画
    chart.plt.PlotPoint(50, 20, color: System.Drawing.Color.Magenta, markerSize: 10);

    //グラフのタイトルを表示
    chart.plt.Title("Signal Plot サンプル", fontName: "游ゴシック");

    //縦軸のタイトル
    chart.plt.YLabel("縦軸のタイトル", fontName: "游ゴシック",fontSize:14);

    //横軸のタイトル
    chart.plt.XLabel("横軸のタイトル",fontName: "游ゴシック", fontSize: 14);

    //クライアント座標（左上が原点となるコントロール上の座標）で任意の文字列を表示
    chart.plt.PlotAnnotation("任意の注意事項", 10,200,
        fontSize: 24, fontName: "游ゴシック", fontColor: System.Drawing.Color.Red, shadow: true,
        fill: true, fillColor: System.Drawing.Color.White, fillAlpha: 1, lineWidth: 2);

    //表示しているグラフのスケール座標に任意の文字列を表示
    chart.plt.PlotText("スケール座標を使った文字列表示", 30,-20, fontSize: 16, bold: true, color: System.Drawing.Color.Magenta);

    //補助線の設定
    chart.plt.Grid(xSpacing:5, lineStyle: LineStyle.Dot, color: System.Drawing.Color.LightGray, lineWidth: 2);

    //凡例の表示
    chart.plt.Legend(location:legendLocation.upperRight,fixedLineWidth: false);

    //グラフ表示の上限下限を設定
    chart.plt.AxisBounds(minX: 5, maxX:80, minY: double.NegativeInfinity, maxY: double.PositiveInfinity);

    //フレームの表示
    chart.plt.Frame(right:false,top:false);

    //背景色の設定
    chart.plt.Style(System.Drawing.Color.Cyan, System.Drawing.Color.LightCyan);

    //レンダリング（グラフ表示）
    chart.Render();

    //グラフをイメージファイルとして保存
    chart.plt.SaveFig(@".\fig.png");
}

private void DrawSample(WpfPlot chart)

{

　　//描画するデータの作成

Random rand = new Random(0);

var xs = Enumerable.Range(0,100).Select(i=>(double)i).ToArray();

var ys1 = DataGen.RandomWalk(rand, 100);

var ys2 = DataGen.Sin(100,mult:25);

var ys3 = DataGen.RandomWalk(rand, 100);

var ys = new double[][] { ys1, ys2, ys3 };

//折れ線グラフを作成し、プロットデータをCSVに書き出す

for (int i = 0; i < 3; i++)

{

//折れ線グラフを表示

var name = "Line_" + i.ToString();

var sig = chart.plt.PlotScatter(xs,ys[i],label:name);

//プロットデータをCSV形式で保存

sig.SaveCSV(@".\" + name + ".csv");

}

//任意のドットを描画

chart.plt.PlotPoint(50, 20, color: System.Drawing.Color.Magenta, markerSize: 10);

//グラフのタイトルを表示

chart.plt.Title("Signal Plot サンプル", fontName: "游ゴシック");

//縦軸のタイトル

chart.plt.YLabel("縦軸のタイトル", fontName: "游ゴシック",fontSize:14);

//横軸のタイトル

chart.plt.XLabel("横軸のタイトル",fontName: "游ゴシック", fontSize: 14);

//クライアント座標（左上が原点となるコントロール上の座標）で任意の文字列を表示

chart.plt.PlotAnnotation("任意の注意事項", 10,200,

fontSize: 24, fontName: "游ゴシック", fontColor: System.Drawing.Color.Red, shadow: true,

fill: true, fillColor: System.Drawing.Color.White, fillAlpha: 1, lineWidth: 2);

//表示しているグラフのスケール座標に任意の文字列を表示

chart.plt.PlotText("スケール座標を使った文字列表示", 30,-20, fontSize: 16, bold: true, color: System.Drawing.Color.Magenta);

//補助線の設定

chart.plt.Grid(xSpacing:5, lineStyle: LineStyle.Dot, color: System.Drawing.Color.LightGray, lineWidth: 2);

//凡例の表示

chart.plt.Legend(location:legendLocation.upperRight,fixedLineWidth: false);

//グラフ表示の上限下限を設定

chart.plt.AxisBounds(minX: 5, maxX:80, minY: double.NegativeInfinity, maxY: double.PositiveInfinity);

//フレームの表示

chart.plt.Frame(right:false,top:false);

//背景色の設定

chart.plt.Style(System.Drawing.Color.Cyan, System.Drawing.Color.LightCyan);

//レンダリング（グラフ表示）

chart.Render();

//グラフをイメージファイルとして保存

chart.plt.SaveFig(@".\fig.png");

}

ちょっと気になる点

問題とまでは言いませんが、こう出来ればよいのにと思う点が2点あります。

1つ目は、凡例（Legend）がチャートエリアの外に出せない事です。

私が調べ切れていないだけかもしれませんが、OxyPlotにせよ、LiveCharts にせよ、マイクロソフト標準のChart にせよ、凡例はチャートエリアの外に表示させることができるので、この点はちょっと残念です。

2つ目は、縦軸が左端に寄り過ぎて、すこし端が切れてしまっています。

公式サイトのサンプルだと英語表記なので、たぶん漢字フォントの問題なんだろうと思います。

ScottPlotは外国製なので、この辺は仕方ないかもしれませんね。

まとめ

ソースのコメントを読んでいただければ、どんなことが設定できるのかが分かると思います。

各メソッドには非常に多くの引数を渡すことができるので、全てを解説することが出来ません。

Visual Studioのエディタでメソッドにマウスを当てると使用可能な引数が表示されますので、これを参考に使いこなして頂ければと思います。

面白いのはプロットデータを SaveCsv メソッドでファイルにCSV形式で保存したり、任意のテキストをチャート上に描画できるところでしょうか。

どんなチャートが用意されているかは、公式ページに記載されていますので、そちらを参考にして頂ければと思います。