オープンソースのグラフ・コントロール「ZedGraph」を使う：連載：VBで実践！ 外部コンポーネント活用術（2/4 ページ）

折れ線グラフや棒グラフなどの2Dグラフを多彩な装飾とともに描画するフリーのコントロールを紹介。Webアプリでも利用できる。

[岸本真二郎，デジタルアドバンテージ]

最小限の設定でグラフを作成

　まずZedGraphのサイトからライブラリをダウンロードします。「zedgraph_dll_v514_464.zip」というファイルが本稿執筆時点での最新版です。

　このZIPファイルには、.NET Framework 1.1用のライブラリ（バージョン 4.6.4）と.NET Framework 2.0用のライブラリ（バージョン5.1.4）が含まれています。開発環境に応じて使い分けましょう。本稿では.NET Framework 2.0を用います。

　ダウンロードしたZIPファイルを適当なフォルダに展開しておきます。次にVisual Studio 2005（あるいはVisual Basic 2005 Express Edition）からWindowsアプリケーションのプロジェクトを新規作成した後、ZedGraphをプロジェクトで利用できるよう「参照の追加」を行います。

　VBではソリューション・エクスプローラのツールバーから「すべてのファイルを表示」をクリックして「参照設定」を表示し、そこから右クリックで「参照の追加」を行うか、メニューから［プロジェクト］−［参照の追加］を選択してから、ライブラリ（ZedGraph.DLL）への参照を追加します。

■ZedGraphControlをツールボックスにセット

　次に、グラフをフォームにドラッグ＆ドロップで貼り付けることができるように、ツールボックスにZedGraphのコントロールを登録します。

　いま新規作成したプロジェクトのWindowsフォームをオープンして、フォームの編集が可能な状態（フォームにツールボックスからコントロールをドラッグ＆ドロップできる状態）にします。ここでツールボックスの右クリック・メニューから［アイテムの選択］を選択し、「ZedGraph.DLL」を追加します。これによりツールボックスには、「ZedGraphControl」という名前のコントロールが追加されます。以上でグラフを表示するWindowsアプリケーション作成の準備が整いました。

折れ線グラフの作成

　手始めに折れ線グラフを表示するアプリケーションを作成してみましょう。このアプリケーションの実行時の画面は次のようになります。

画面5 ZedGraphにより折れ線グラフを表示するアプリケーション

　まずWindowsフォームにツールボックスからZedGraphControlをドラッグ＆ドロップします（ここではコントロールの変数名は「zg1」としました）。フォーム上でコントロールのサイズを適当に決めたら、コード・エディタを開いてグラフを描画するコードを記述します。

Imports ZedGraph

Public Class Form2

  Private Sub Form_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
    Create_LineGraph(zg1) ' 折れ線グラフ
  End Sub

  ' 折れ線グラフ
  Private Sub Create_LineGraph(ByVal zg As ZedGraphControl)

    Dim myPane As GraphPane = zg.GraphPane

    ' グラフ／X軸、Y軸のタイトル設定
    myPane.Title.Text = "線グラフのサンプル"
    myPane.XAxis.Title.Text = "時間"
    myPane.YAxis.Title.Text = "値"

    ' X軸の目盛りを描画
    myPane.XAxis.MajorGrid.IsVisible = True

    ' Y軸のスケールを赤に
    myPane.YAxis.Scale.FontSpec.FontColor = Color.Red
    myPane.YAxis.Title.FontSpec.FontColor = Color.Red

    ' 反対側のY軸の目盛りの描画
    myPane.YAxis.MajorTic.IsOpposite = False
    myPane.YAxis.MinorTic.IsOpposite = False

    ' Yが0の位置の水平線
    myPane.YAxis.MajorGrid.IsZeroLine = True
    myPane.YAxis.Scale.Align = AlignP.Inside

    ' Y軸の範囲を指定する
    myPane.YAxis.Scale.Min = -20
    myPane.YAxis.Scale.Max = 30
    myPane.YAxis.IsVisible = True

    ' グラフ領域の内側をグラデーションに
    myPane.Chart.Fill = _
        New Fill(Color.White, Color.LightGray, 45.0F)

    ' テキストボックスをグラフの左下に描画
    Dim text As New TextObj( _
      "Zoom: 左のマウスボタンでドラッグ" & Chr(10) & _
      "Pan: Ctrl+左ボタンでドラッグ" & Chr(10) & _
      "Context Menu: 右ボタン", _
       0.05F, 0.95F, CoordType.ChartFraction, AlignH.Left, AlignV.Bottom)
    text.FontSpec.StringAlignment = StringAlignment.Near
    myPane.GraphObjList.Add(text)

    ' スクロールバーは非表示
    zg.IsShowHScrollBar = False
    zg.IsShowVScrollBar = False
    zg.IsAutoScrollRange = True

    ' ポイントの値をToolTip風に表示する
    zg.IsShowPointValues = True

    ' 描画するデータを作成
    Dim list As New PointPairList
    Dim i As Integer, x As Double, y As Double

    For i = 0 To 35
      x = i * 5.0
      y = Math.Sin(i * Math.PI / 15.0) * 16.0
      list.Add(x, y)
    Next i

    ' 赤い線でグラフの名称は“サイン波”に設定
    Dim myCurve As LineItem
    myCurve = myPane.AddCurve( _
        "サイン波", list, Color.Red, SymbolType.Diamond)
    myCurve.Symbol.Fill = New Fill(Color.White) ' ラインの色

    ' グラフ情報を再計算
    zg.AxisChange()

  End Sub

