【WPF】MSChartで楽々グラフ(チャート)描画!関数化してみました!

プログラミング入門
この記事は約8分で読めます。

MSChartのインストール方法や使い方については、こちらの記事に記載していますが、使用頻度が高いグラフを簡単に描画出来るように関数化(メソッド化)しました。

引数にMSChartのコントロールと描画したいデータを渡すとグラフ描画されます。

サンプルはWPFを使っていますが、関数(メソッド)部分はWindowsFormでもそのまま使える様になっています。

また、必要な修正がしやすい様に、最小限のプロパティを使って作っていますので、あとはご自身の用途に応じてカスタマイズしてお使いください。

グラフ(チャート)の種類

この関数(メソッド)を使えば、次のグラフ(チャート)が簡単に描画できるようになっています。

サンプルプログラム

サンプルプログラムをもとに、MSChartの使い方を解説していきたいと思います。

画面レイアウト

チャート1~チャート3までタブで分かれていて、合計10個のMSChartコントロールを張り付けています。

描画ボタンをクリックすると、全てのチャートが描画されます。

サンプルのダウンロード場所

サンプルプログラムのソースは下記からダウンロードできるようになっています。

関数(メソッド)の使い方

ScottPlotを関数化した時と同じ仕様にしていて、グラフ描画はDrowから始まるメソッド名になっています。

チャート(グラフ)名関数(メソッド)名内容
折れ線グラフDrawLine単一の折れ線グラフを描画
折れ線グラフ(複数)DrawLine複数の折れ線グラフを描画
散布図DrawScatt散布図を描画
円グラフDrawPie円グラフを描画
縦棒グラフDrawColumn縦棒グラフを描画
横棒グラフDrawBar横棒グラフを描画
棒グラフ(グルーピング)DrawGroupColumn複数の棒グラフをグルーピングして描画
積み上げグラフDrawStack積み上げグラフを描画
レーダーチャートDrawRadarレーダーチャートを表示
箱ひげ図DrawPopulations箱ひげ図を描画

第一引数にコントロール、第二引数にタイトル、第三引数以降に描画データ(プロットデータ)を渡します。

コントロール名が “uxChart1” 、xs にX方向のデータ、ysにY方向のデータが格納されている場合は次の様記述します。

第三引数であるプロットデータには、大きく分けて2種類の形式があります。

1つは、プロットデータの配列を渡す形式で、折れ線や棒グラフ、円グラフ、散布図の時に使用します。

1つは、複数の折れ線グラフ、グルーピングした棒グラフ、積み上げグラフ等のように、1つのチャートコントロールに対してグラフを複数描画する場合に使用し、こちらはタプルをリスト形式で渡すようになっています。

詳しくはソースコードを見て頂くとして、ここではポイントに絞って説明しておきたいと思います。

単独の折れ線グラフ、散布図

プロットデータを配列データ形式で渡します。

折れ線グラフの場合は次の様になります。

箱ひげ図

箱ひげ図については、1次元配列のデータを引数に渡すことで描画が可能です。

OxyPlotと比べて、MSChartでは単純に配列を渡すだけで、箱ひげ図に必要な統計情報を内部で自動計算してくれます。

その際、カスタムプロパティを使って平均値や中央値のラインを表示/非表示に設定したり、パーセンタイルの値を指定することができます。

カスタムプロパティはSeriesのインデクサという形で実装されていて、添え字の文字列を指定することで、必要な設定が出来る様になっています。

縦棒グラフ、横棒グラフ

縦棒グラフ、横棒グラフともプロットデータを2つ渡しますが、こちらは第一引数が文字列で、第二引数が数値(double)です。

円グラフ

円グラフは、ラベルと対応する値の配列を描画データとして渡すだけで表示してくれます。

複数の折れ線グラフ

1つのグラフに必要な凡例、X座標、y座標のデータをタプルでまとめて、それをリストに登録したものを引数に渡します。

縦棒グラフ(グルーピング)、積み上げグラフ

これらは複数の値をグループ化して、まとめて表示するチャートであり、タプルのリスト形式でプロットデータを設定します。

グループ化が少し分かりづらいかもしれませんが、項目名と内訳と考えてもらえれば理解しやすいと思います。

