OxyPlotで折れ線グラフを表示してみる①

 この記事からOxyPlotを使用し、折れ線グラフを表示させる方法について簡単に解説します。折れ線グラフを表示させるには色々設定等を行う必要がありますので、ブログを分けて解説します。まずこの①では「そもそもOxyPlotで利用できるグラフは何か」、「OxyPlotの構造について」、「OxyPlotで描画する際の下準備の方法」について解説します。
 ※この記事は、前回の記事(OxyPlotを導入してみる)の続きとして紹介しています。OyxPlotの導入方法については前回の記事を参照してください。VisualStudioを使いWindowsFormsアプリにて紹介するため、WindowsFormsについても前回の記事を参考にしてください。
前回の記事はこちら
  

目次

OxyPlotで描画できるグラフの種類について
OxyPlotの構造について
OxyPlotを使用する際の下準備を行う
 1.ツールボックスより「PlotView」をドラッグ&ドロップし表示させるグラフ位置を設定
 2.PlotViewの識別名を変更する
 3.画面(Form)を表示する際に呼ばれるLoadイベント関数作成
まとめ
 

OXYPLOTで描画できるグラフの種類について

 OxyPlotではよく使うグラフ種類として「折れ線」「散布図」「棒」「円」の各グラフがあります。いずれのグラフも様々なマルチプラットフォームで利用でき、用途によってグラフを使い分けることが可能です。なお、この記事では「折れ線グラフ」について紹介します。
 各グラフの特徴については以下の通りです

種類 特徴
折れ線グラフ 主に時系列といった連続的な変化をとらえる際に利用されるグラフ

横軸に年や月といった時間を、縦軸にデータ量を取ります

散布図 横軸と縦軸にそれぞれ別のデータ量を取り、データが当てはまる箇所に点を打って示すグラフ

2つの量に関係があるかどうかを見る場合に便利です

棒グラフ 縦軸にデータ量を取り、棒の高さでデータの大小を表したグラフ

横軸は項目別に分ける等、値の高い項目や低い項目を判別するのに有効です

円グラフ 円全体を最大100とし、その中に占める項目の構成比を扇であらわしたグラフ

扇の大きさにより構成比の大小が分かります

OXYPLOTの構造について

 OxyPlotを実際に表示させる前に、OxyPlotでグラフを表示させるうえでの内部的な構造の件について、簡単に解説します。OxyPlotには各機能別にクラスが用意されており、このクラスを組み合わせて設定してあげることによりグラフが表示できるような仕組みになっています。
 以下がOxyPlotの基本的な構造の中身となっています。基本的にOxyPlotでグラフを描画させる際には「PlotModel」と呼ばれるクラスを使用する必要があります。主に「PlotModelクラス」はグラフを描画させるうえでの土台となるクラスです。PlotModelクラスの内部にそれぞれグラフの基本情報を設定できるプロパティが用意されている為、それらのプロパティを設定することになります。

 PlotModelでは大まかに「グラフ全体の詳細設定」「軸」「データ登録」「グラフ操作」の各ブロックを使用することによりグラフを安易に描画できます。とくに「グラフ全体の設定」「軸」「データ登録」に関しては必ず設定する必要があります。それぞれのプロパティに対しクラスを渡してあげることでグラフに変更内容を反映させることが可能です。
 

OXYPLOTを使用する際の下準備を行う

 では実際にOxyPlotでグラフを表示する処理を行います。まず、WindowsFormsアプリケーションにてOxyPlotの折れ線グラフを作成する前に、下準備を行う必要があります。WindowsFormに反映させる場合に画面上でグラフを表示する際のグラフ領域の設定やグラフ軸の設定を行います。

1.ツールボックスより「PlotView」をドラッグ&ドロップし表示させるグラフ位置を設定

 WindowsFormにてOxyPlotを利用する場合、VisualStudioでは各画面ごとのデザイナーが用意されています。デザイナーではテキストボックスやボタンなどのアイテムを視覚的にマウス操作で位置設定や配置が可能です。OxyPlotを導入すると、WindowsFormの場合、ツールボックス欄にて「PlotView」というアイテムが表示されています。PlotViewを選択し、画面上にドラッグ&ドロップすることで配置されます。配置したら四角い枠が出てくるので、各角にある○をクリックしつつ動かすことでPlotViewのサイズを変更できます。またはPlotView選択中にプロパティのSize欄でピクセル単位で数値を入力することでサイズを変更することが可能です。

2.PlotViewの識別名を変更する

 PlotViewを配置できたら、プログラム上(コード上)で使用する際の識別名を設定します。VisualStudioのデザイナーからアイテムを追加するたびプログラム上で必要な識別名が割り当てられます。プログラム上では識別名を変数名として扱うことになります。変更するには1つアイテムを選択しプロパティ欄の(Name)の部分を変更すると可能です。ここではPlotViewの名前を[chart]という風に名前を変更して使用させます。

3.画面(Form)を表示する際に呼ばれるLoadイベント関数作成

 WinFormsでは画面を表示する際に一度だけ呼ばれるイベントLoad関数が存在します。Load関数は画面表示時の最初の一回だけ呼ばれます。Load関数を作成するには画面のプロパティ欄から[イベントマーク]を選択しその中の「Load」欄の行をダブルクリックや関数名を入力することでコード上に自動で作成されます。

 ここまで画面上にグラフを表示させる位置の設定やグラフの識別名の設定・Load関数の作成までを行いました。
 次からは実際にソースコードの方でグラフ描画における初期設定と折れ線グラフの描画について解説します。
 

まとめ

 この記事では、「OxyPlotで描画できるグラフの種類」「OxyPlotの構造」「グラフを描画する前の下準備」のことについて解説しました。OxyPlotでは折れ線グラフ以外にも円グラフや棒グラフといったグラフの描画も可能です。
 次回の記事ではOxyPlotで折れ線グラフを描画させる際の初期設定と折れ線グラフに必要なデータの挿入をソースコード上で記述し、実際に描画させてみます。初期設定の設定次第でグラフ描画における見た目や形が変わる為、より一般的な設定で解説します。
 
 

お問い合わせはこちら