リスト1 折れ線グラフを表示するサンプル・コード

　このリストでは、Create_LineGraphというメソッドを用意しておき、フォームがロードされた際にこれを呼び出すようにしています。そのとき、フォームに貼り付けたZedGraphControlオブジェクト（zg1）を引数で渡しています。

　Create_LineGraphメソッドの内容ですが、まず引数で渡されたZedGraphControlオブジェクトからGraphPaneオブジェクトを取得します。

Dim myPane As GraphPane = zg.GraphPane

　このGraphPaneオブジェクトは、グラフの設定を行うためのオブジェクトととらえてください*1。myPaneに対してはグラフのタイトルや目盛りの設定などを行います。

*1 ZedGraphでは、1つのZedGraphControl内に複数のグラフ（ペイン）を描画できるのですが、これについては本稿では扱いません。

　次にグラフに描画するデータを作成します。リスト1はサンプルですので、メソッドの中でデータを生成していますが、実際のアプリケーションでは描画したいデータはすでにそろっていることでしょう。

　ポイントはPointPairListクラスのインスタンス（ここでは変数list）に座標値を追加しているところです。折れ線グラフでは、描画するデータをこのPointPairListオブジェクトに用意すればグラフの描画が行えます。

　座標のリストが準備できたら、AddCurveメソッドでグラフ領域に折れ線を追加します。AddCurveメソッドの引数には、グラフの名前（この名前が凡例として表示されます）、座標のリスト、描画色、各点の位置に表示する図形（四角、丸など）を指定します。AddCurveメソッドにはこれ以外にもいろいろな引数のパターンが用意されています。また、PointPairList型のオブジェクトでなく、座標値が含まれるDouble型の配列を直接セットすることもできます。

　最後にAxisChangeメソッドを呼び出してZedGraphControlを再描画します。これによりグラフ上に折れ線が表示されます。

棒グラフの作成

　次に棒グラフを作成してみます。アプリケーションの実行画面は次のようになります。

画面6 作成した棒グラフ

　折れ線グラフと同様にフォームにセットしたZedGraphControlに棒グラフを描画します。グラフのタイトルや目盛りなどの設定は折れ線グラフと同様に行います。さらに棒グラフの値も折れ線グラフと同様にPointPairList型の変数にセットします。

　唯一の違いは、棒グラフの追加はAddBarメソッドを使うことです。AddBarメソッドで棒グラフを追加するとBarItemクラスのオブジェクトが返されます（以下のリスト2では変数myBar）。ここではこのBarItemオブジェクトを使って棒グラフにグラデーションをかけたように描画しています。

Private Sub CreateGraph_GradientByZBars(z1 As ZedGraphControl)

  Dim myPane As GraphPane = z1.GraphPane
  myPane.Title.Text = "グラデーションを使った棒グラフ"
  myPane.XAxis.Title.Text = "棒の数"
  myPane.YAxis.Title.Text = "値"

  myPane.Chart.Fill = _
    New Fill(Color.White, Color.FromArgb(220, 220, 255), 45)
  myPane.Fill =  _
    New Fill(Color.White, Color.FromArgb(255, 255, 225), 45)

  ' サンプルデータを用意
  Dim list As New PointPairList()
  Dim rand As New Random()

  Dim i As Integer
  For i = 0 To 15
    Dim x As Double = CDbl(i) + 1
    Dim y As Double = rand.NextDouble() * 1000
    Dim z As Double = i / 4.0
    list.Add(x, y, z)
  Next i

  ' 棒グラフを追加
  Dim myBar As BarItem = _
    myPane.AddBar("グラデーション", list, Color.Blue)
  Dim colors As Color() = _
    {Color.Red, Color.Yellow, Color.Green, Color.Blue, Color.Purple}
  myBar.Bar.Fill = New Fill(colors)
  myBar.Bar.Fill.Type = FillType.GradientByZ

  myBar.Bar.Fill.RangeMin = 0
  myBar.Bar.Fill.RangeMax = 4

  z1.AxisChange()

End Sub

リスト2 棒グラフを表示するサンプル・コード

　続いてはパイ・チャートを作成してみます。