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

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

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;