CodeZine(コードジン)

特集ページ一覧

グリッドデータを散布図で表示する ASP.NET アプリケーションの作成

C1ScatterChartコントロールを使ったWebアプリケーションの作成

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2013/06/20 14:00
目次

 (6)同様に、平成23年のデータ系列を作成します。このデータは、グリッドの4番目と5番目の列なので、「Rows(i).Cells(4).Text)」「Rows(i).Cells(5).Text)」という式でアクセスできます。

Visual Basic
' 平成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
C#
// 平成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プロパティにラベル用の文字列をグリッドのヘッダーから取得し設定します。

Visual Basic
' ラベルの作成
C1ScatterChart1.Axis.X.Text = C1GridView1.Columns(1).HeaderText
C1ScatterChart1.Axis.Y.Text = C1GridView1.Columns(2).HeaderText
C#
// ラベルの作成
C1ScatterChart1.Axis.X.Text = C1GridView1.Columns[1].HeaderText;
C1ScatterChart1.Axis.Y.Text = C1GridView1.Columns[2].HeaderText;

 (8)最後に、作成したメソッド(プロシージャ)を、Page_Loadイベントハンドラでポストバックされないときに呼び出すようにします。

 以上で完成です。それでは、アプリケーションを実行してみましょう。

 平成22年と23年のデータが円形で色別に表示されています。データ点にマウスポインタを重ねるとデータ点が大きくなるアニメーションが実行されます。

Visual Basic
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
C#
protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        setupchart();
    }
}
アプリケーション実行画面
アプリケーション実行画面

まとめ

 グラフコントロールは、単独で使うというよりもアプリケーションの機能の一部として使われることが多いコントロールです。

 C1ScatterChartコントロールも、Webを使ったデータ解析アプリケーションの機能の一つとして使うことができます。データ系列の設定に関しても、特に難しい部分はないので、グリッドコントロールと組み合わせることによって、データ入力とグラフ化を一度に行うことが可能です。



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

バックナンバー

連載:ComponentZine(ComponentOne)

もっと読む

著者プロフィール

  • 瀬戸 遥(セト ハルカ)

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

あなたにオススメ

All contents copyright © 2005-2022 Shoeisha Co., Ltd. All rights reserved. ver.1.5