ASP.NET Web Forms/SPREAD/Windows Forms

SPREAD for Windows Forms／ASP.NET 10.0Jの新機能紹介（その１）

by MESCIUS-dev

こんにちは。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日には、トライアル版の公開を予定しています。ぜひ、トライアル版をダウンロードして新しいチャートコントロール、そして新しい製品をお試しください！同日にはオンラインデモも公開しますよ！

＼  この記事をシェアする  ／