【WPF】ScottPlotでグラフを描く

記事内に広告を含みます

WPF（Windows Presentation Foundation）を使ってグラフを表示させるときに使える『ScottPlot』というライブラリの使い方を解説します。

なお、WPFについて詳細を以下の記事で解説していますので、気になる方はご参照ください。

こちらの記事もおすすめ

【WPF】WPFってなんですか？

金欠ぱとろん　技術日記

もくじ非表示

この記事を読むと・・・？
WPFでのグラフの描き方
ScottPlotのインストール
WPFでグラフを表示させる

目次へ

この記事を読むと・・・？

この記事を読むと、WPFでこんな感じのグラフを描画することができます。

興味のある方は是非ご一読ください。

WPFでのグラフの描き方

UI（ユーザーインターフェース）を開発しているときに、グラフを表示させたいことがあるかもしれません。

このとき、昔ながらのWindows.Formsであれば『Chartコントロール』があるのですが、残念ながらWPFには用意されていません。

ほんとにWPFにChartコントロールはないの？: はい。ただ、厳密にはWindows.Formsをusing句を使ってインポートすると使うことはできるようです。
ただそうは言っても、「せっかくWindows.Formsから離れてWPFでUIを作ろうとしているのにまたWindows.Forms！？」と思われる方には、今回の記事が参考になるかもしれません。

このことから、WPFでグラフを表示させたいときは、グラフ描画のためのライブラリを使用することが一般的です。

WPFで使用できるグラフ描画のライブラリは『ScottPlot』や『OxyPlot』、『LiveChart』、『MSChart』が代表的ですが、その中でも本記事ではScottPlotの使い方をご説明します。

ScottPlotが持つ特長は以下のとおりです。

ScottPlotの特長

グラフの描画が高速である
大量のデータの描画が得意である

ScottPlotのインストール

ScottPlotは、VisualStudioのNuGetパッケージマネージャーでインストールできます。

パッケージ名とバージョン(2024年9月現在)

パッケージ名	バージョン
ScottPlot.WPF	5.0.39

NuGetパッケージマネージャーを開く

『ツール』ー『NuGetパッケージマネージャー』ー『ソリューションのNuGetパッケージの管理』を押して、NuGetパッケージマネージャーを開く。

ScottPlotをインストールする

NuGetパッケージマネージャー画面のタブを『参照』にし、検索ボックスに「ScottPlot」と入力します。

すると、検索結果の中に『ScottPlot.WPF』というのがあるのでこれを選択します。

そして、右側にある対象のプロジェクト名に☑マークを付けて「インストール」ボタンを押します。

ライセンスに同意する

左記のようなライセンスへの同意確認ウィンドウが表示されるので、「同意する」ボタンを押します。

これでScottPlotのインストールは完了です。

WPFでグラフを表示させる

基本の使い方

基本的な使い方は、ScottPlotのインスタンスをXAMLで生成し、このインスタンスに対してコードビハインドで色々設定するやり方かと思います。

XAML

解説

ScottPlotのインスタンスをWPF_GraphとしてViewに配置します。

<Window x:Class="ScottPlot_Sample.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:ScottPlot="clr-namespace:ScottPlot.WPF;assembly=ScottPlot.WPF"
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:ScottPlot_Sample"
mc:Ignorable="d"
Title="MainWindow" Height="450" Width="800">
<Grid>
<ScottPlot:WpfPlot x:Name="WPF_Graph" />
</Grid>
</Window>

<Window x:Class="ScottPlot_Sample.MainWindow"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:ScottPlot="clr-namespace:ScottPlot.WPF;assembly=ScottPlot.WPF"

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:ScottPlot_Sample"

mc:Ignorable="d"

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

<Grid>

<ScottPlot:WpfPlot x:Name="WPF_Graph" />

</Grid>

</Window>

コードビハインド

解説

ViewのLoadイベント発生時にLoadEvent()に処理が飛んできます。

ここでグラフのデータ設定が行われて再描画されます。

