SHOEISHA iD

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

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

ComponentZine(ComponentOne)

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

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

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

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

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

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

もっと読む

この記事の著者

瀬戸 遥(セト ハルカ)

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

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

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

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/7211 2013/06/20 14:00

おすすめ

アクセスランキング

アクセスランキング

イベント

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

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

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

メールバックナンバー

アクセスランキング

アクセスランキング