連載：VBで実践！ 外部コンポーネント活用術

オープンソースのグラフ・コントロール
「ZedGraph」を使う

デジタルアドバンテージ　岸本 真二郎
2008/02/01
Page1 Page2 Page3 Page4

Webアプリケーションでグラフを描画

　WebアプリケーションでもZedGraphを使ってブラウザにグラフを表示させることができます。

　ZedGraphにはZedGraph.dllのほかにZedGraph.Web.dllが含まれています。Webアプリケーションではこれらの2つのDLLを利用します。グラフのタイトルや目盛りの設定、データを用意して描画処理といった記述はWindowsアプリケーションの場合と変わりません。


画面9 Webアプリケーションでグラフを表示する

　以下ではWindowsアプリケーションの場合と異なる部分について簡単に説明します。

■参照の追加

　参照の追加はWindowsアプリケーションと同じです。ただしZedGraph.Web.dllも追加します。

■コントロールをページに追加

　WindowsフォームのツールボックスにZedGraphControlを追加したのと同様に、Webアプリケーションのページをデザインする際のツールボックスにもコントロールを追加します。ツールボックスを右クリックして表示されるメニューから［アイテムの選択］を選択し、ZedGraph.Web.dllを指定します。ツールボックスには「ZedGraphWeb」というコントロールが追加されます。後はこのZedGraphWebを目的のWebフォームにドラッグ＆ドロップします。

■グラフの描画

　グラフの描画処理は、ZedGraphWebコントロールのRenderGraphイベントのタイミングで行います。ページにドロップしたグラフ・コントロールを選択してから、Visual Studio 2005のプロパティ・ウィンドウでイベントを表示し、イベントの一覧から「RenderGraph」をダブルクリックするとRenderGraphのイベント・ハンドラが生成されます。

　イベント・ハンドラに記述する内容はWindowsアプリケーションの場合に行ったものと同じです。イベント・ハンドラの引数にグラフ・コントロールのマスターペイン（ZedGraph.MasterPane）が渡されますので、ここからメインのGraphPaneオブジェクトを取得します。このGraphPaneのオブジェクトを使って、タイトルをセットしたり、グラフ・データを追加したりする処理を記述します。

　描画したグラフの内容はZedGraphImagesというフォルダにキャッシュされます。そのため、Webアプリケーションが配置された場所に事前にZedGraphImagesという名前のフォルダを作成して、ASP.NETの実行アカウントが書き込み可能なようにフォルダの権限を設定しておく必要があります。サーバで生成された画像はPNG形式でブラウザに送られます。

　以下に画面9のグラフを表示するサンプル・コードを示します。

Protected Sub ZedGraphWeb1_RenderGraph(ByVal webObject As ZedGraph.Web.ZedGraphWeb, ByVal g As System.Drawing.Graphics, ByVal pane As ZedGraph.MasterPane) Handles ZedGraphWeb1.RenderGraph

  Dim myPane As GraphPane = pane(0)

  ' タイトルと軸のラベル
   myPane.Title.Text = "Cat Stats"
  myPane.YAxis.Title.Text = "Big Cats"
  myPane.XAxis.Title.Text = "Population"

  ' デモデータを用意
   Dim labels() As String = _
    {"Panther", "Lion", "Cheetah", "Cougar", "Tiger", "Leopard"}
  Dim x() As Double = {100, 115, 75, 22, 98, 40}
  Dim x2() As Double = {120, 175, 95, 57, 113, 110}
  Dim x3() As Double = {204, 192, 119, 80, 134, 156}

  ' 積み上げグラフ：赤
   Dim myCurve As BarItem = myPane.AddBar("Here", x, Nothing, Color.Red)
  myCurve.Bar.Fill = New Fill(Color.Red, Color.White, Color.Red, 90.0F)

  ' 2番目の積み上げグラフ：青
   myCurve = myPane.AddBar("There", x2, Nothing, Color.Blue)
  myCurve.Bar.Fill = New Fill(Color.Blue, Color.White, Color.Blue, 90.0F)

  ' 3番目の積み上げグラフ：緑
   myCurve = myPane.AddBar("Elsewhere", x3, Nothing, Color.Green)
  myCurve.Bar.Fill = New Fill(Color.Green, Color.White, Color.Green, 90.0F)

  ' ラベルの間にY軸の目盛りを描画
   myPane.YAxis.MajorTic.IsBetweenLabels = True

  ' Y軸のラベル
   myPane.YAxis.Scale.TextLabels = labels
  myPane.YAxis.Type = AxisType.Text

  ' 積み上げグラフを指定する
   myPane.BarSettings.Type = BarType.Stack

  ' 棒グラフを水平方向に設定
   myPane.BarSettings.Base = BarBase.Y

  ' グラデーションを付けてグラフ領域の背景を描画
   myPane.Chart.Fill = New Fill(Color.White, _
   Color.FromArgb(255, 255, 166), 45.0F)

  pane.AxisChange(g)
End Sub
リスト4 Webアプリケーションでグラフを表示する

■

　オープンソースとして配布されているライブラリやツールはどれも機能が豊富で、その豊富な機能に圧倒されたり、英語のドキュメントに気が引けてしまったりと、利用をちゅうちょしてしまいがちですが、必要最小限の手順さえ押さえておけば、なかなか便利に使えます。今回紹介したZedGraphも、Windows／Webアプリケーションでちょっとしたグラフを入れたい場合などに重宝するのではないでしょうか。End of Article


　INDEX
　 VBで実践！ 外部コンポーネント活用術
　 オープンソースのグラフ・コントロール「ZedGraph」を使う
　   1．ZedGraphとは／作成できるグラフの種類
　   2．折れ線グラフの作成／棒グラフの作成
　   3．パイ・チャートの作成／そのほかの機能
  4．Webアプリケーションでグラフを描画
　
インデックス・ページヘ 　「VBで実践！ 外部コンポーネント活用術」

TechTargetジャパン

Insider.NET フォーラム 新着記事

＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）

RSSフィード

＠IT 新着記事

キャリアアップ

は.NET開発者中心に生まれ変わりました

.NET開発者中心コーナー

- PR -

＠IT Sepcial
→ ＠IT Special ヘ

イベントカレンダー

PickUpイベント

- PR -
もっと見る
- PR -

お勧め求人情報

ホワイトペーパー（TechTargetジャパン）

＠IT Sepcial
→ ＠IT Special ヘ
ソリューションFLASH