どうも！リョクちゃです。
今回は、Chartコントロールについて使い方を例を交えて紹介していきます。
CHartコントロールは、様々なグラフを描画することができる、
コントロールになります。
使用することでWindowsフォームアプリケーションで
グラフを作成・表示させることができます。
ちなみに前回はこちら、
初学者にとってアプリケーションをいきなり作るというのは、教材もなければなかなか難しいことだと思います。
ここでは、私たちにとって身近な消費税を題材にアプリケーションを作成していきます。作成していく過程で作り方のイメージをつかんでいただけたら嬉しいです。
dreamparadaisu.com
2021-01-12 03:22
目次
準備編
VisualStudio2019を使って、Windowsフォームアプリケーションを作成していきます。
最初の手順については、下記記事をご参照ください。
https://dreamparadaisu.com/vb_aplication_1/
スポンサーリンク
フォームの作成
以下のようなフォームを作成します。
| No | コントロール | 名前 |
|---|---|---|
| 1 | Label | lbDispUpper |
| 2 | Label | lbDispMeasure |
| 3 | Label | lbLower |
| 4 | Button | btnStart |
| 5 | Label | lbUpper |
| 6 | Label | lbMeasure |
| 7 | Label | lbLower |
| 8 | Chart | Chart1 |
各コントロールのフォントは、メイリオの18ptを設定しています。
実行環境
筆者の実行環境は、
- VisualStudio2019
- Windows 10 64bit
- .Net Framework 4.5.1
になります。
※ Windows7 8 8.1でも動作はできますが、画面デザインの表示が変わるかもしれません。
アプリケーションの目的
以下の要件を満たすことを目的とします。
- 起動時にあらかじめ設定した上限・下限値を各ラベルに表示する
- ボタンを押すことで、疑似測定値を生成しChartにプロットしていく
プログラム編
定数宣言～疑似閾値の設定～
あらかじめ今回のシステムの閾値を設定しておきます。
※本来の計測システムでは、測定対象によって閾値は変動しますが、
今回は例なので固定値として与えてあげます。
|
1 2 3 4 |
' 定数として上限値を宣言 Private Const UPPER_VALUE As Integer = 9999 ' 定数として下限値を宣言 Private Const LOWER_VALUE As Integer = 0 |
変数宣言
変数には、
- 測定値を疑似生成するための変数
- Chart(グラフ)に表示するデータを格納する変数
- Chart(グラフ)のプロット用に用意する変数
をそれぞれ宣言しておきます。
|
1 2 3 4 5 6 |
' ランダム変数を宣言 Private rd As New System.Random(10000) ' グラフ表示データ格納ようにデータテーブル変数を宣言 Private mGraphTable As DataTable = Nothing ' グラフ用にIDを変数として宣言 Private NumID As Integer = Nothing |
フォームロード時の処理
起動時には以下の処理を行えるようにします。
- Chart(グラフ)への表示用データ変数の初期化
- 上限・下限値の表示
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
''' <summary> ''' 画面起動時 ''' </summary> ''' <param name="sender"></param> ''' <param name="e"></param> Private Sub TestChart_Load(sender As Object, e As EventArgs) Handles MyBase.Load ' グラフ表示テーブルの初期化 mGraphTable = New DataTable With mGraphTable .Columns.Add("CNT") .Columns.Add("UPPER_VAL") .Columns.Add("LOWER_VAL") .Columns.Add("MEASURE_VAL") End With ' 上限値と下限値を表示 Me.lbUpper.Text = UPPER_VALUE Me.lbLower.Text = LOWER_VALUE End Sub |
計測開始ボタン押下時の処理
計測開始ボタンを押すことで、以下の処理を行えるようにします。
- 疑似測定値データの生成
- 作成した疑似測定値データの受信処理
受信処理については、別で関数として作成しておきます。
ボタン押下時には関数を呼び出す処理を記述します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
''' <summary> ''' 計測開始ボタン押下時 ''' </summary> ''' <param name="sender"></param> ''' <param name="e"></param> Private Sub btnStart_Click(sender As Object, e As EventArgs) Handles btnStart.Click ' 測定値データを乱数として疑似生成 Dim testData As Integer = Nothing testData = rd.Next(0, 9999) ' 測定値データ受信処理 Call MeasureDataReceive(testData) End Sub |
rd.Next(0,9999)と記述することで、
0~9999の範囲でランダムな疑似測定データが生成されます。
疑似測定値データの受信処理
受信処理関数では、以下の処理を行えるようにします。
- Chartへの表示用データ変数へのデータ追加
- 疑似測定値データをラベルへ表示
- CHartへの出力
- プロットポイントのインクリメント
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
''' <summary> ''' 測定値データ受信処理(疑似) ''' </summary> ''' <param name="readData"></param> Private Sub MeasureDataReceive(ByVal readData As String) ' データをグラフ用テーブルに書き込み If mGraphTable IsNot Nothing Then With mGraphTable .Rows.Add() .Rows(.Rows.Count - 1).Item("CNT") = CStr(NumID) .Rows(.Rows.Count - 1).Item("UPPER_VAL") = UPPER_VALUE .Rows(.Rows.Count - 1).Item("LOWER_VAL") = LOWER_VALUE .Rows(.Rows.Count - 1).Item("MEASURE_VAL") = readData End With End If ' 測定データをラベルに表示 Me.lbMeasure.Text = readData 'グラフ出力 Call OutputChartInspectResult() NumID += 1 ' カウントアップ End Sub |
Chartの初期化
初期化に関しては、以下の設定を行います。
- Chartの初期化
- ChartAreaの追加
- 各軸の設定
- 境界線の設定
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
''' <summary> ''' グラフエリアの初期化 ''' </summary> Private Sub SetChart() With Chart1 ' グラフの初期化 ' タイトル、系列、出力エリアをそれぞれ初期化 .Titles.Clear() .Series.Clear() .ChartAreas.Clear() ' 初期化されたChartにチャートエリアを追加 .ChartAreas.Add("New") ' X軸の設定 .ChartAreas(0).AxisX.IsMarginVisible = False .ChartAreas(0).AxisX.Title = "件数" ' 軸のタイトルを設定 .ChartAreas(0).AxisX.Interval = 1 ' 軸の間隔 .ChartAreas(0).AxisX.TitleFont = New Font("Calibri", 12) ' 軸のフォントを設定 .ChartAreas(0).AxisX.Minimum = 0 ' 軸の最小値を設定 ' Y軸の設定 .ChartAreas(0).AxisY.IsMarginVisible = False .ChartAreas(0).AxisY.Title = "測定値" .ChartAreas(0).AxisY.TitleFont = New Font("Calibri", 12) ' 境界線 .BorderlineColor = Color.Black .BorderlineDashStyle = DataVisualization.Charting.ChartDashStyle.Solid .BorderlineWidth = 2 ' 幅 End With End Sub |
Chartへの出力
出力では、以下の設定を行います。
- 系列の初期化
- 系列の追加
- データポイントの線色の設定
- グラフ種の設定
- 線の幅の設定
- 各軸にプロット
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
''' <summary> ''' グラフ出力 ''' </summary> Private Sub OutputChartInspectResult() With Chart1 ' 系列の初期化 .Series.Clear() ' 系列の追加 .Series.Add(Me.lbUpper.Text) ' 上限値 .Series.Add(Me.lbLower.Text) ' 下限値 .Series.Add(Me.lbMeasure.Text) ' 測定値 ' データポイント色の設定 .Series(0).Color = Color.Red ' 上限値の線色 .Series(1).Color = Color.Blue ' 下限値の線色 .Series(2).Color = Color.Green ' 測定値の線色 ' データテーブルの値をグラフにセット For chCnt As Integer = 0 To .Series.Count - 1 .Series(chCnt).ChartType = DataVisualization.Charting.SeriesChartType.Line ' 折れ線グラフを設定 .Series(chCnt).BorderWidth = 2 ' 線の幅を設定 Dim dCnt As Integer If mGraphTable IsNot Nothing Then ' データ変数が空の場合は何もしない For dCnt = 0 To mGraphTable.Rows.Count - 1 With mGraphTable Chart1.Series(chCnt).Points.AddXY(.Rows(dCnt).Item("CNT"), .Rows(dCnt).Item(chCnt + 1)) ' X,Y軸にプロット End With Next dCnt End If Next chCnt End With End Sub |
ChartTypeではグラフのタイプが選択できます。
今回はLineと設定することで、折れ線グラフで表示がされます。
この他にも主なグラフとして、
| No | コード | 詳細 |
|---|---|---|
| 1 | Point | ポイントグラフ |
| 2 | Bar | 横棒グラフ |
| 3 | Column | 縦棒グラフ |
| 4 | Area | 面グラフ |
| 5 | Pie | 円グラフ |
| 6 | Doughnut | ドーナツグラフ |
| 7 | Stock | 株価チャート |
| 8 | Rader | レーダーチャート |
実行編
作成したプログラムを実行していきます。
プログラム起動時
計測開始ボタンを押したとき(1回目)
計測開始ボタン(5回目)
計測開始ボタン(10回目)
計測開始ボタン(60回目)
とそれぞれボタンを押すことで1ポイントずつプロットしているのが確認できました。
まとめ
Chartコントロールの使い方を例を交えて解説していきました。
使い方のポイントとしては、
- Chartコントロールに表示させたいデータの変数を用意
- CHartコントロールの初期化
- チャートエリアの作成
- 軸(X,Y)の設定
- 系列(Series)の初期化・追加
- データポイントの色の設定
- 1のデータをChartにセット
Chartコントロールを使うと、例えばPCと何らかの計測機器を
シリアル通信して、通信が確立された計測機器から受信した値を
リアルタイムにChartに表示させることで計測値の変化や傾向を
視覚化することができるようになります。
与えられたデータの視覚化に悩んでる方の参考になれば嬉しいです。
最後までご覧いただきありがとうございます。
・こちらの書籍を参考にVB.Net勉強しています。
