組み合わせの達人

組み合わせの達人－売上管理アプリケーションに機能を追加しよう

第2回 ComponentOne Studioを利用して簡単な売上管理アプリケーションを作成する

高山　昌悟[著]

2008/11/12 14:00

ダウンロードサンプルソース (977.9 KB)

小計行・合計行を追加してみよう

　ここまで数レコードレベルでの改良を行ってきましたが、売上管理アプリケーションでは、月次での合計も必要だと思います。1ヶ月間の合計行を追加してみることにしましょう。

　また今回、カテゴリも追加したため、同一日のデータが複数行になる場合も出てきました。そのため、日付単位での小計行も算出したいと思います。

　小計行・合計行を追加するには、単純にそれぞれの列ごとの値を合計し、計算結果を表示する行を追加する方法があります。しかしここでは、FlexGridのデータ集計機能を利用して簡単に実現したいと思います。

　集計値の計算にはSubtotalメソッドを利用します。

// 小計をクリアします。
this.c1FlexGrid1.Subtotal(AggregateEnum.Clear);

// グリッドをソートします。
this.c1FlexGrid1.Sort(SortFlags.Ascending, 0, 1);

// 合計行を算出します。
this.c1FlexGrid1.Subtotal(AggregateEnum.Sum, -1, -1, 2, "合計");

// 小計行を算出します。
this.c1FlexGrid1.Subtotal(AggregateEnum.Sum, 0, 0, 2, "{0:MM/dd} 小計");

　まず最初に事前に設定されている集計行を削除します。次に日付順に表示し、商品カテゴリで分類するために、この2つのフィールドでソートしておきます。

　合計や小計を算出する場合、SubTotalメソッドの第1引数には集計関数の種類としてSumを指定します。そして第2～第4引数でアウトラインレベル、グルーピングする列、および集計を行う列を指定します。

　「グルーピングする列」は、合計では特定の列インデックスの代わりに-1を使用します。日付単位での小計の算出を行う場合は、0列（日付）を指定します。「集計を行う列」は、合計、小計とも2列（売上金額）を指定します。

　最後に、合計行の見出しとして「合計」を指定します。小計行の見出しには、日付を表示するためプレースホルダを指定しています。

　以上で集計行の実装は完成です。

※

　今回は集計行の説明のため、粗利率については平均値を算出するAverageを指定します。合計値での粗利率が算出されていないことをご了承ください。

　最後に集計行を目立たせるために表示を少し変えてみましょう。

CellStyle cellStyle = c1FlexGrid1.Styles[CellStyleEnum.GrandTotal];
cellStyle.BackColor = Color.Blue;
cellStyle.ForeColor = Color.White;
cellStyle.Font = new Font(Font, FontStyle.Bold);

cellStyle = this.c1FlexGrid1.Styles[CellStyleEnum.Subtotal0];
cellStyle.BackColor = Color.Orchid;
cellStyle.ForeColor = Color.White;
cellStyle.Font = new Font(Font, FontStyle.Bold);

　表示を切り替えるにはセルスタイルを指定します。今回は背景色を青に、文字色を白にしてみました。さらに太字に設定しています。小計行のセルスタイルも同様に変更しました。

　では、実行してみましょう。FlexGridの1番下に合計行が表示されたでしょうか。また、日付単位での小計行も表示されていると思います。このように、FlexGridのメソッドを利用することで簡単に集計行を追加することができます。

利益率をビジュアル的に表現する

　さらに変更を加えていきましょう。集計行と同様、利益率の列についても色を変えてみたいと思います。利益率については、どれだけ利益率が高いのかをビジュアル的に捉えられるように、利益率に見合う割合でセルを塗り潰してみましょう。

　まず、FlexGridのDrawModeプロパティをNormalからOwnerDrawに変更します。これにより、セルの描画が発生するタイミングでOwnerDrawCellイベントを発生させることができます。

　OwnerDrawCellイベント発生時のソースは以下のようになります。

// 横幅を計算する。
Rectangle rc = this.c1FlexGrid1.GetCellRect(e.Row, "列インデックス");
rc.Width = (int)(this.c1FlexGrid1.Cols[e.Col].WidthDisplay * "利益率");

// 背景を描画する。
e.DrawCell(DrawCellFlags.Background | DrawCellFlags.Border);

// 棒グラフを描画する。
rc.Inflate(-2, -2);
e.Graphics.FillRectangle(Brushes.LimeGreen, rc);
rc.Inflate(-1, -1);
e.Graphics.FillRectangle(Brushes.PaleGreen, rc);

// セルの内容を描画する。
e.DrawCell(DrawCellFlags.Content);

　まず、対象になるセル（利益率を表示しているセル）の大きさを取得します。

　次に、実際の利益率の割合で横幅を算出します。算出結果からセルの背景、境界線を描画し、境界線部分と内側部分の色を付けて、横向きの棒グラフを描画します。最後にセルの内容（利益率）を描画します。