SHOEISHA iD

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

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

ComponentZine(True WinChart)

多彩なグラフ描画機能を簡単に組み込む

PowerTools True WinChart for .NETコンポーネントでかんたんグラフ作成

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

コードの作成

 C1Chartコンポーネントは、各部位がそれぞれクラスとして作成され、階層状に組み立てられています。どちらかと言うと、Excel VBAでExcelの各オブジェクトを操作するのに似ています。

 今回のプログラムでは、次の3つの機能を実装します。

  • あらかじめコードに組み込んだデータを元に、5つのデータを持った1つのデータグループから、単純な横棒グラフを作成する
  • データをNumericUpDownコントロールから入力して、その値でグラフを作成する
  • 5つのデータを持った2つのデータグループから横棒グラフを作成する

単一データでの単純な横棒グラフの作成

 この機能は、ボタン[グラフ作成1]のClickイベントハンドラに作成します。

  1. まず、あらかじめC1Chartに設定されているデータソースを削除します。
    このデータソースは、ChartDataSeriesCollectionコレクションになっており、ChartDataオブジェクトのSeriewListプロパティで取得します。
    1つのデータは1つのデータグループに所属し、ChartDataSeriesオブジェクトで操作されます。グラフでは複数のデータグループを扱いますから、ChartDataSeriesオブジェクトをコレクションで管理します。
    そこで、SeriesListプロパティを操作対象にClearメソッドを実行すると、それまで設定されていたデータソースを消去できます。
    C1Chart1.ChartGroups(0).ChartData.SeriesList.Clear()
    
  2. 次に、グラフで表示する値の範囲を設定します。
    C1Chartコンポーネントはデフォルトでは、表示する値の範囲を自動的に設定します。これはこれで便利なのですが、値の範囲の最小値がグラフデータの最小値に設定されてしまう場合があります。そこで、値の範囲を0から10まで、と手動で設定します。
    値の範囲はグラフのY軸なので、最小値はChartAreaクラスのAxisYクラスのMinプロパティを使用します。最大値はMaxプロパティを使用します。
    ここでは、Y軸の最小値を0に、最大値を10にセットします。
    Me.C1Chart1.ChartArea.AxisY.Min = 0
    Me.C1Chart1.ChartArea.AxisY.Max = 10
    
  3. 新しいデータテーブルを設定します。
    最初は、5つのデータを持った1つのデータグループを作成します。グラフの作成は、データをX軸方向に5個作成し、Y軸に各データの値を設定する、という方法をとります。
    まず、配列を2つ用意します。1つはX軸に設定するデータの名称で、もう1つはY軸に設定するデータの値を格納します。配列の数が、表示するデータの個数になります。
    Dim datanum(4) As String
    Dim datavalue(4) As Single
    Dim i As Integer
    
  4. For...Nextステートメントを使って配列にデータを格納します。
    X軸に設定するデータには、「Data1」「Data2」というデータ名を格納します。Y軸には各データの値を簡単な掛け算で「1,2,3,4,5」という値を格納します。
    'X軸がデータの個数、Y軸が各データの値になる
    For i = 0 To 4
        datanum(i) = "Data" & i
        datavalue(i) = 1 * (i + 1)
    Next i
    
  5. 配列データをグラフのデータソースとして設定します。
    まず、ChartDataSeriesオブジェクトを作成し、ChartDataSeriesCollectionコレクションに追加します。
    ChartDataSeriesクラスは、グラフ化するデータ、グラフデータの外観を設定するプロパティとスタイルオブジェクトが含まれています。
    AddNewSeriesメソッドを使用すると、作成と追加を同時に行うことができます。これで、1つのデータグループがデータソースとして組み込まれます。
    Dim series As C1.Win.C1Chart.ChartDataSeries = _
       Me.C1Chart1.ChartGroups(0).ChartData.SeriesList.AddNewSeries()
    
  6. 次に、棒グラフの色を設定します。
    series.LineStyle.Color = Color.Blue
    
  7. そして、CopyDataInメソッドを使用して、X軸とY軸に配列データを設定します。
    X軸にはデータの名称が設定され、Y軸には各データの値が設定されます。そして、これらが配列の数だけ設定され横棒グラフとなります。
    series.X.CopyDataIn(datanum)
    series.Y.CopyDataIn(datavalue)
    
単一のデータからできた横棒グラフ
単一のデータからできた横棒グラフ

