CodeZine(コードジン)

特集ページ一覧

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

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

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

C1ScatterChartコントロールの作成

 続いて、C1ScatterChartコントロールをページにドラッグアンドドロップして作成しましょう。C1ScatterChartコントロールの設定はデフォルトのままで、あとはコードでデータ設定やラベルの作成を行います。

 (1)コードウィンドウを開き、最初に「C1.Web.Wijmo.Controls.C1Chart」名前空間への参照を設定してください。次に、独自のメソッド(VBはSubプロシージャ)「setupchart」を作成します。

 (2)C1ScatterChartコントロールにグリッドのデータを設定するには、データ系列用の配列を作成し、これをScatterChartSeriesオブジェクトに設定します。

 まず、Double型の配列を用意します。要素数はグリッドの行数を使います。これは、C1GridViewコントロールのRowsコレクションのCountプロパティから取得します。ただし、Visual Basicの場合のみ、Countプロパティの値から1を差し引いた値を配列の要素数にします。

Visual Basic
Imports C1.Web.Wijmo.Controls.C1Chart

Public Class _Default
    Inherits System.Web.UI.Page

    Private Sub setupchart()
        Dim i As Integer
        Dim cnt As Integer = C1GridView1.Rows.Count - 1
        Dim H221(cnt) As Double
        Dim H222(cnt) As Double
        Dim H231(cnt) As Double
        Dim H232(cnt) As Double
C#
using C1.Web.Wijmo.Controls.C1Chart;

namespace scatterchart_ASP_cs
{
    public partial class _Default : System.Web.UI.Page
    {
        private void setupchart()
        {
            int i;
            int cnt = C1GridView1.Rows.Count;
            double[] H221 = new double[cnt];
            double[] H222 = new double[cnt];
            double[] H231 = new double[cnt];
            double[] H232 = new double[cnt];

 (3)作成した配列にグリッドデータを転送していきます。まずは、平成22年度分のデータ12行を取り出して、2つの配列に格納します。列「運航時間」はC1GridViewコントロールの「Rows(i).Cells(1).Text」で、「旅客数」は「Rows[i].Cells[2].Text」という式でデータにアクセスできます。ただし、Textプロパティの値は文字列なので、Convertクラスを使用してDoubleに変換します。

Visual Basic
'平成22年系列一覧
For i = 0 To cnt
    H221(i) = Convert.ToDouble(C1GridView1.Rows(i).Cells(1).Text)
Next
For i = 0 To cnt
    H222(i) = Convert.ToDouble(C1GridView1.Rows(i).Cells(2).Text)
Next
C#
// 平成22年系列一覧
for (i = 0; i < cnt; i++)
{
    H221[i] = Convert.ToDouble(C1GridView1.Rows[i].Cells[1].Text);
}
for (i = 0; i < cnt; i++)
{
    H222[i] = Convert.ToDouble(C1GridView1.Rows[i].Cells[2].Text);
}

 (4)作成した配列をC1ScatterChartコントロールに設定します。まずは、ScatterChartSeriesクラスのインスタンスを作成し、それをSeriesListプロパティに追加しましょう。

 次に、作成した配列をXY軸のDataオブジェクトにAddRangeメソッドで組み込みます。X軸には列「旅客数」のデータを、Y軸には列「運航回数」のデータを設定します。これで、グリッドのデータをグラフ化することができます。

Visual Basic
Dim series1 = New ScatterChartSeries()
    C1ScatterChart1.SeriesList.Add(series1)
    series1.Data.X.AddRange(H221)
    series1.Data.Y.AddRange(H222)
C#
var series1 = new ScatterChartSeries();
    this.C1ScatterChart1.SeriesList.Add(series1);
    series1.Data.X.AddRange(H221);
    series1.Data.Y.AddRange(H222);

 (5)作成したグラフの凡例ラベルに、グリッドの列見出しを設定します。凡例はX軸のデータなので、グリッドの列「旅客数」の列見出しを設定してください。列見出しはHeaderTextプロパティから取得します。

 そして、凡例を自動的に生成するかどうかを決めるLegendEntryプロパティをTrueにし、凡例を自動作成します。

 また、データ点の形状を決める「MarkerType」プロパティに値「MarkerType.Circle」を設定し、円形のポイント形状にします。

 なお、データ点の形状には以下の値を使うことができます。

メンバ名 説明
Tri 塗りつぶした三角形で表したデータポイント。
InvertedTri 塗りつぶした逆三角形で表したデータポイント。
Box 塗りつぶした四角形で表したデータポイント。
Diamond 塗りつぶしたひし形で表したデータポイント。
Cross 十字線で表したデータポイント。
Circle 中抜きの円で表したデータポイント。
Visual Basic
series1.Label = C1GridView1.Columns(0).HeaderText
    series1.LegendEntry = True
    series1.MarkerType = MarkerType.Circle
C#
series1.Label = C1GridView1.Columns[0].HeaderText;
        series1.LegendEntry = true;
        series1.MarkerType = MarkerType.Circle;

  • 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