using System.Windows;
namespace ScottPlot_Sample
{
/// <summary>
/// Interaction logic for MainWindow.xaml
/// </summary>
public partial class MainWindow : Window
{
public MainWindow( )
{
InitializeComponent( );
Loaded += LoadEvent;
}
private void LoadEvent( object sender, RoutedEventArgs e )
{
int[] dataX = { 1, 2, 3, 4, 5 };
int[] dataY = { 1, 4, 9, 16, 25 };
WPF_Graph.Plot.Add.Scatter( dataX, dataY );
WPF_Graph.Plot.Axes.SetLimits( 0, 10, 0, 30 );
WPF_Graph.Plot.Axes.Left.Label.Text = "Y軸";
WPF_Graph.Plot.Axes.Bottom.Label.Text = "X軸";
WPF_Graph.Plot.Axes.Left.Label.FontName = "BIZ UDゴシック";
WPF_Graph.Plot.Axes.Bottom.Label.FontName = "BIZ UDゴシック";
WPF_Graph.Plot.Axes.Left.Label.FontSize = 24;
WPF_Graph.Plot.Axes.Bottom.Label.FontSize = 24;
WPF_Graph.Plot.Axes.Left.TickLabelStyle.FontSize = 24;
WPF_Graph.Plot.Axes.Bottom.TickLabelStyle.FontSize = 24;
ScottPlot.TickGenerators.NumericAutomatic l_TickGenY = new ScottPlot.TickGenerators.NumericAutomatic();
l_TickGenY.TargetTickCount = 10;
WPF_Graph.Plot.Axes.Left.TickGenerator = l_TickGenY;
ScottPlot.TickGenerators.NumericAutomatic l_TickGenX = new ScottPlot.TickGenerators.NumericAutomatic();
l_TickGenX.TargetTickCount = 10;
WPF_Graph.Plot.Axes.Bottom.TickGenerator = l_TickGenX;
WPF_Graph.Refresh( );
}
}
}

using System.Windows;

namespace ScottPlot_Sample

