SPREAD for ASP.NETデモアプリケーション

現在位置 : ホーム > 製品情報 > SPREAD for ASP.NET製品仕様 > デモアプリケーショントップ > チャート > ウォーターフォール

デモアプリケーショントップ

新機能

ウォーターフォール

ウォーターフォールを使用すると、初期値が正の値または負の値によってどのような影響を受けたかを表すことができます。棒を色分けすることで、負数と正数の差を一目で把握できます。一部の値は水平軸から開始されますが、中間値はフロート状態の棒として表示されます。

	A	B	C	D	E	F
1	予算推移
2	予算	8000
3	A	-700
4	B	-1350
5	C	-900
6	D	-850
7	E	-1300
8	F	-410
9	G	-550
10	H	-770
11	残高	1170

ソースコード

C#
VB
ASPX

別ウィンドウで表示

using FarPoint.Web.Chart;
using System;
using System.Collections.Generic;
using System.Drawing;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class chart_waterfall : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (IsPostBack)
        {
            return;
        }

        // SPREADの設定
        InitSpread(FpSpread1);

        // シート設定
        InitSpreadStyles(FpSpread1.Sheets[0]);
    }

    private void InitSpread(FarPoint.Web.Spread.FpSpread spread)
    {
        spread.CssClass = "spreadStyle2";
        spread.UseClipboard = false;
    }

    private void InitSpreadStyles(FarPoint.Web.Spread.SheetView sheet)
    {
        // 行列の設定
        sheet.RowCount = 11;
        sheet.ColumnCount = 6;
        sheet.PageSize = 25;
        sheet.DefaultColumnWidth = 100;
        sheet.DefaultRowHeight = 34;

        int dataColumnWidth = 116;
        sheet.Columns[0].Width = dataColumnWidth;
        sheet.Columns[1].Width = dataColumnWidth;

        // シートのフォントサイズの設定
        sheet.DefaultStyle.Font.Size = FontUnit.Parse("80%");
        sheet.ColumnHeader.DefaultStyle.Font.Size = FontUnit.Parse("80%");
        sheet.RowHeader.DefaultStyle.Font.Size = FontUnit.Parse("80%");
        sheet.SheetCorner.DefaultStyle.Font.Size = FontUnit.Parse("80%");

        // グリッド線の設定
        sheet.GridLines = GridLines.None;

        // 罫線の設定
        for (int i = 0; i < 11; i++)
        {
            for (int j = 0; j < 2; j++)
            {
                sheet.Cells[i, j].Border = new FarPoint.Web.Spread.Border(BorderStyle.Solid, Color.LightGray, 1);
                sheet.Cells[i, j].HorizontalAlign = HorizontalAlign.Center;
                sheet.Cells[i, j].VerticalAlign = VerticalAlign.Middle;

            }
        }

        // テストデータの設定
        sheet.AddSpanCell(0, 0, 1, 2);
        sheet.SetClipValue(0, 0, 1, 1, "予算推移");
        sheet.SetClipValue(1, 0, 1, 2, "予算\t8000");
        sheet.SetClipValue(2, 0, 1, 2, "A\t-700");
        sheet.SetClipValue(3, 0, 1, 2, "B\t-1350");
        sheet.SetClipValue(4, 0, 1, 2, "C\t-900");
        sheet.SetClipValue(5, 0, 1, 2, "D\t-850");
        sheet.SetClipValue(6, 0, 1, 2, "E\t-1300");
        sheet.SetClipValue(7, 0, 1, 2, "F\t-410");
        sheet.SetClipValue(8, 0, 1, 2, "G\t-550");
        sheet.SetClipValue(9, 0, 1, 2, "H\t-770");
        sheet.SetClipValue(10, 0, 1, 2, "残高\t1170");

        // SPREADへチャートを追加
        FpSpread1.Sheets[0].AddChart(new FarPoint.Web.Spread.Model.CellRange(1, 0, 10, 2), typeof(FarPoint.Web.Chart.WaterfallSeries), 388, 300, 242, 46);

        // 合計にあたるインデックスをチャートに設定
        FarPoint.Web.Chart.WaterfallSeries wseries = (FarPoint.Web.Chart.WaterfallSeries)FpSpread1.Sheets[0].Charts[0].Model.PlotAreas[0].Series[0];
        wseries.SetTotal(9, true);

        // チャートのフォント設定
        Font labelFont = new Font("メイリオ", 9);
        // データバーにあるラベルのフォント設定
        wseries.LabelTextFont = labelFont;
        // 凡例のフォント
        FpSpread1.Sheets[0].Charts[0].Model.LegendAreas[0].TextFont = labelFont;
        //X軸のフォント設定
        FarPoint.Web.Spread.Chart.SpreadChart chart1 = FpSpread1.Sheets[0].Charts[0];
        YPlotArea plotArea = (YPlotArea)chart1.Model.PlotAreas[0];
        plotArea.XAxis.LabelTextFont = new Font("メイリオ", 8);

        // グラフタイトルを非表示
        FpSpread1.Sheets[0].Charts[0].Model.LabelAreas.Clear();
    }
}

Imports FarPoint.Web.Chart
Imports System.Collections.Generic
Imports System.Drawing
Imports System.Linq
Imports System.Web
Imports System.Web.UI
Imports System.Web.UI.WebControls

