DataGridにグラフ機能を付加するには

 

●  DataGridの内容を棒グラフ/円グラフで表示するサンプル

図 DataGridの内容を棒グラフ/円グラフで表示するサンプル

 

このサンプルは、曜日別売上高を棒グラフと円グラフで表示します。DataGridの左側に表示されているBarボタンをクリックすると曜日別売上高の棒グラフが表示されます。Pieボタンをクリックすると曜日別売上高の円グラフが表示されます。DataGridのヘッダ右側に表示されている矢印（⇔）ボタンをクリックすると、曜日別の明細が表示されます。

 

このサンプルでは、以下のノウハウを習得することができます。

 

▲  棒グラフをランタイム時に描写する方法

▲  円グラフをランタイム時に描写する方法

▲  DataGridのHyperLinkColumnの使い方

▲  HyperLinkColumnにToolTipを表示する方法

▲  DataGridのカラムを表示/非表示に切り替える方法

▲  棒グラフ/円グラフをiframeに表示する方法

 

サンプルの行48-111では、DataGridを定義しています。行55では、DataGridにOnItemCommandイベントを登録しています。このイベントは、DataGridに表示されている矢印（⇔）ボタンをクリックすると発生します。行59-110の<Columns>…</Columns>では、HyperLinkColumn、BoundColumn、TemplateColumnで売上データと各種ボタンを表示しています。行60-66のHyperLinkColumnでは、棒グラフのリンクを表示しています。行62-63では、棒グラフのリンクボタンをクリックしたときにロードする.aspxファイルを設定しています。.aspxファイルには、QueryStringとして引数week=を渡します。たとえば、１週目のHyperLinkColumnには以下のようなURLが生成されます。

 

DataGridDrawBarChart.aspx?week=1

 

行64では、Textプロパティに”<span title=’Draw Bar Chart’> Bar</span>”を設定してリンクボタンにマウスを移動したときにツールチップが表示されるようにしています。行65では、Targetプロパティにiframeの名前を設定しています。これでDataGridDrawBarChart.aspxが描写した棒グラフが、行115で定義しているiframe上に表示されます。

 

行67-73のHyperLinkColumnでは、円グラフのリンクをクリックしたときにDataGridDrawPieChart.aspxファイルをロードするように定義しています。QueryStringには、引数week=で週の番号を渡しています。Targetプロパティにiframeの名前を指定していますので、DataGridDrawPieChart.aspxで描写した円グラフはiframe上に表示されます。行74のBoundColumnでは、売上テーブルのweekのフィールドをバインドしています。行75-85のTemplateColumnでは、曜日別の売上高を集計して１週間分の合計額をバインドしています。行86-99のBoundColumnでは、日曜日から土曜日までの曜日別売上高をバインドしています。これらのBoundColumnのVisibleプロパティには、Falseを設定していますので表示されません。曜日別BoundColumnのVisibleプロパティは、矢印（⇔）のボタンをクリックしたときに、True/Falseに書き換えます。行100-109のTemplateColumnでは、Buttonコントロールで矢印（⇔）ボタンを表示しています。

 

48:     <asp:DataGrid id="dgrdSales" runat="server"

::::
 55:       OnItemCommand="dgrdSales_ItemCommand">
 59:       <Columns>
 60:         <asp:HyperLinkColumn
 61:           HeaderText=""
 62:           DataNavigateUrlField="Week"
 63:           DataNavigateUrlFormatString="DataGridDrawBarChart.aspx?week={0}"
 64:           Text="<span title='Draw Bar Chart'> Bar </span>"
 65:           Target="frChart"
 66:           ItemStyle-BackColor="Black" />
 67:         <asp:HyperLinkColumn
 68:           HeaderText=""
 69:           DataNavigateUrlField="Week"
 70:           DataNavigateUrlFormatString="DataGridDrawPieChart.aspx?week={0}"
 71:           Text="<span title='Draw Pie Chart'> Pie </span>"
 72:           Target="frChart"
 73:           ItemStyle-BackColor="Black" />
 74:         <asp:BoundColumn DataField="Week" DataFormatString="{0}週" HeaderText="週" />
 75:         <asp:TemplateColumn HeaderText="売上高">
 76:           <ItemTemplate>
 77:             <asp:Label id="lblSales" runat="server"
 78:               Text='<%# String.Format("{0:N0}", _
 79:                 Container.DataItem("Sun") + Container.DataItem("Mon") + _
 80:                 Container.DataItem("Thu") + Container.DataItem("Wed") + _
 81:                 Container.DataItem("Thu") + Container.DataItem("Fri") + _
 82:                 Container.DataItem("Sat") ) %>' />
 83:           </ItemTemplate>
 84:           <ItemStyle HorizontalAlign="Right" />
 85:         </asp:TemplateColumn>
 86:         <asp:BoundColumn DataField="Sun" DataFormatString="{0:N0}" HeaderText="日曜"
 87:           ItemStyle-HorizontalAlign="Right" ItemStyle-BackColor="Gold" Visible="False" />

