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

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

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

引数にLiveChartsのコントロールと描画したいデータを渡すと、簡単に描画してくれます。

必要最小限のプロパティを使っていますので、用途に応じてカスタマイズの上、お使いください。

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

この関数(メソッド)を使って、次のグラフ(チャート)を描画できます。

サンプルプログラム

サンプルプログラムを作りましたので、そのソースコードを使って解説していきたいと思います。

基本的に、「【WPF】ScottPlotで楽々グラフ(チャート)描画!関数化してみました!」の記事で紹介したサンプルと同じで、グラフ描画部分をScottPlotからLiveChartsに置き換えたものとなります。

画面レイアウト

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

描画ボタンをクリックすると、全てのチャートが描画されるようになっているのは、ScottPlotのサンプルと同様です。

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

サンプルプログラムのソースは下記からダウンロードできます。

今回は Nuget で取得した LiveCharts.Wpf.0.9.7 のライブラリも同梱していますので、任意のフォルダに解凍し、Visual Stduio 2019 でプロジェクトを開き、ビルドできると思います。

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

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

但し、「箱ひげ」「散布図」「レーダーチャート」「散布図と回帰直線」についてはLiveChartsでサポートされていないため、今回のサンプルでは実装していません。

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

引数は3つあり、第一引数にコントロールを、第二引数にタイトルを、第三引数以降に描画データ(プロットデータ)を渡す仕様です。

但し、タイトルについては、今回の関数ではサポートしていません。

理由は、そもそも、LiveChartsにはグラフのタイトルを表示する機能が無いためです。

ScottPlotの関数と同じ仕様にするために、あえて第二引数を付けていますが、ここに何を指定してもタイトルは表示されませんのでご注意ください。

タイトルが必要な場合、XAML側で StackPanel 等を用いて、TextBlock と LiveChart を上下に重ねれば実現できますが、今回は後から手を加えやすい様に、出来るだけシンプルな関数にしたかったので、そこまではしていません。

実際の関数の呼び方ですが、コントロールに “uxChart1” という名前が付けられており、xs にX方向のデータ、ysにY方向のデータが格納されていると仮定した場合、

という具合になります。

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

折れ線や棒グラフ、円グラフ、散布図は引数にプロットデータの配列を渡す仕様ですが、複数の折れ線グラフ、グルーピングした棒グラフ、積み上げグラフは複数の項目をグルーピングする形になるため、タプルをリスト形式で渡すようにしています。

詳しくはソースコードを見て頂くとして、ここでは簡単にポイントだけ押さえておきたいと思います。

単独の折れ線グラフ、散布図、散布図と回帰直線、箱ひげ図、ヒストグラム

これらはプロットデータを配列データとして、1つまたは2つ引数に渡します。

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

縦棒グラフ、横棒グラフ

縦棒グラフ、横棒グラフともプロットデータとして2つ渡すのは折れ線や散布図と同じですが、横軸がdouble型配列ではなく、文字列配列になっているところが異なる点です。

円グラフ

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

複数の折れ線グラフ

タプルのリスト形式で描画データを指定します。

タプルで、凡例タイトル(legend)、X座標の配列、y座標の配列を1まとまりにして、リストに追加していき、そのリストを引数に渡します。

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

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

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

LiveChartsをそのまま使う場合、値の渡し方が面倒なので、項目名と内訳という考え方でプロットデータをセットすれば良いようになっています。

このサンプルソース上では group という変数名を使っていますが、明細(detail) とか、内訳(breakdown) という変数名の方が良かったかもしれません。

ソースコード

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

先ほども申しましたが、タブページが2つあって、それぞれに LiveCharts のコントロールを4つづつ張り付けています。

LiveChartsの仕様上、折れ線や棒グラフは CartesianChartコントロールを、円グラフは PieChartコントロールを使う必要があります。

従って、1ページ目の3つ目だけ、PieChart を張り付けています。

もっとも、PieChart を張り付けても、コントロールのイメージが表示されないので、何も張り付けられていないように見えてしまいますが、XAMLを見て頂くと、ちゃんと張り付けていることが分かると思います。

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

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

ソースを読み解く上で、LiveChartsの描画手順の全体像を知っていると理解が深まりますので、LiveChartsをもう少し詳しく知りたい方は、こちらの記事もご一読下さい。

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

ソースコードを見て頂くと使い方は分かると思いますので、ポイントだけ解説しておきます。

LiveChartsの基本形は、次の様になります。

point_data は描画するプロットデータですが、いくつかのクラスが用意されており、グラフの種類によって使い分ける必要があります。

今回の場合はLineSeries(折れ線)を使っているので、ObservablePointというオブジェクトにXとYの値を格納することになります。

例えば、double型の配列として、xs と ys を用意したとすると次のようになります。

皆さんの用途に合ったように修正して頂く事を想定し、それぞれの関数(メソッド)では、そのグラフ(チャート)を書く上で必要最小限の記述に留めています。

アニメーションのON/OFFについて

LiveCharts は他のチャートコントロールに比べて描画速度が遅いという弱点があります。

そこで、少しでも描画を速くするために、今回はアニメーションをOFFにしました。

具体的には、チャートコントロールの DisableAnimations プロパティに true を代入すると、アニメーションしなくなります。

プロットが1000件以下の場合は十分高速に描画してくれますので、大量データのプロットをしないのであれば、DisableAnimationsを記述している行を削除するか、false を代入してアニメーションをONにしても良いと思います。

ただ、アニメーションを最初に見た時は「おっ!」と思いましたが、そのヌルっとした動作が、人によっては「動作が重い」とか「うざい」と感じるかもしれませんので、そこは状況に応じてという事で。

棒グラフについて

棒グラフは ColumnSeries を使います。

この時、横軸のラベルは AxisX プロパティに対して、 new Axis(){Labels = labels} を代入します。

labels は 表示したいラベルの配列です。

データはColumnSeries.Values メソッドに new ChartValues<double>(ys) を代入します。

ys はそれぞれの棒に対応する値で、一次元配列で渡します。

ここまでの設定で描画を行う場合、グラフの横幅が十分に大きくないと、X軸のラベルが所々省略されてしまいます。

省略させずに、全てのラベルを表示したい場合、Axis.Separator を使う必要があります。

具体的には次の様に記述することで、全てのラベルが表示されるようになります。

new Axis() { Labels = labels, Separator = new LiveCharts.Wpf.Separator() { Step = 1 } }

積み上げグラフについて

LiveChartsには積み上げグラフ専用メソッドが用意されています。

積み重ねたい分だけ、StackedColumnSeries を生成しては棒グラフの値をセットするという行為を繰り返せばOKです。

この時、StackedColumnSeriseのStackMode プロパティに StackMode.Values をセットすると、通常の積み上げグラフになります。StackMode.Percentage をセットすると、全体を100%にした積み上げグラフが描画できます。

X軸のラベルは、AxisX に対して new Axsi() を代入し、その際にX軸に表示したいラベルの配列を Labelsプロパティにセットします。

まとめ

今回はよく使うグラフ(チャート)について、LiveChartsで簡単に描画するための関数(メソッド)について解説しました。

LiveChartはビジュアルに優れているため、大量データで高速にグラフを作成したい場合、有料版を購入するか、他のチャートコントロールを検討してみて下さい。

プロット数が1000件以下のデータであれば、十分快適に動作してくれます。

アニメーションについてはインパクトがありますが、人によって「動作が重い」と捉えられる可能性もあるので、そこは状況に応じて使い分けて下さい。

いすれにせよ、色合いが美しいので、アニメーションが無くても十分にビジュアルです。

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