ちなみに、この2つのグラフはデータの与え方が全く同じで、ChartTypeを変えるだけで縦棒グラフ(グルーピング)なったり、積み上げグラフになったりします。

ただ、積み上げグラフの場合は凡例が下から積みあがってしまうので、縦棒グラフ(グルーピング)の凡例の並びと合わせるため、関数の最初にデータの並びを逆転させています。

見て頂く左右のグラフの凡例の色が異なっていることが分かると思います(左はコアの色が青、右はコアの色がグレー)。

色も完全に統一したい場合は、バーのColorを指定する必要がありますが、今回のサンプルではそこまでしていません。

MSChartもLiveChartsやScottPlotと同様、項目名と内訳という考え方でプロットデータをセットすれば良いようになっています。

ScottPlot、OxyPlot、LiveChartsとサンプルソースを合わせているため group という変数名を使っていますが、本当は明細(detail) とか、内訳(breakdown) という変数名にした方が良かったなと思っています。

ソースコード

サンプルプロジェクトをダウンロード&解凍したあと、プロジェクトをVisual Studioで開くと、次のレイアウトが表示されます。

タブページが3つあり、1ページ目と2ページ目には4つ、最後の3ページ目には1つ、合計10個のMSChartのコントロールを張り付けています。

デザイナー上ではグレーの箱として表示されていますが、これはMSChartコントロールではなく、WindowsFormsHostです。

しかし、WindowsFormsHostのサイズを広げると、自動的に MSChartのサイズも連動して広がるため、実質MSChartのサイズを直接広げている事と同じです。

サンプルプログラムのXAMLのソースコードは次の様になっています。

次にC#のソースコードを見てみましょう。

ソースを読み解く上で、MSChartの描画手順の全体像を知っていると理解しやすいので、櫃能な方はこちらの記事もご参考にして下さい。

ソースの解説(ポイント)

使い方については、ソースコードを見て頂くとして、ここではポイントだけ解説しておきます。

MSChartのグラフ描画で一番簡単なサンプルは次の通りです。

このサンプルは折れ線グラフを描画する場合のものですが、表示したいグラフに応じてChartStyleを設定することで、色々なグラフが描画できるようになっています。

縦軸・横軸の設定について

縦軸、横軸は ChartAreaのAxisX,AxisYプロパティを使います。

積み上げグラフについて

MSChartの場合、積み上げグラフはChartStyle に ChartStyle.StackedColumnを代入することで表示できます。

データの与え方やグラフの表示手順は縦棒グラフ(グループ)と全く同じですが、積み上がる方向が下から上になってしまいます。

凡例を縦棒グラフ(グループ)と同じ様にするために、次の2行で与えるデータの順番を逆転させています。

チャートの初期化

MSChartコントロールの見栄えや操作性を良くするためには、補助線の色をグレーにしたり、マウスホィールによる拡大縮小に対応させたりなど、ある程度の設定が必要になります。

個々の関数(メソッド)内に記述するにはあまりにも量が多いので、初期化処理を集めた ChartInit 関数を用意しています。

中身は、各Collectionのクリアと最低限必要なオブジェクト(Title、ChartArea)の追加、XY軸の設定、拡大縮小用マウスイベントのハンドラ登録などです。

マウスホィールを回すとグラフが拡大/縮小し、中央ボタンをクリックすると解除される仕様です。

現時点ではマウスホィールの回転に応じて、縦横どちらも拡大/縮小されてしまうため、少々使い勝手が悪いと思います。

どちらか一方を固定してしまうとか、別の操作と併用して拡大/縮小を縦横独立して操作できるようにするなどの工夫が必要かもしれません。

まとめ

今回はMSChartでよく使うであろう10個のグラフについて、簡単に使えるような関数(メソッド)を作り、それに対する解説を行いました。

MSChartは標準搭載されている機能ですが、WPFで使う場合は WindowsFormsHostの中に入れて使う必要があります。

デザイナーに張り付ける方法以外はWindowsFormと全く同じ手順でグラフ描画が可能です。

MSChartには他にも多くのグラフに対応していますので、今回の記事を参考に必要な機能を追加して頂ければと思います。

タイトルとURLをコピーしました