現役エンジニア直伝！「現場」で使えるコンポーネント活用術（SPREAD）（AD）

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

2017/06/06 14:00

ポスト

　SPREAD for ASP.NETの最初のバージョンが発売されたのは2003年、SPREAD for .NET Web Forms Editionという製品名でした。当時、インターネットがこれから身近になっていくだろうという社会に先駆けて、WebベースのアプリケーションをこれまでのSPREAD製品と同じように簡単に使いやすく開発できるというコンセプトのもとで企画が行われてきました。その後、Windows Forms版、WPF版、またJavaScriptライブラリといった4つのラインナップを揃え、SPREADシリーズの累計販売ライセンスは140,000本を超えています。

ポスト

準備

　本記事で紹介するサンプルを実行するには、Visual Studio 2013／2015／2017およびSPREAD for ASP.NET 10.0Jの製品版またはトライアル版のインストールが必要です。トライアル版はこちらからダウンロードしていただけます。

　インストール後、Visual Studioのツールボックスにコントロールを追加する方法については、製品ヘルプで詳しく解説していますので、そちらをご覧ください。

最新のExcel 2016への対応

　SPREADの大きな特長はExcelライクなアプリケーションを作成できることですが、それに加えて強力なExcel形式ファイルのインポート／エクスポート機能を備えています。本バージョンではExcel 2016へ対応し、最新のExcelとアプリケーションのシームレスな相互運用を可能にします。

7種類の新しいチャート

　SPREADにチャート機能が追加されたのは2010年にリリースされた5.0Jからです。12分類の基本チャート（縦棒、折れ線、円、横棒、面、散布図、バブル、株価、XYZ散布図、ドーナツ、レーダー、ポーラ）をベースに計85種類ものチャートを提供してきました。そして10.0Jで新たにツリーマップ、サンバースト、ヒストグラム、パレート図、箱ひげ図、ウォーターフォール、じょうごの7種類のチャートを表現可能できるようになっています。

　SPREADに新しいチャートを設定する方法は、これまでのチャートの使用方法と大きく変わりません。対象とするデータのセル範囲、追加するチャートの種類、チャートの幅や高さといったパラメータを引数としてAddChartメソッドを呼び出します。AddChartメソッドは複数のオーバーロードが用意されていますので、アプリケーションで使用しやすいものを選択ください。

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 = 25
    FpSpread1.ActiveSheetView.ColumnCount = 15
    FpSpread1.ActiveSheetView.PageSize = 25

    Dim sv As FarPoint.Web.Spread.SheetView
    sv = FpSpread1.ActiveSheetView
    sv.SetClipValue(0, 0, 1, 4, "地域" & vbTab & "都道府県" & vbTab & "市町村" & vbTab & "販売")
    sv.SetClipValue(1, 0, 1, 4, "東北" & vbTab & "岩手" & vbTab & vbTab & "1.7")
    sv.SetClipValue(2, 0, 1, 4, vbTab & "宮城" & vbTab & "仙台" & vbTab & "2.0")
    sv.SetClipValue(3, 0, 1, 4, vbTab & vbTab & "大和" & vbTab & "1.0")
    sv.SetClipValue(4, 0, 1, 4, vbTab & vbTab & "富谷" & vbTab & "1.0")
    sv.SetClipValue(5, 0, 1, 4, vbTab & vbTab & "名取" & vbTab & "1.5")
    sv.SetClipValue(6, 0, 1, 4, vbTab & "福島" & vbTab & vbTab & "3.0")
    sv.SetClipValue(7, 0, 1, 4, "関東" & vbTab & "東京" & vbTab & vbTab & "1.1")
    sv.SetClipValue(8, 0, 1, 4, vbTab & "千葉" & vbTab & vbTab & "2.8")
    sv.SetClipValue(9, 0, 1, 4, vbTab & "埼玉" & vbTab & vbTab & "1.3")
    sv.SetClipValue(10, 0, 1, 4, "近畿" & vbTab & "大阪" & vbTab & vbTab & "1.7")
    sv.SetClipValue(11, 0, 1, 4, vbTab & "京都" & vbTab & vbTab & "1.6")
    sv.SetClipValue(12, 0, 1, 4, vbTab & "奈良" & vbTab & vbTab & "2.1")
    sv.SetClipValue(13, 0, 1, 4, "四国" & vbTab & "徳島" & vbTab & vbTab & "1.4")
    sv.SetClipValue(14, 0, 1, 4, vbTab & "香川" & vbTab & vbTab & "2.0")
    sv.SetClipValue(15, 0, 1, 4, vbTab & "愛媛" & vbTab & "松山" & vbTab & "3.0")

    '------------------------------------------------------
    ' チャート設定（SPREADへのチャート追加）
    '------------------------------------------------------
    Dim targetRange As New FarPoint.Web.Spread.Model.CellRange(0, 0, 16, 4)
    FpSpread1.Sheets(0).AddChart(targetRange, GetType(FarPoint.Web.Chart.SunburstSeries), 400, 400, 400, 20)
    Dim sunseries As FarPoint.Web.Chart.SunburstSeries = DirectCast(FpSpread1.Sheets(0).Charts(0).Model.PlotAreas(0).Series(0), FarPoint.Web.Chart.SunburstSeries)
    sunseries.Fills.AddRange(New FarPoint.Web.Chart.Fill() {New FarPoint.Web.Chart.SolidFill(ColorTranslator.FromHtml("#2b80d5")), New FarPoint.Web.Chart.SolidFill(ColorTranslator.FromHtml("#4e95dc")), New FarPoint.Web.Chart.SolidFill(ColorTranslator.FromHtml("#72aae2")), New FarPoint.Web.Chart.SolidFill(ColorTranslator.FromHtml("#95bfea")), New FarPoint.Web.Chart.SolidFill(ColorTranslator.FromHtml("#b8d5f1"))})

    '------------------------------------------------------
    ' フォント設定
    '------------------------------------------------------
    Dim fontBase As New Font("メイリオ", 10)
    Dim fontTitle As New Font("メイリオ", 14)

    ' シートのフォント設定
    FpSpread1.Sheets(0).DefaultStyle.Font.Name = "メイリオ"
    ' データバーにあるラベルのフォント設定
    sunseries.LabelTextFont = fontBase
    ' グラフタイトルのフォント
    FpSpread1.Sheets(0).Charts(0).Model.LabelAreas(0).TextFont = fontTitle
    ' 凡例のフォント
    FpSpread1.Sheets(0).Charts(0).Model.LegendAreas(0).TextFont = fontBase