::::
 98:         <asp:BoundColumn DataField="Sat" DataFormatString="{0:N0}" HeaderText="土曜"
 99:           ItemStyle-HorizontalAlign="Right" ItemStyle-BackColor="Gold" Visible="False" />
100:         <asp:TemplateColumn>
101:           <HeaderTemplate>
102:            <asp:Button id="btnExpandCollapse" runat="server"
103:              CommandName="ExpandCollapse"
104:              ToolTip="Expand and Collapse DataGrid Columns"
105:              Text="⇔" />
106:           </HeaderTemplate>
107:           <HeaderStyle BackColor="yellow" Font-Bold="True" />
108:           <Itemstyle BackColor="black" />
109:         </asp:TemplateColumn>
110:       </Columns>
111:     </asp:DataGrid>

         :::

115:     <iframe frameborder="no" name="frChart" width="450px" height="250px" />

 

Page_Load()イベントでは、ページが最初にロードされたときSub BindData()を呼び出して、DataGridに売上テーブルをバインドして表示しています。

 

  6: Sub Page_Load()
  7:   If Not IsPostBack Then
  8:     BindData()
  9:   End If
 10: End Sub

 

Sub BindData()の行13では、売上テーブルからレコードを抽出するSQLを生成しています。行18では、OleDbConnectionのOpen()メソッドでデータベースを開いています。行19では、OleDbCommandのExecuteReader()メソッドでOleDbDataReaderを生成してDataGridのDataSourceプロパティに設定しています。行20では、DataGridのDataBind()メッドで売上テーブルをバインドして表示しています。行21では、OleDbConnectionのClose()メソッドでデータベースを閉じています。

 

12: Sub BindData()
 13:   Dim strSQL as String = "Select * From tblWeeklySales Order by Week"

::::
 18:   con.Open()
 19:   dgrdSales.DataSource = cmd.ExecuteReader()
 20:   dgrdSales.DataBind()
 21:   con.Close()
 22: End Sub

 

DataGridから矢印（⇔）ボタンをクリックすると、OnItemCommandイベントが発生します。このイベントでは、CommandNameプロパティを参照してどのボタンがクリックされたかチェックします。CommandNameにExpandCollapseが格納されているときは、Sub ExpnadCollapseColumns()を呼び出して曜日別の売上高を表示/非表示に切り替えます。

 

24: Sub dgrdSales_ItemCommand(s As Object, e As DataGridCommandEventArgs)
 25:   If e.CommandName = "ExpandCollapse" Then
 26:     ExpandCollapseColumns()
 27:   End If
 28: End Sub

 

Sub ExpandCollapseColumns()では、DataGridのColumnsコレクションから曜日別売上高のカラムを参照して、VisibleプロパティをTrue/Falseに書き換えています。Not dgrdSales.Columns(i).Visibleは、VisibleプロパティがFalseのときTrue、TrueのときFalseになります。これで、DataGridの曜日別売上高のカラムが表示/非表示に切り替わります。

 

30: Sub ExpandCollapseColumns()
 31:   Dim i As Integer
 32:   For i=4 to dgrdSales.Columns.Count - 2
 33:     dgrdSales.Columns(i).Visible = Not dgrdSales.Columns(i).Visible
 34:   Next
 35:   BindData()
 36: End Sub

 

DataGridから棒グラフ(Bar)のリンクボタンをクリックすると、DataGridDrawBarChart.aspxがロードされます。このページのPage_Load()イベントでは、QueryStringで指定された週番号を取得して曜日別売上高の棒グラフを描写します。棒グラフは、iframe上に表示されます。行10では、RequestのQueryString()メッドで引数weekの値を取得して保存しています。QueryStringには、文字型で格納されていますので整数型に変換しています。行11では、売上テーブルから特定の週の売上データを抽出するSQLを生成しています。行12-14では、OleDbConnectionとOleDbCommandのインスタンスを生成しています。行17-18では、棒グラフのタイトルと凡例を生成しています。行25では、Selectステートメントのパラメータ変数@Weekに週番号を設定しています。行26では、OleDbConnectionのOpen()メソッドでデータベースを開いています。行27では、OleDbCommandのExecuteReader()メソッドでSelectステートメントを実行してOleDbDataReaderを生成しています。行28では、OleDbDataReaderのRead()メソッドで先頭レコードを読み込んでいます。行29-31のFor…Nextでは、配列変数に曜日別の売上高を格納しています。行32では、OleDbDataReaderのClose()メソッドでOleDbDataReaderを閉じています。行33では、OleDbConnectionのClose()メソッドでデータベースを閉じています。行34では、Sub DrawBarChart()を呼び出して棒グラフを描写してブラウザに送信しています。

 

 9: Sub Page_Load()
 10:   Dim intWeek As Integer = Int32.Parse(Request.QueryString("week"))
 11:   Dim strSQL as String = "Select * From tblWeeklySales Where Week=@Week"
 12:   Dim con as New OleDbConnection( _
 13:     ConfigurationSettings.AppSettings("conStringNw"))
 14:   Dim cmd as New OleDbCommand(strSQL, con)
 15:   Dim dr As OleDbDataReader
 16:
 17:   Dim strGraphTitle As String = String.Format("第{0}週-曜日別売上高",intWeek.ToString)
 18:   Dim strLegend() As String = {"日","月","火","水","木","金","土"}
       ::::
 25:   cmd.Parameters.Add("@Week",intWeek)
 26:   con.Open()
 27:   dr = cmd.ExecuteReader()
 28:   dr.Read()
 29:   For i=0 to intSales.Length -1
 30:     intSales(i) = Int( dr.GetDecimal(i+1)/1000 )
 31:   Next
 32:   dr.Close()