Partial Public Class chart_waterfall
    Inherits System.Web.UI.Page
    Protected Sub Page_Load(sender As Object, e As EventArgs)
        If IsPostBack Then
            Return
        End If

        ' SPREADの設定
        InitSpread(FpSpread1)

        ' シート設定
        InitSpreadStyles(FpSpread1.Sheets(0))
    End Sub

    Private Sub InitSpread(spread As FarPoint.Web.Spread.FpSpread)
        spread.CssClass = "spreadStyle2"
        spread.UseClipboard = False
    End Sub

    Private Sub InitSpreadStyles(sheet As FarPoint.Web.Spread.SheetView)
        ' 行列の設定
        sheet.RowCount = 11
        sheet.ColumnCount = 6
        sheet.PageSize = 25
        sheet.DefaultColumnWidth = 100
        sheet.DefaultRowHeight = 34

        Dim dataColumnWidth As Integer = 116
        sheet.Columns(0).Width = dataColumnWidth
        sheet.Columns(1).Width = dataColumnWidth

        ' シートのフォントサイズの設定
        sheet.DefaultStyle.Font.Size = FontUnit.Parse("80%")
        sheet.ColumnHeader.DefaultStyle.Font.Size = FontUnit.Parse("80%")
        sheet.RowHeader.DefaultStyle.Font.Size = FontUnit.Parse("80%")
        sheet.SheetCorner.DefaultStyle.Font.Size = FontUnit.Parse("80%")

        ' グリッド線の設定
        sheet.GridLines = GridLines.None

        ' 罫線の設定
        For i As Integer = 0 To 10
            For j As Integer = 0 To 1
                sheet.Cells(i, j).Border = New FarPoint.Web.Spread.Border(BorderStyle.Solid, Color.LightGray, 1)
                sheet.Cells(i, j).HorizontalAlign = HorizontalAlign.Center

                sheet.Cells(i, j).VerticalAlign = VerticalAlign.Middle
            Next
        Next

        ' テストデータの設定
        sheet.AddSpanCell(0, 0, 1, 2)
        sheet.SetClipValue(0, 0, 1, 1, "予算推移")
        sheet.SetClipValue(1, 0, 1, 2, "予算" & vbTab & "8000")
        sheet.SetClipValue(2, 0, 1, 2, "A" & vbTab & "-700")
        sheet.SetClipValue(3, 0, 1, 2, "B" & vbTab & "-1350")
        sheet.SetClipValue(4, 0, 1, 2, "C" & vbTab & "-900")
        sheet.SetClipValue(5, 0, 1, 2, "D" & vbTab & "-850")
        sheet.SetClipValue(6, 0, 1, 2, "E" & vbTab & "-1300")
        sheet.SetClipValue(7, 0, 1, 2, "F" & vbTab & "-410")
        sheet.SetClipValue(8, 0, 1, 2, "G" & vbTab & "-550")
        sheet.SetClipValue(9, 0, 1, 2, "H" & vbTab & "-770")
        sheet.SetClipValue(10, 0, 1, 2, "残高" & vbTab & "1170")

        ' SPREADへチャートを追加
        FpSpread1.Sheets(0).AddChart(New FarPoint.Web.Spread.Model.CellRange(1, 0, 10, 2), GetType(FarPoint.Web.Chart.WaterfallSeries), 388, 300, 242, 46)

        ' 合計にあたるインデックスをチャートに設定
        Dim wseries As FarPoint.Web.Chart.WaterfallSeries = DirectCast(FpSpread1.Sheets(0).Charts(0).Model.PlotAreas(0).Series(0), FarPoint.Web.Chart.WaterfallSeries)
        wseries.SetTotal(9, True)

        ' チャートのフォント設定
        Dim labelFont As New Font("メイリオ", 9)
        ' データバーにあるラベルのフォント設定
        wseries.LabelTextFont = labelFont
        ' 凡例のフォント
        FpSpread1.Sheets(0).Charts(0).Model.LegendAreas(0).TextFont = labelFont
        'X軸のフォント設定
        Dim chart1 As FarPoint.Web.Spread.Chart.SpreadChart = FpSpread1.Sheets(0).Charts(0)
        Dim plotArea As YPlotArea = DirectCast(chart1.Model.PlotAreas(0), YPlotArea)
        plotArea.XAxis.LabelTextFont = New Font("メイリオ", 8)

        ' グラフタイトルを非表示
        FpSpread1.Sheets(0).Charts(0).Model.LabelAreas.Clear()
    End Sub
End Class

<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="waterfallchart.aspx.cs" Inherits="chart_waterfall" %>

<%@ Register Assembly="FarPoint.Web.SpreadJ" Namespace="FarPoint.Web.Spread" TagPrefix="FarPoint" %>

<asp:Content ID="Content1" ContentPlaceHolderID="HeaderPlaceHolder1" runat="Server">
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
    <FarPoint:FpSpread ID="FpSpread1" runat="server" BorderColor="#A0A0A0" BorderStyle="Solid"
        BorderWidth="1px">
        <CommandBar BackColor="#F6F6F6" ButtonFaceColor="Control" ButtonHighlightColor="ControlLightLight"
            ButtonShadowColor="ControlDark">
        </CommandBar>
        <Sheets>
            <FarPoint:SheetView SheetName="Sheet1">
            </FarPoint:SheetView>
        </Sheets>
    </FarPoint:FpSpread>
</asp:Content>

このページの先頭へ戻る