End Sub

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

    //------------------------------------------------------
    // チャートデータ設定
    //------------------------------------------------------
    FpSpread1.ActiveSheetView.RowCount = 25;
    FpSpread1.ActiveSheetView.ColumnCount = 15;
    FpSpread1.ActiveSheetView.PageSize = 25;

    FarPoint.Web.Spread.SheetView sv = default(FarPoint.Web.Spread.SheetView);
    sv = FpSpread1.ActiveSheetView;
    sv.SetClipValue(0, 0, 1, 4, "地域" + "\t" + "都道府県" + "\t" + "市町村" + "\t" + "販売");
    sv.SetClipValue(1, 0, 1, 4, "東北" + "\t" + "岩手" + "\t" + "\t" + "1.7");
    sv.SetClipValue(2, 0, 1, 4, "\t" + "宮城" + "\t" + "仙台" + "\t" + "2.0");
    sv.SetClipValue(3, 0, 1, 4, "\t" + "\t" + "大和" + "\t" + "1.0");
    sv.SetClipValue(4, 0, 1, 4, "\t" + "\t" + "富谷" + "\t" + "1.0");
    sv.SetClipValue(5, 0, 1, 4, "\t" + "\t" + "名取" + "\t" + "1.5");
    sv.SetClipValue(6, 0, 1, 4, "\t" + "福島" + "\t" + "\t" + "3.0");
    sv.SetClipValue(7, 0, 1, 4, "関東" + "\t" + "東京" + "\t" + "\t" + "1.1");
    sv.SetClipValue(8, 0, 1, 4, "\t" + "千葉" + "\t" + "\t" + "2.8");
    sv.SetClipValue(9, 0, 1, 4, "\t" + "埼玉" + "\t" + "\t" + "1.3");
    sv.SetClipValue(10, 0, 1, 4, "近畿" + "\t" + "大阪" + "\t" + "\t" + "1.7");
    sv.SetClipValue(11, 0, 1, 4, "\t" + "京都" + "\t" + "\t" + "1.6");
    sv.SetClipValue(12, 0, 1, 4, "\t" + "奈良" + "\t" + "\t" + "2.1");
    sv.SetClipValue(13, 0, 1, 4, "四国" + "\t" + "徳島" + "\t" + "\t" + "1.4");
    sv.SetClipValue(14, 0, 1, 4, "\t" + "香川" + "\t" + "\t" + "2.0");
    sv.SetClipValue(15, 0, 1, 4, "\t" + "愛媛" + "\t" + "松山" + "\t" + "3.0");

    //------------------------------------------------------
    // チャート設定（SPREADへのチャート追加）
    //------------------------------------------------------
    FarPoint.Web.Spread.Model.CellRange targetRange = new FarPoint.Web.Spread.Model.CellRange(0, 0, 16, 4);
    FpSpread1.Sheets[0].AddChart(targetRange, typeof(FarPoint.Web.Chart.SunburstSeries), 400, 400, 400, 20);
    FarPoint.Web.Chart.SunburstSeries sunseries = (FarPoint.Web.Chart.SunburstSeries)FpSpread1.Sheets[0].Charts[0].Model.PlotAreas[0].Series[0];
    sunseries.Fills.AddRange(new FarPoint.Web.Chart.Fill[] {new FarPoint.Web.Chart.SolidFill(ColorTranslator.FromHtml("#2b80d5")), new FarPoint.Web.Chart.SolidFill(ColorTranslator.FromHtml("#4e95dc")), new FarPoint.Web.Chart.SolidFill(ColorTranslator.FromHtml("#72aae2")), new FarPoint.Web.Chart.SolidFill(ColorTranslator.FromHtml("#95bfea")), new FarPoint.Web.Chart.SolidFill(ColorTranslator.FromHtml("#b8d5f1"))});

    //------------------------------------------------------
    // フォント設定
    //------------------------------------------------------
    Font fontBase = new Font("メイリオ", 10);
    Font fontTitle = new Font("メイリオ", 14);

    // シートのフォント設定
    FpSpread1.Sheets[0].DefaultStyle.Font.Name = "メイリオ";
    // データバーにあるラベルのフォント設定
    sunseries.LabelTextFont = fontBase;
    // グラフタイトルのフォント
    FpSpread1.Sheets[0].Charts[0].Model.LabelAreas[0].TextFont = fontTitle;
    // 凡例のフォント
    FpSpread1.Sheets[0].Charts[0].Model.LegendAreas[0].TextFont = fontBase;
}