NumericUpDownの値からグラフを作成する

 基本的には、配列でグラフデータを作成し表示することに変わりありません。配列にデータを格納する際に、NumericUpDownコントロールから値を取得し配列を作成します。

 ここでは、NumericUpDownコントロールを4つ用意し、グラフデータの個数も4個にします。また、値の表示範囲は0~100にし、グラフ化の処理はボタン[グラフ作成-2]のClickイベントハンドラに作成します。

 変更するのは、配列の要素数とMaxMinプロパティの値、そしてY軸用のデータを格納する配列には、NumericUpDownコントロールのValueプロパティの値を代入しておきます。

Dim datanum(3) As String
Dim datavalue(3) As Single
Dim i As Integer

'X軸がデータの個数、Y軸が各データの値になる
For i = 0 To 3
    datanum(i) = "Data" & i
Next i

datavalue(0) = Me.NumericUpDown1.Value
datavalue(1) = Me.NumericUpDown2.Value
datavalue(2) = Me.NumericUpDown3.Value
datavalue(3) = Me.NumericUpDown4.Value

 これで、NumericUpDownコントロールの数値を変えて[グラフ作成-2]ボタンを押せば、その値でグラフが再描画されるようになります。

NumericUpDownの値からできた横棒グラフ
NumericUpDownの値からできた横棒グラフ

2つのデータグループから横棒グラフを作成する

 今度は、複数のデータグループをグラフで表示する場合です。同じ種類のデータを複数個比較する場合などによく使われます。

 その場合は、データグループごとにChartDataSeriesオブジェクトを追加し、それぞれにデータをセットします。

  1. Y軸に設定するデータの値用の配列を追加します。
    X軸はデータの個数が変わらないので、そのまま1つの配列を使用します。
    Dim datanum(4) As String
    Dim datavalue1(4) As Single
    Dim datavalue2(4) As Single
    Dim i As Integer
    
  2. Y軸データを2種類作成します。
    ここでは、最初のデータグループを1~5までの値にして、2番目のデータグループを5~9の値にします。
    For i = 0 To 4
        datanum(i) = "Data" & i
        datavalue1(i) = 1 * (i + 1)
        datavalue2(i) = 1 * (i + 5)
    Next i
    
  3. ChartDataSeriesオブジェクトを2つ作成します。
    Dim series1 As C1.Win.C1Chart.ChartDataSeries = _
                       Me.C1Chart1.ChartGroups(0).ChartData.SeriesList.AddNewSeries()
    
       Dim series2 As C1.Win.C1Chart.ChartDataSeries = _
                       Me.C1Chart1.ChartGroups(0).ChartData.SeriesList.AddNewSeries()
    
  4. それぞれのChartDataSeriesオブジェクトに、X軸とY軸のデータを設定します。
    series1.X.CopyDataIn(datanum)
    series2.X.CopyDataIn(datanum)
    series1.Y.CopyDataIn(datavalue1)
    series2.Y.CopyDataIn(datavalue2)
    
    これで、2つのデータグループのデータを横棒グラフで表示できます。
NumericUpDownの値からできた横棒グラフ
NumericUpDownの値からできた横棒グラフ

まとめ

 ひとまず、C1Chartコンポーネントを使ってデータをフォーム上でグラフ化する処理を使ってみました。オブジェクト構造(クラスの階層)がまだ少し分かりにくいですが、思ったよりも簡単にプログラム実行時にデータをグラフ化できることが分かりました。

 自分でグラフの描画処理を実装することを考えれば、手軽にグラフ化できるのはとても嬉しいです。

 次回は、さらにグラフの各部位を操作し、いろいろなグラフを作れるようにしてみます。

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

  • このエントリーをはてなブックマークに追加
ComponentZine(True WinChart)連載記事一覧

もっと読む

この記事の著者

瀬戸 遥(セト ハルカ)

8ビットコンピュータの時代からBASICを使い、C言語を独習で学びWindows 3.1のフリーソフトを作成、NiftyServeのフォーラムなどで配布。Excel VBAとVisual Basic関連の解説書を中心に現在まで40冊以上の書籍を出版。近著に、「ExcelユーザーのためのAccess再...

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

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

この記事をシェア

  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/802 2009/03/17 11:57

おすすめ

アクセスランキング

アクセスランキング

イベント

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

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

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

メールバックナンバー

アクセスランキング

アクセスランキング