(6)同様に、平成23年のデータ系列を作成します。このデータは、グリッドの4番目と5番目の列なので、「Rows(i).Cells(4).Text)」「Rows(i).Cells(5).Text)」という式でアクセスできます。
' 平成23年系列一覧 For i = 0 To cnt H231(i) = Convert.ToDouble(C1GridView1.Rows(i).Cells(4).Text) Next For i = 0 To cnt H232(i) = Convert.ToDouble(C1GridView1.Rows(i).Cells(5).Text) Next Dim series2 = New ScatterChartSeries() C1ScatterChart1.SeriesList.Add(series2) series2.MarkerType = MarkerType.Circle series2.Data.X.AddRange(H231) series2.Data.Y.AddRange(H232) series2.Label = C1GridView1.Columns(3).HeaderText series2.LegendEntry = True
// 平成23年系列一覧 for (i = 0; i < cnt; i++) { H231[i] = Convert.ToDouble(C1GridView1.Rows[i].Cells[4].Text); } for (i = 0; i < cnt; i++) { H232[i] = Convert.ToDouble(C1GridView1.Rows[i].Cells[5].Text); } var series2 = new ScatterChartSeries(); this.C1ScatterChart1.SeriesList.Add(series2); series2.MarkerType = MarkerType.Circle; series2.Data.X.AddRange(H231); series2.Data.Y.AddRange(H232); series2.Label = C1GridView1.Columns[3].HeaderText; series2.LegendEntry = true;
(7)続いて、軸ラベルを作成です。これは、AxisオブジェクトのXY軸それぞれのTextプロパティにラベル用の文字列をグリッドのヘッダーから取得し設定します。
' ラベルの作成 C1ScatterChart1.Axis.X.Text = C1GridView1.Columns(1).HeaderText C1ScatterChart1.Axis.Y.Text = C1GridView1.Columns(2).HeaderText
// ラベルの作成 C1ScatterChart1.Axis.X.Text = C1GridView1.Columns[1].HeaderText; C1ScatterChart1.Axis.Y.Text = C1GridView1.Columns[2].HeaderText;
(8)最後に、作成したメソッド(プロシージャ)を、Page_Loadイベントハンドラでポストバックされないときに呼び出すようにします。
以上で完成です。それでは、アプリケーションを実行してみましょう。
平成22年と23年のデータが円形で色別に表示されています。データ点にマウスポインタを重ねるとデータ点が大きくなるアニメーションが実行されます。
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load If Not IsPostBack Then setupchart() End If End Sub
protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) { setupchart(); } }
まとめ
グラフコントロールは、単独で使うというよりもアプリケーションの機能の一部として使われることが多いコントロールです。
C1ScatterChartコントロールも、Webを使ったデータ解析アプリケーションの機能の一つとして使うことができます。データ系列の設定に関しても、特に難しい部分はないので、グリッドコントロールと組み合わせることによって、データ入力とグラフ化を一度に行うことが可能です。