　実行すると次のような結果が得られます。

Excel 2016スタイルのUI

　Excel 2016ではUIのテーマを選択する機能が提供されていますが、SPREADの外観を定義するスキンに「デフォルト」「カラフル」「濃い灰色」のスタイルを追加しました。また、コマンドバーにもExcelのスタイルを適用することが可能です。以下のサンプルでは「濃い灰色」のスタイルと新しいコマンドバーのテーマを適用しました。

VB.NET

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
    ' SPREADのスキンに「濃い灰色」とコマンドバーに「Office 2016テーマ」を設定
    FpSpread1.ActiveSheetView.ActiveSkin = FarPoint.Web.Spread.DefaultSkins.Office2016DarkGray
    FpSpread1.CommandBar.Theme = FarPoint.Web.Spread.ImageButtonTheme.Office2016
End Sub

protected void Page_Load(object sender, EventArgs e)
{
    // SPREADのスキンに「濃い灰色」とコマンドバーに「Office 2016テーマ」を設定
    FpSpread1.ActiveSheetView.ActiveSkin = FarPoint.Web.Spread.DefaultSkins.Office2016DarkGray;
    FpSpread1.CommandBar.Theme = FarPoint.Web.Spread.ImageButtonTheme.Office2016;
}

　スキンやコマンドバーについては、製品ヘルプの「シートスキン」および「コマンドバーの概要」で詳しく解説しています。

次のページ
新しいコントロール／エクステンダ

この記事は参考になりましたか？

印刷用を表示

ポスト

現役エンジニア直伝！「現場」で使えるコンポーネント活用術（SPREAD）連載記事一覧: 2022年版実践WPF業務アプリケーションのアーキテクチャ【設計編／後編】～ドメイン駆動...

2022年版実践WPF業務アプリケーションのアーキテクチャ【設計編／中編】～ドメイン駆動...

2022年版実践WPF業務アプリケーションのアーキテクチャ【設計編／前編】～ドメイン駆動...

もっと読む

この記事の著者: グレープシティ株式会社 SPREADチーム（グレープシティカブシキガイシャスプレッドチーム）

　宮城県仙台市に本社を構えるグレープシティでは、日本の業務に適したシステムをより早く開発するためのソフトウェアを提供しています。エンドユーザーの利用しやすさ、幅広いユーザー環境への対応、そして何よりプログラマの作業を軽減することを一番に目指しています。　SPREADは、ExcelライクなUIを実現するグリッドコンポーネントの定番として、日本のみならず全世界で数多くの開発者に利用されている製品。同チームはWindows Forms、ASP.NET、WPFといった.NET向け製品のほか、HTML...

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この著者の最近の執筆記事