33:   con.Close()
 34:   DrawBarChart(strGraphTitle, intSales, strLegend)
 35: End Sub

 

Sub DrawBarChart()の詳しい解説は省略しますが、棒グラフは、GraphicsクラスのFillRectangle()メソッドとDrawRectangle()メソッドを使用して描写します。棒グラフのタイトルと凡例は、GraphicsのDrawString()メソッドを使用して描写します。棒グラフは、BitmapクラスのSave()メソッドを使用して保存します。Save()メソッドの引数には、Response.OutputStreamを指定して直接ブラウザに送信しています。これでiframe上に棒グラフが表示されます。

 

 

37: Sub DrawBarChart(GraphTitle As String, yaxis() As Integer, xaxis() As String)
 38:   Dim i As Integer
 39:   Dim bm As New Bitmap(400, 200)
 40:   Dim g As Graphics
 41:
 42:   g = Graphics.FromImage(bm)
 43:   g.Clear(Color.Snow)
 44:   g.DrawString(GraphTitle, New Font("Tahoma", 16), Brushes.Black, New PointF(5, 5))
 45:
 46:   Dim symbolLeg As PointF = New PointF(335, 20)
 47:   Dim descLeg As PointF = New PointF(360, 16)
 48:   For i = 0 To xaxis.Length - 1
 49:     g.FillRectangle(New SolidBrush(GetColor(i)), symbolLeg.X, symbolLeg.Y, 20, 10)
 50:     g.DrawRectangle(Pens.Black, symbolLeg.X, symbolLeg.Y, 20, 10)
 51:     g.DrawString(xaxis(i).ToString, New Font("Arial", 10), Brushes.Black, descLeg)
 52:     symbolLeg.Y += 15
 53:     descLeg.Y += 15
 54:   Next
 55:
 56:   Dim intSpaceBetBars As Integer = 40
 57:   Dim intScale As Integer = 1
 58:
 59:   For i = 0 To yaxis.Length - 1
 60:     g.FillRectangle(New SolidBrush(GetColor(i)), (i * intSpaceBetBars) + 15,

200 - (yaxis(i) * intScale), 40, (yaxis(i) * intScale) + 5)
 61:     g.DrawRectangle(Pens.Black, (i * intSpaceBetBars) + 15,

200 - (yaxis(i) * intScale), 40, (yaxis(i) * intScale) + 5)
 62:   Next
 63:   Dim p As New Pen(Color.Black, 2)
 64:   g.DrawRectangle(p, 1, 1, 398, 198)
 65:   bm.Save(Response.OutputStream, ImageFormat.Jpeg)
 66: End Sub

 

DataGridから円グラフ(Pie)のリンクボタンをクリックすると、DataGridDrawPieChart.aspxがロードされます。このページのPage_Load()イベントでは、QueryStringで指定された週番号を取得して曜日別売上高の円グラフを描写します。円グラフは、iframe上に表示されます。円グラフは、Sub DrawPieChart()を呼び出して描写します。

 

 8: Sub Page_Load()
  9:   Dim intWeek As Integer = Int32.Parse(Request.QueryString("week"))
 10:   Dim strSQL as String = "Select * From tblWeeklySales Where Week=@Week"
 11:   Dim con as New OleDbConnection( _
 12:     ConfigurationSettings.AppSettings("conStringNw"))
 13:   Dim cmd as New OleDbCommand(strSQL, con)
 14:   Dim dr As OleDbDataReader
 15:
 16:   Dim strGraphTitle As String = String.Format("第{0}週-曜日別売上高",intWeek.ToString)
 17:   Dim strLegend() As String = {"日","月","火","水","木","金","土"}
       :::
 24:   cmd.Parameters.Add("@Week",intWeek)
 25:   con.Open()
 26:   dr = cmd.ExecuteReader()
 27:   dr.Read()
 28:   For i=0 to intSales.Length -1
 29:     intSales(i) = Int( dr.GetDecimal(i+1)/1000 )
 30:   Next
 31:   dr.Close()
 32:   con.Close()
 33:   DrawPieChart(strGraphTitle, intSales, strLegend)
 34: End Sub