この記事では前回の記事(OxyPlotでグラフの見栄えを変えてみる①)の続きで折れ線グラフを用いて、アノテーションと呼ばれる描画方式を用いてグラフを装飾させます。
目次
線の表示
OxyPlotではグラフ上にいくつもの線を描画させることができ、線はOxyPlotのアノテーションの1つの機能として存在します。線自体も実線や点線、色の変更など様々なプロパティが存在し、グラフを装飾させることができます。ここでは簡易的に線を描画させる際の実行方法を記載します。
グラフ上に線を描画させる際には、基本の設定手順として、以下の通りに設定する必要があります。
1.線を描画するためのクラスをインスタンスとして作成
OxyPlotのグラフに線を描画させるためには、「LineAnnotation」と呼ばれるクラスを定義する必要があります。まず、LineAnnotationクラスのインスタンスを作成する前に、LineAnnotationクラスが存在するファイルをusing文でインポートする必要があります。
次にnewをしてLineAnnotationクラスのインスタンスを作成します。
2.線の色やスタイル、線横か縦方向の設定
1にて作成したLineAnnotationクラスのインスタンスを使用し、線の色、線のスタイル、線の向きを変更してみます。いずれもインスタンスにアクセスして、必要箇所の関数を呼び出してあげることで設定を変えることが可能です。
LineStyleプロパティでは線のスタイルを変えることができ、その中には実線や点線などが存在します。Colorプロパティでは線自体の色を変更し、Typeプロパティにて線が描画される向きを横方か縦方向で変更できます。Typeプロパティに指定するのはLineAnnotationTypeから選択する形です。LineAnnotationTypeでは「Horizon(横向き)」「Vertical(縦向き)」「LinearEquation」の3つの選択肢から選んで設定する必要があります。
3.詳細な線の傾きの設定
2にて使用したTypeプロパティでは、線を描画する方向は、横方向か縦方向のどちらかでした。実は別の方法でも、線を描画する方向を変更する設定方法が存在し、こちらではより詳細に線を描画する角度を調整できます。詳細な方向を設定するにはSlopeプロパティを使用します。Slopeプロパティに値を設定することで[y = mx +b]のm値として値が導入され線の傾きが実現されます。－値を指定すれば逆方向に線が描画されます。
4.線の表示位置設定
次に線をグラフ上のどこの位置に対して表示させるのかを設定する必要があります。線を表示する表示位置については、2で説明したTypeプロパティの線の向きによって表示位置の仕方が変わります。表示位置を変更する方法として、まずXプロパティとYプロパティが存在し、これらのプロパティはグラフの横軸(X)と縦軸(Y)からどこの位置に対して表示させるのかを設定します。
※なお、Xプロパティを変更しようとした場合にTypeプロパティがHorizontal(横向き)になっていた場合には反映されません。Yプロパティも同様 にTypeがVertical(縦向き)になっていた場合には設定が反映されません。Slopeにて指定した線についてはInterceptプロパティにて表示位置を変更することが可能です。
5.線表示の制限設定(線の長さ設定)
OxyPlotでは線を描画する際に、どこまで表示させるかの制限値を設定することができます。その設定は各軸(X,Y)毎に設定することが可能です。X軸はMinimumXプロパティ(最小値)とMaximumXプロパティ(最大値)があり、Y軸ではMinimumYプロパティ(最小値)とMaximumYプロパティ(最大値)があります。これらのプロパティを使用することで、線の表示を制限し、線の長さを決めることが可能です。
6.線にテキスト描画
LineAnnotationでは線に対してテキストを配置することも可能です。Textプロパティで表示する文字列を指定し、Fontプロパティで文字列にてフォントスタイルを指定し、FontSizeプロパティでフォントの大きさ、FontWeightプロパティで太字にするかを設定することができます。
また表示するテキストの位置や方向・色も変更できます。TextLinePositionプロパティで表示位置、TextColorプロパティでテキストの色を変更でき、TextOrientationプロパティで横書きか縦書きを設定できます。
7.アノテーションのグラフ登録
最後に、今まで設定したLineAnnotationsクラスのインスタンスをグラフに登録させる必要があります。登録させるにはModelプロパティが持つAnnotationsプロパティよりAddメソッドを呼び出し、その中に先ほど作成したインスタンスを指定することで登録することができます。これでグラフに線を描画することができます。
以上が線をグラフ上に描画するための一通りの設定と流れになります。線を描画するアノテーションではここでは紹介できなかった細かな設定などが存在し、自分好みに描画させることが可能です。
矩形の表示
OxyPlotのアノテーションツールは、線の描画以外にも、矩形や楕円、台形といった図形も描画できます。線のアノテーション同様、矩形や楕円のアノテーションにも専用のアノテーションクラスが用意されており、作成したアノテーションクラスのインスタンスをグラフに登録することで、図形を表示させることが可能になります。まず矩形を描画させてみます。以下簡易的な手順です。
1.矩形を描画するためのクラスインスタンスを作成
線を描画する際と同様、矩形を描画するためには「RectangleAnnotation」というクラスが必要になり、それをインスタンスとして作成する必要があります。作成したインスタンスを用いることで、矩形を描画するために必要な設定等が行えるようになります。
2.矩形色の設定
矩形でも線描画同様に、色を設定することができます。色を変更するにはColorプロパティではなく、矩形ではFillプロパティを使用し表示させます。Fillプロパティでは矩形における背景色を設定することができます。
3.矩形の枠線設定
矩形アノテーションでは矩形の枠線における色や幅を設定することができます。色はStrokeプロパティより設定ができ、枠線幅の設定では、StrokeThicknessプロパティより変更させることができ、StrokeThicknessの数値が大きいほど枠線幅を太くさせることができます。
4.矩形表示位置設定
矩形の表示位置はMinimumXプロパティ、MaximumXプロパティ、MinimumYプロパティ、MaximumYプロパティの4つのプロパティを使用し、設定することができます。横の範囲はMinimumX～MaximumXにて設定し、縦の範囲はMinimumY～MaximumYで設定します。（それぞれのプロパティはグラフ上の軸値に合わせて設定されます。）
5.アノテーションのグラフ登録
最後に今まで設定したRectangleAnnotationクラスのインスタンスをグラフに登録する必要があります。線アノテーション同様にModelプロパティが持つAnnotationsプロパティよりAddメソッドを呼び出し、その中に先ほど作成したインスタンスを指定することで登録することができます。これでグラフに矩形を描画することができます。
以上が矩形を描画するための簡易的な手順になります。他にも矩形を描画するための設定が多々、Oxyライブラリに組み込まれています。さらに、矩形以外にも楕円や台形といった様々なアノテーションがあります。自分好みにアノテーションを組み合わせてグラフを装飾させることが可能です。
まとめ
この記事では前回の続きで、グラフの装飾としてアノテーションについて軽く紹介しました。ここでは線と矩形を紹介しました。装飾を加えることでグラフが見やすくなり、見栄えがします。以上、グラフの見栄えについて簡単に紹介しました。他の見栄えに関する機能について気になる方は、OxyPlotのリファレンスをご覧ください。
次回は「OxyPlotにおけるコントローラとは」について紹介します。グラフを動かしたい、操作したいといった場合に、コントローラというものを使うことでOxyPlotでの再現が可能です。そういった機能を簡単に紹介できればと思います。
