Shoeisha Technology Media

CodeZine(コードジン)

特集ページ一覧

「SPREAD for ASP.NET 10.0J」の新機能~新しいチャートの提供と画像機能の強化

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

新しいコントロール/エクステンダ

 本バージョンでは新たにチャートコントロールが追加され、シート+チャートというベーシックな業務アプリケーションをSPREADのみで実現できるようになりました。また、数式エクステンダにより、SPREADが備える豊富な種類の数式による計算をアプリケーション全体に適用できます。

チャートコントロール

 これまでSPREADシート内でしか利用できなかったチャートを、チャートコントロールという独立したコントロールとして使用することが可能です。シートに設定されたデータを可視化する際のチャートとして、またチャートのみをWebフォーム上に配置することもできます。

 ここでは、年間の気温と降水量を示すデータをグラフ化したチャートコントロールを配置する例を紹介します。

VB.NET
    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        If IsPostBack Then Return

        FpSpread1.ActiveSheetView.RowHeader.Visible = False
        FpSpread1.ActiveSheetView.Columns(1).Width = 150
        FpSpread1.ActiveSheetView.Columns(2).Width = 150

        '------------------------------------------------------
        ' データソースの設定とシートへの連結
        '------------------------------------------------------
        Dim table As New System.Data.DataTable()
        table.Columns.Add("月", Type.GetType("System.String"))
        table.Columns.Add("気温(℃)", Type.GetType("System.Double"))
        table.Columns.Add("降水量(mm)", Type.GetType("System.Double"))
        table.Rows.Add(New Object() {"1月", 0.9, 39.4})
        table.Rows.Add(New Object() {"2月", 1.3, 43.1})
        table.Rows.Add(New Object() {"3月", 4.2, 67.9})
        table.Rows.Add(New Object() {"4月", 9.8, 95.1})
        table.Rows.Add(New Object() {"5月", 14.7, 107.3})
        table.Rows.Add(New Object() {"6月", 18.3, 144.1})
        table.Rows.Add(New Object() {"7月", 22.3, 163.2})
        table.Rows.Add(New Object() {"8月", 24.1, 150.3})
        table.Rows.Add(New Object() {"9月", 20.3, 189.6})
        table.Rows.Add(New Object() {"10月", 14.5, 123.6})
        table.Rows.Add(New Object() {"11月", 8.8, 66.1})
        table.Rows.Add(New Object() {"12月", 3.7, 44.2})
        FpSpread1.DataSource = table

        '------------------------------------------------------
        ' チャートコントロールの設定
        '------------------------------------------------------

        ' シリーズの設定
        Dim series1 As New FarPoint.Web.Chart.LineSeries()
        series1.Values.DataSource = table
        series1.Values.DataField = "気温(℃)"
        series1.CategoryNames.DataSource = table
        series1.CategoryNames.DataField = "月"
        series1.YAxisId = 0
        Dim series2 As New FarPoint.Web.Chart.BarSeries()
        series2.Values.DataSource = table
        series2.Values.DataField = "降水量(mm)"
        series2.CategoryNames.DataSource = table
        series2.CategoryNames.DataField = "月"
        series2.YAxisId = 1

        ' 軸の設定
        Dim y1 As New FarPoint.Web.Chart.ValueAxis()
        y1.AxisId = 0
        y1.Location = FarPoint.Web.Chart.AxisLocation.Near
        y1.AutoMinimum = False
        y1.Minimum = -10
        y1.LabelTextFont = New Drawing.Font("メイリオ", 8)
        Dim y2 As New FarPoint.Web.Chart.ValueAxis()
        y2.AxisId = 1
        y2.Location = FarPoint.Web.Chart.AxisLocation.Far
        y2.AutoMaximum = False
        y2.Maximum = 350
        y2.MajorGridVisible = False
        y2.LabelTextFont = New Drawing.Font("メイリオ", 8)

        ' プロットエリアの設定
        Dim plotArea As New FarPoint.Web.Chart.YPlotArea()
        plotArea.Location = New System.Drawing.PointF(0.1F, 0.1F)
        plotArea.Size = New System.Drawing.SizeF(0.83F, 0.77F)
        plotArea.Series.Add(series1)
        plotArea.Series.Add(series2)
        plotArea.XAxis.LabelTextFont = New Drawing.Font("メイリオ", 8)
        plotArea.YAxes.Clear()
        plotArea.YAxes.AddRange(New FarPoint.Web.Chart.ValueAxis() {y1, y2})

        ' ラベルの設定
        Dim label As New FarPoint.Web.Chart.LabelArea()
        label.Text = "気温(℃)と降水量(mm)"
        label.Location = New System.Drawing.PointF(0.5F, 0.02F)
        label.AlignmentX = 0.5F
        label.AlignmentY = 0.0F
        label.TextFont = New Drawing.Font("メイリオ", 14)

        ' モデルへの追加
        Dim model As New FarPoint.Web.Chart.ChartModel()
        model.LabelAreas.Add(label)
        model.PlotAreas.Add(plotArea)
        FpChart1.Model = model
    End Sub
C#
protected void Page_Load(object sender, EventArgs e)
{
    if (IsPostBack) return;

    FpSpread1.ActiveSheetView.RowHeader.Visible = false;
    FpSpread1.ActiveSheetView.Columns[1].Width = 150;
    FpSpread1.ActiveSheetView.Columns[2].Width = 150;

    //------------------------------------------------------
    // データソースの設定とシートへの連結
    //------------------------------------------------------
    System.Data.DataTable table = new System.Data.DataTable();
    table.Columns.Add("月", Type.GetType("System.String"));
    table.Columns.Add("気温(℃)", Type.GetType("System.Double"));
    table.Columns.Add("降水量(mm)", Type.GetType("System.Double"));
    table.Rows.Add(new object[] {"1月",0.9,39.4});
    table.Rows.Add(new object[] {"2月",1.3,43.1});
    table.Rows.Add(new object[] {"3月",4.2,67.9});
    table.Rows.Add(new object[] {"4月",9.8,95.1});
    table.Rows.Add(new object[] {"5月",14.7,107.3});
    table.Rows.Add(new object[] {"6月",18.3,144.1});
    table.Rows.Add(new object[] {"7月",22.3,163.2});
    table.Rows.Add(new object[] {"8月",24.1,150.3});
    table.Rows.Add(new object[] {"9月",20.3,189.6});
    table.Rows.Add(new object[] {"10月",14.5,123.6});
    table.Rows.Add(new object[] {"11月",8.8,66.1});
    table.Rows.Add(new object[] {"12月",3.7,44.2});
    FpSpread1.DataSource = table;

    //------------------------------------------------------
    // チャートコントロールの設定
    //------------------------------------------------------

    // シリーズの設定
    FarPoint.Web.Chart.LineSeries series1 = new FarPoint.Web.Chart.LineSeries();
    series1.Values.DataSource = table;
    series1.Values.DataField = "気温(℃)";
    series1.CategoryNames.DataSource = table;
    series1.CategoryNames.DataField = "月";
    series1.YAxisId = 0;
    FarPoint.Web.Chart.BarSeries series2 = new FarPoint.Web.Chart.BarSeries();
    series2.Values.DataSource = table;
    series2.Values.DataField = "降水量(mm)";
    series2.CategoryNames.DataSource = table;
    series2.CategoryNames.DataField = "月";
    series2.YAxisId = 1;

    // 軸の設定
    FarPoint.Web.Chart.ValueAxis y1 = new FarPoint.Web.Chart.ValueAxis();
    y1.AxisId = 0;
    y1.Location = FarPoint.Web.Chart.AxisLocation.Near;
    y1.AutoMinimum = false;
    y1.Minimum = -10;
    y1.LabelTextFont = new System.Drawing.Font("メイリオ", 8);
    FarPoint.Web.Chart.ValueAxis y2 = new FarPoint.Web.Chart.ValueAxis();
    y2.AxisId = 1;
    y2.Location = FarPoint.Web.Chart.AxisLocation.Far;
    y2.AutoMaximum = false;
    y2.Maximum = 350;
    y2.MajorGridVisible = false;
    y2.LabelTextFont = new System.Drawing.Font("メイリオ", 8);

    // プロットエリアの設定
    FarPoint.Web.Chart.YPlotArea plotArea = new FarPoint.Web.Chart.YPlotArea();
    plotArea.Location = new System.Drawing.PointF(0.1f, 0.1f);
    plotArea.Size = new System.Drawing.SizeF(0.83f, 0.77f);
    plotArea.Series.Add(series1);
    plotArea.Series.Add(series2);
    plotArea.XAxis.LabelTextFont = new System.Drawing.Font("メイリオ", 8);
    plotArea.YAxes.Clear();
    plotArea.YAxes.AddRange(new FarPoint.Web.Chart.ValueAxis[] {y1,y2});

    // ラベルの設定
    FarPoint.Web.Chart.LabelArea label = new FarPoint.Web.Chart.LabelArea();
    label.Text = "気温(℃)と降水量(mm)";
    label.Location = new System.Drawing.PointF(0.5f, 0.02f);
    label.AlignmentX = 0.5f;
    label.AlignmentY = 0f;
    label.TextFont = new System.Drawing.Font("メイリオ", 14);

    // モデルへの追加
    FarPoint.Web.Chart.ChartModel model = new FarPoint.Web.Chart.ChartModel();
    model.LabelAreas.Add(label);
    model.PlotAreas.Add(plotArea);
    FpChart1.Model = model;
}

 実行すると次のようになります。

