GrapeCity.devlog

グレープシティ株式会社のDeveloper Tools〈開発支援ツール〉の最新情報をお届けします。製品のTIPSや発売情報、イベントのお知らせなどをいち早く発信中です。

SPREAD for Windows Forms/ASP.NET 10.0Jの新機能紹介(その1)

こんにちは。SPREADチームの林です。 すでにニュースリリースや製品ページをご覧になった方もいらっしゃるかもしれませんが、来たる2017年2月15日に以下2製品の発売を開始します。

  • SPREAD for Windows Form 10.0J
  • SPREAD for ASP.NET 10.0J

新バージョンでは多数の機能が追加されていますが、新機能について紹介していきたいと思います。 今回はその中からチャートコントロールをご紹介します。これまでも製品ではチャート機能を提供していましたが、チャートコントロールはSPREADコントロールと同じように単一のコントロールとなります。つまり、スプレッドシートの外側の好きな場所にコントロールを配置することが可能です。もちろんVisual Studioのツールボックスからドラッグ&ドロップすることもできます。

チャートに値を直接設定することもできますが、SPREADコントロールの値からデータソースを作成しチャートに割り当てる方法もあります。

以下に、ASP.NETでの実行例を紹介します。 WebフォームにSPREADコントロール(FpSpread1)とチャートコントロール(FpChart1)を配置し、次のサンプルコードのように実装します。

Visual Basic

Imports System.Drawing
Imports FarPoint.Web.Chart
Imports FarPoint.Web.Spread.Chart

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

    ' SPREADに表示するデータを設定します。
    FpSpread1.Sheets(0).Cells(1, 0).Value = "前年"
    FpSpread1.Sheets(0).Cells(2, 0).Value = "今年"
    FpSpread1.Sheets(0).Cells(0, 1).Value = "本店"
    FpSpread1.Sheets(0).Cells(0, 2).Value = "駅前支店"
    FpSpread1.Sheets(0).Cells(1, 1).Value = 3000
    FpSpread1.Sheets(0).Cells(2, 1).Value = 2500
    FpSpread1.Sheets(0).Cells(1, 2).Value = 1500
    FpSpread1.Sheets(0).Cells(2, 2).Value = 2200

    ' プロットエリアを初期化してチャートを作成
    Dim plotArea As New YPlotArea()
    Dim cSeries As New ClusteredBarSeries()

    '系列(本店)の作成
    Dim s1 As New BarSeries()
    s1.Values.DataSource = New SeriesDataField(FpSpread1, "DataFieldValue", "Sheet1!B2:B3")
    s1.CategoryNames.DataSource = New SeriesDataField(FpSpread1, "DataFieldCategoryName", "Sheet1!A2:A3", SegmentDataType.Text)
    s1.SeriesNameDataSource = New SeriesDataField(FpSpread1, "DataFieldSeriesName", "Sheet1!B1", SegmentDataType.Text)

    '系列(駅前支店)の作成
    Dim s2 As New BarSeries()
    s2.Values.DataSource = New SeriesDataField(FpSpread1, "DataFieldValue", "Sheet1!C2:C3")
    s2.SeriesNameDataSource = New SeriesDataField(FpSpread1, "DataFieldSeriesName", "Sheet1!C1", SegmentDataType.Text)

    cSeries.Series.Add(s1)
    cSeries.Series.Add(s2)
    plotArea.Series.Add(cSeries)

    ' スタイルの作成
    plotArea.Location = New PointF(0.2F, 0.2F)
    plotArea.Size = New SizeF(0.6F, 0.7F)
    plotArea.XAxis.LabelTextFont = New Font("メイリオ", 9)
    plotArea.YAxes(0).LabelTextFont = New Font("メイリオ", 9)
    Dim model As New ChartModel()
    model.PlotAreas.Add(plotArea)

    ' 凡例の作成
    Dim legend As New LegendArea()
    legend.Location = New PointF(0.8F, 0.5F)
    legend.TextFont = New Font("メイリオ", 9)
    model.LegendAreas.Add(legend)

    ' チャートコントロールにモデルを設定
    FpChart1.Model = model
End Sub

C#

using System.Drawing;
using FarPoint.Web.Chart;
using FarPoint.Web.Spread.Chart;

protected void Page_Load(object sender, EventArgs e)
{
    if (IsPostBack) return;

    // SPREADに表示するデータを設定します。
    FpSpread1.Sheets[0].Cells[1, 0].Value = "前年";
    FpSpread1.Sheets[0].Cells[2, 0].Value = "今年";
    FpSpread1.Sheets[0].Cells[0, 1].Value = "本店";
    FpSpread1.Sheets[0].Cells[0, 2].Value = "駅前支店";
    FpSpread1.Sheets[0].Cells[1, 1].Value = 3000;
    FpSpread1.Sheets[0].Cells[2, 1].Value = 2500;
    FpSpread1.Sheets[0].Cells[1, 2].Value = 1500;
    FpSpread1.Sheets[0].Cells[2, 2].Value = 2200;
    
    // プロットエリアを初期化してチャートを作成
    YPlotArea plotArea = new YPlotArea();
    ClusteredBarSeries cSeries = new ClusteredBarSeries();

    //系列(本店)の作成
    BarSeries s1 = new BarSeries();
    s1.Values.DataSource = new SeriesDataField(FpSpread1, "DataFieldValue", "Sheet1!B2:B3");
    s1.CategoryNames.DataSource = new SeriesDataField(FpSpread1, "DataFieldCategoryName", "Sheet1!A2:A3", SegmentDataType.Text);
    s1.SeriesNameDataSource = new SeriesDataField(FpSpread1, "DataFieldSeriesName", "Sheet1!B1", SegmentDataType.Text);

    //系列(駅前支店)の作成
    BarSeries s2 = new BarSeries();
    s2.Values.DataSource = new SeriesDataField(FpSpread1, "DataFieldValue", "Sheet1!C2:C3");
    s2.SeriesNameDataSource = new SeriesDataField(FpSpread1, "DataFieldSeriesName", "Sheet1!C1", SegmentDataType.Text);

    cSeries.Series.Add(s1);
    cSeries.Series.Add(s2);
    plotArea.Series.Add(cSeries);

    // スタイルの作成
    plotArea.Location = new PointF(0.2f, 0.2f);
    plotArea.Size = new SizeF(0.6f, 0.7f);
    plotArea.XAxis.LabelTextFont = new Font("メイリオ", 9);
    plotArea.YAxes[0].LabelTextFont = new Font("メイリオ", 9);
    ChartModel model = new ChartModel();
    model.PlotAreas.Add(plotArea);

    // 凡例の作成
    LegendArea legend = new LegendArea();
    legend.Location = new PointF(0.8f, 0.5f);
    legend.TextFont = new Font("メイリオ", 9);
    model.LegendAreas.Add(legend);

    // チャートコントロールにモデルを設定
    FpChart1.Model = model;
}

チャートの実行結果がこちら。これだけのシンプルなコードでデザイン性に優れたチャートを表現できます。

10JChart

製品発売日の2月15日には、トライアル版の公開を予定しています。ぜひ、トライアル版をダウンロードして新しいチャートコントロール、そして新しい製品をお試しください!同日にはオンラインデモも公開しますよ!