{

/// <summary>

/// Interaction logic for MainWindow.xaml

/// </summary>

public partial class MainWindow : Window

{

public MainWindow( )

{

InitializeComponent( );

Loaded += LoadEvent;

}

private void LoadEvent( object sender, RoutedEventArgs e )

{

int[] dataX = { 1, 2, 3, 4, 5 };

int[] dataY = { 1, 4, 9, 16, 25 };

WPF_Graph.Plot.Add.Scatter( dataX, dataY );

WPF_Graph.Plot.Axes.SetLimits( 0, 10, 0, 30 );

WPF_Graph.Plot.Axes.Left.Label.Text = "Y軸";

WPF_Graph.Plot.Axes.Bottom.Label.Text = "X軸";

WPF_Graph.Plot.Axes.Left.Label.FontName = "BIZ UDゴシック";

WPF_Graph.Plot.Axes.Bottom.Label.FontName = "BIZ UDゴシック";

WPF_Graph.Plot.Axes.Left.Label.FontSize = 24;

WPF_Graph.Plot.Axes.Bottom.Label.FontSize = 24;

WPF_Graph.Plot.Axes.Left.TickLabelStyle.FontSize = 24;

WPF_Graph.Plot.Axes.Bottom.TickLabelStyle.FontSize = 24;

ScottPlot.TickGenerators.NumericAutomatic l_TickGenY = new ScottPlot.TickGenerators.NumericAutomatic();

l_TickGenY.TargetTickCount = 10;

WPF_Graph.Plot.Axes.Left.TickGenerator = l_TickGenY;

ScottPlot.TickGenerators.NumericAutomatic l_TickGenX = new ScottPlot.TickGenerators.NumericAutomatic();

l_TickGenX.TargetTickCount = 10;

WPF_Graph.Plot.Axes.Bottom.TickGenerator = l_TickGenX;

WPF_Graph.Refresh( );

}

ScottPlotのグラフ設定

ScottPlotのグラフ設定としてよく使いそうなものをまとめておきます。

グラフ種別

折れ線グラフを描画する

WPF_Graph.Plot.Add.Scatter([X軸系列データ], [Y軸系列データ]);

1	WPF_Graph.Plot.Add.Scatter([X軸系列データ], [Y軸系列データ]);

棒グラフを描画する

WPF_Graph.Plot.Add.Bars([X軸系列データ], [Y軸系列データ]);

1	WPF_Graph.Plot.Add.Bars([X軸系列データ], [Y軸系列データ]);

グラフ色設定

ラベル表示領域の色を設定する

WPF_Graph.Plot.FigureBackground.Color = Color.FromHex("[16進数カラーコード]");

1	WPF_Graph.Plot.FigureBackground.Color = Color.FromHex("[16進数カラーコード]");

データ表示領域の色を設定する

WPF_Graph.Plot.DataBackground.Color = Color.FromHex("[16進数カラーコード]");

1	WPF_Graph.Plot.DataBackground.Color = Color.FromHex("[16進数カラーコード]");

軸最大・最小設定

軸の最大・最小を設定する

WPF_Graph.Plot.Axes.SetLimits( [X軸最小値], [X軸最大値], [Y軸最小値], [Y軸最大値] );

1	WPF_Graph.Plot.Axes.SetLimits( [X軸最小値], [X軸最大値], [Y軸最小値], [Y軸最大値] );

XY軸を自動スケーリングする

WPF_Graph.Plot.Axes.AutoScale();

1	WPF_Graph.Plot.Axes.AutoScale();

軸目盛り設定

XY軸目盛りのフォントサイズを設定する

WPF_Graph.Plot.Axes.Left.TickLabelStyle.FontSize = "[フォントサイズ]";

1	WPF_Graph.Plot.Axes.Left.TickLabelStyle.FontSize = "[フォントサイズ]";

WPF_Graph.Plot.Axes.Bottom.TickLabelStyle.FontSize = "[フォントサイズ]";

1	WPF_Graph.Plot.Axes.Bottom.TickLabelStyle.FontSize = "[フォントサイズ]";

XY軸目盛りの区切り方を設定する

ScottPlot.TickGenerators.NumericAutomatic l_TickGenY = new ScottPlot.TickGenerators.NumericAutomatic();
l_TickGenY.TargetTickCount = 10;
WPF_Graph.Plot.Axes.Left.TickGenerator = l_TickGenY;

ScottPlot.TickGenerators.NumericAutomatic l_TickGenY = new ScottPlot.TickGenerators.NumericAutomatic();

l_TickGenY.TargetTickCount = 10;

WPF_Graph.Plot.Axes.Left.TickGenerator = l_TickGenY;

ScottPlot.TickGenerators.NumericAutomatic l_TickGenX = new ScottPlot.TickGenerators.NumericAutomatic();
l_TickGenX.TargetTickCount = 10;
WPF_Graph.Plot.Axes.Bottom.TickGenerator = l_TickGenX;

ScottPlot.TickGenerators.NumericAutomatic l_TickGenX = new ScottPlot.TickGenerators.NumericAutomatic();

l_TickGenX.TargetTickCount = 10;

WPF_Graph.Plot.Axes.Bottom.TickGenerator = l_TickGenX;

補足

TargetTickCountは主目盛りの刻み数を設定するもののようですが、設定どおりにならないこともあります。

あくまで『Target(目標)』ということなのでしょうか。

取り急ぎ、ここは微調整して狙いの刻みにしていく方がよさそうです。

軸ラベル設定

XY軸のラベルを設定する

WPF_Graph.Plot.Axes.Left.Label.Text = "[Y軸ラベル名]";

1	WPF_Graph.Plot.Axes.Left.Label.Text = "[Y軸ラベル名]";

WPF_Graph.Plot.Axes.Bottom.Label.Text = "[X軸ラベル名]";

1	WPF_Graph.Plot.Axes.Bottom.Label.Text = "[X軸ラベル名]";

XY軸のラベルのフォントを設定する

WPF_Graph.Plot.Axes.Left.Label.FontName = "[フォント名]";

1	WPF_Graph.Plot.Axes.Left.Label.FontName = "[フォント名]";

WPF_Graph.Plot.Axes.Bottom.Label.FontName = "[フォント名]";

1	WPF_Graph.Plot.Axes.Bottom.Label.FontName = "[フォント名]";

XY軸のラベルのフォントサイズを設定する

WPF_Graph.Plot.Axes.Left.Label.FontSize = "[フォントサイズ]";

1	WPF_Graph.Plot.Axes.Left.Label.FontSize = "[フォントサイズ]";

WPF_Graph.Plot.Axes.Bottom.Label.FontSize = "[フォントサイズ]";

1	WPF_Graph.Plot.Axes.Bottom.Label.FontSize = "[フォントサイズ]";

描画設定

グラフを再描画する

WPF_Graph.Refresh();

1	WPF_Graph.Refresh();

なお、ScottPlotで設定できる項目はまだまだありますので、詳細は公式HPのCookbookをご参照ください。

どうしてもMVVMで使いたい場合は・・・？

MVVMでの使い方

こちらはどうしてもというとき用です。

WPFとセットでよく扱われるMVVMでも使いたいところですが、ScottPlotはMVVMに対応していません。

なので、Model側でインスタンスを生成して、それをViewModelに受け渡し、Viewとバインドする、という手法にムリやりはめ込んでみます。

なお、MVVMについて詳しく知りたい方は以下の記事もご覧ください。

【WPF】MVVMでの実装の仕方[実例付き] 2024年10月16日

Model

解説

WpfPlotクラスのインスタンスであるScottPlotGraphを生成し保持します。

ただし、今回のようにムリやりバインディングする場合、インスタンスのパラメータ変更ではsetterに処理が移ってくれず、setterに処理を移すにはインスタンス生成のようにインスタンス自体の変化が必要になります。

つまり、従来のMVVMで行うようなRaisePropertyChanged()による変更通知をトリガーに、Viewを更新していくことはできないということです。

そのため、RaisePropertyChanged()やNotifyChangedはコメントアウトしています。

RaisePropertyChanged()が使えない以上、自動的に再描画はしてくれないので、自分で描画のリフレッシュを行う必要がありますので、最後にRefresh()で再描画しています。

using ScottPlot.WPF;
namespace ScottPlot_MVVM_Sample
{
public class GraphModel /*: NotifyChanged*/
{
#region メンバ変数
private WpfPlot? m_ScottPlotGraph = null;
#endregion
#region プロパティ
public WpfPlot? ScottPlotGraph
{
get { return m_ScottPlotGraph; }
set
{
if( m_ScottPlotGraph != value ) {
m_ScottPlotGraph = value;
//RaisePropertyChanged( );
}
}
}
#endregion
#region コンストラクタ
public GraphModel( )
{
ScottPlotGraph = new WpfPlot( );
int[] dataX = { 1, 2, 3, 4, 5 };
int[] dataY = { 1, 4, 9, 16, 25 };
ScottPlotGraph.Plot.Add.Scatter( dataX, dataY );
ScottPlotGraph.Plot.Axes.SetLimits( 0, 10, 0, 30 );
ScottPlotGraph.Plot.Axes.Left.Label.Text = "Y軸";
ScottPlotGraph.Plot.Axes.Bottom.Label.Text = "X軸";
ScottPlotGraph.Plot.Axes.Left.Label.FontName = "BIZ UDゴシック";
ScottPlotGraph.Plot.Axes.Bottom.Label.FontName = "BIZ UDゴシック";
ScottPlotGraph.Plot.Axes.Left.Label.FontSize = 24;
ScottPlotGraph.Plot.Axes.Bottom.Label.FontSize = 24;
ScottPlotGraph.Plot.Axes.Left.TickLabelStyle.FontSize = 24;
ScottPlotGraph.Plot.Axes.Bottom.TickLabelStyle.FontSize = 24;
ScottPlot.TickGenerators.NumericAutomatic l_TickGenY = new ScottPlot.TickGenerators.NumericAutomatic();
l_TickGenY.TargetTickCount = 10;
ScottPlotGraph.Plot.Axes.Left.TickGenerator = l_TickGenY;
ScottPlot.TickGenerators.NumericAutomatic l_TickGenX = new ScottPlot.TickGenerators.NumericAutomatic();
l_TickGenX.TargetTickCount = 10;
ScottPlotGraph.Plot.Axes.Bottom.TickGenerator = l_TickGenX;
ScottPlotGraph.Refresh( );
}
#endregion
}
}

using ScottPlot.WPF;

namespace ScottPlot_MVVM_Sample

{

public class GraphModel /*: NotifyChanged*/

{

#region メンバ変数

private WpfPlot? m_ScottPlotGraph = null;

#endregion

#region プロパティ

public WpfPlot? ScottPlotGraph

{

get { return m_ScottPlotGraph; }

set

{

if( m_ScottPlotGraph != value ) {

m_ScottPlotGraph = value;

//RaisePropertyChanged( );

}

#endregion

#region コンストラクタ

public GraphModel( )

{

ScottPlotGraph = new WpfPlot( );

int[] dataX = { 1, 2, 3, 4, 5 };

int[] dataY = { 1, 4, 9, 16, 25 };

ScottPlotGraph.Plot.Add.Scatter( dataX, dataY );

ScottPlotGraph.Plot.Axes.SetLimits( 0, 10, 0, 30 );

ScottPlotGraph.Plot.Axes.Left.Label.Text = "Y軸";

ScottPlotGraph.Plot.Axes.Bottom.Label.Text = "X軸";

ScottPlotGraph.Plot.Axes.Left.Label.FontName = "BIZ UDゴシック";

ScottPlotGraph.Plot.Axes.Bottom.Label.FontName = "BIZ UDゴシック";

ScottPlotGraph.Plot.Axes.Left.Label.FontSize = 24;

ScottPlotGraph.Plot.Axes.Bottom.Label.FontSize = 24;

ScottPlotGraph.Plot.Axes.Left.TickLabelStyle.FontSize = 24;

ScottPlotGraph.Plot.Axes.Bottom.TickLabelStyle.FontSize = 24;

ScottPlot.TickGenerators.NumericAutomatic l_TickGenY = new ScottPlot.TickGenerators.NumericAutomatic();

l_TickGenY.TargetTickCount = 10;

ScottPlotGraph.Plot.Axes.Left.TickGenerator = l_TickGenY;

ScottPlot.TickGenerators.NumericAutomatic l_TickGenX = new ScottPlot.TickGenerators.NumericAutomatic();

l_TickGenX.TargetTickCount = 10;

ScottPlotGraph.Plot.Axes.Bottom.TickGenerator = l_TickGenX;

ScottPlotGraph.Refresh( );

}

#endregion

}

ViewModel

解説

コンストラクタでModelのインスタンスを生成するだけです。

なお、起動時のコンストラクタ処理後にはScottPlotGraphのgetterが働くので、Model側からインスタンスを取得します。

using ScottPlot.WPF;
namespace ScottPlot_MVVM_Sample
{
public class MainViewModel /*: NotifyChanged*/
{
#region メンバ変数
private GraphModel m_GraphModel;
#endregion
#region プロパティ
public WpfPlot? ScottPlotGraph
{
get { return m_GraphModel.ScottPlotGraph; }
set { m_GraphModel.ScottPlotGraph = value; }
}
#endregion
#region コンストラクタ
public MainViewModel( )
{
m_GraphModel = new GraphModel( );
//m_GraphModel.PropertyChanged += ( sender, e ) => RaisePropertyChanged( );
}
#endregion
}
}

using ScottPlot.WPF;

namespace ScottPlot_MVVM_Sample

{

public class MainViewModel /*: NotifyChanged*/

{

#region メンバ変数

private GraphModel m_GraphModel;

#endregion

#region プロパティ

public WpfPlot? ScottPlotGraph

{

get { return m_GraphModel.ScottPlotGraph; }

set { m_GraphModel.ScottPlotGraph = value; }

}

#endregion

#region コンストラクタ

public MainViewModel( )

{

m_GraphModel = new GraphModel( );

//m_GraphModel.PropertyChanged += ( sender, e ) => RaisePropertyChanged( );

}

#endregion

}

View

解説

XAML上でDataContextにViewModelを設定してバインディングの準備をしてから、ContentControlのContentプロパティにViewModelのScottPlotGraphのインスタンスをバインディングします。

これによりViewにグラフが表示されます。

<Window x:Class="ScottPlot_MVVM_Sample.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:ScottPlot="clr-namespace:ScottPlot.WPF;assembly=ScottPlot.WPF"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:ScottPlot_MVVM_Sample"
mc:Ignorable="d"
Title="MainWindow" Height="450" Width="800">
<Window.DataContext>
<local:MainViewModel />
</Window.DataContext>
<Grid>
<ContentControl Content="{ Binding ScottPlotGraph }" />
</Grid>
</Window>