チャートコントロール
チャートコントロール

 チャートコントロールは独立したコントロールとなるため、シートの値を更新しても自動的には値が反映されません。ボタンクリックなどによるポストバックの際に明示的に値を更新する必要があります。チャートコントロールの詳細は製品ヘルプの「チャートコントロールの作成」でも解説しています。

数式エクステンダ

 SPREADコントロール内で使用できる豊富な表計算関数は、Excelライクなアプリケーションを作成するためには欠かせない機能ですが、それらの関数をコントロールの外でも使用できるようになりました。

 数式エクステンダをWebフォームに配置した後、数式エクステンダのスマートタグにある「数式の編集...」からコレクションエディターを起動させます。

数式エクステンダのスマートタグ
数式エクステンダのスマートタグ

 コレクションエディターではページ上にある各コントロールに設定する関数を管理することができます。ここではWebフォーム上に2つのラベルコントロールを配置しており、追加ボタンを押下後にコントロールのID(ControlID)と関数(Formula)をそれぞれ設定しています。デザイン画面で数式を設定すればVBやC#で計算ロジックを書くことなく計算結果を得られるようになります。

数式エクステンダのコレクションエディター
数式エクステンダのコレクションエディター

 次のサンプルコードではSPREADコントロール内でも数式による計算を行っており、B列とC列を掛けた値をD列に設定しています。

VB.NET
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
    If IsPostBack Then Return

    ' シートとセル型の設定
    FpSpread1.ActiveSheetView.RowCount = 4
    FpSpread1.ActiveSheetView.Columns(1, 3).CellType = New FarPoint.Web.Spread.IntegerCellType()

    ' シート内の値の設定
    FpSpread1.ActiveSheetView.SetValue(0, 0, "製品A")
    FpSpread1.ActiveSheetView.SetValue(1, 0, "製品B")
    FpSpread1.ActiveSheetView.SetValue(2, 0, "製品C")
    FpSpread1.ActiveSheetView.SetValue(3, 0, "製品D")
    FpSpread1.ActiveSheetView.SetValue(0, 1, 5)
    FpSpread1.ActiveSheetView.SetValue(1, 1, 2)
    FpSpread1.ActiveSheetView.SetValue(2, 1, 1)
    FpSpread1.ActiveSheetView.SetValue(3, 1, 3)
    FpSpread1.ActiveSheetView.SetValue(0, 2, 500)
    FpSpread1.ActiveSheetView.SetValue(1, 2, 300)
    FpSpread1.ActiveSheetView.SetValue(2, 2, 50)
    FpSpread1.ActiveSheetView.SetValue(3, 2, 100)

    ' シート内の関数の設定
    FpSpread1.ActiveSheetView.ReferenceStyle = FarPoint.Web.Spread.Model.ReferenceStyle.R1C1
    FpSpread1.ActiveSheetView.Columns(3).Formula = "RC[-2]*RC[-1]"
End Sub
C#
protected void Page_Load(object sender, EventArgs e)
{
    if (IsPostBack) return;

    // シートとセル型の設定
    FpSpread1.ActiveSheetView.RowCount = 4;
    FpSpread1.ActiveSheetView.Columns[1, 3].CellType = new FarPoint.Web.Spread.IntegerCellType();

    // シート内の値の設定
    FpSpread1.ActiveSheetView.SetValue(0, 0, "製品A");
    FpSpread1.ActiveSheetView.SetValue(1, 0, "製品B");
    FpSpread1.ActiveSheetView.SetValue(2, 0, "製品C");
    FpSpread1.ActiveSheetView.SetValue(3, 0, "製品D");
    FpSpread1.ActiveSheetView.SetValue(0, 1, 5);
    FpSpread1.ActiveSheetView.SetValue(1, 1, 2);
    FpSpread1.ActiveSheetView.SetValue(2, 1, 1);
    FpSpread1.ActiveSheetView.SetValue(3, 1, 3);
    FpSpread1.ActiveSheetView.SetValue(0, 2, 500);
    FpSpread1.ActiveSheetView.SetValue(1, 2, 300);
    FpSpread1.ActiveSheetView.SetValue(2, 2, 50);
    FpSpread1.ActiveSheetView.SetValue(3, 2, 100);

    // シート内の関数の設定
    FpSpread1.ActiveSheetView.ReferenceStyle = FarPoint.Web.Spread.Model.ReferenceStyle.R1C1;
    FpSpread1.ActiveSheetView.Columns[3].Formula = "RC[-2]*RC[-1]";
}
数式エクステンダによる実行結果
数式エクステンダによる実行結果

 このサンプルコードはあくまでSPREAD内の値と数式の設定のみを行なっており、標準のラベルコントロールの結果はコレクションエディターにある数式により算出されています。数式エクステンダについては製品ヘルプの「数式エクステンダの使用」でも解説されています。


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

著者プロフィール

バックナンバー

連載:現役エンジニア直伝! 「現場」で使えるコンポーネント活用術(SPREAD)

もっと読む

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