SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

組み合わせの達人

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

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

  • X ポスト
  • このエントリーをはてなブックマークに追加

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

 ここまで数レコードレベルでの改良を行ってきましたが、売上管理アプリケーションでは、月次での合計も必要だと思います。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);

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

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

 これだけで、横向きに棒グラフの様なイメージが完成します。後は、描画する棒グラフの色を、好みの色に調整してみてください。

次のページ
グリッドのデータを印刷してみよう

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
組み合わせの達人連載記事一覧

もっと読む

この記事の著者

高山 昌悟(タカヤマ ショウゴ)

今までは主に、Windowsアプリケーションの開発を行ってきました。最近はWebアプリケーションの開発を行っています。

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/3242 2008/11/12 14:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング