じょうごグラフ

じょうごグラフは、複数の段階にわたって値を表示します。通常、段階を経るごとに、表示される値が減少します。
 ABCDEF
1対象層人数    
2J5125    
3I4298    
4H3344    
5G2138    
6F1890    
7E1560    
8D1320    
9C1030    
10B902    
11A570    
   

ソースコード

別ウィンドウで表示
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_funnel : 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.SetClipValue(0, 0, 1, 2, "対象層\t人数");
        sheet.SetClipValue(1, 0, 1, 2, "J\t5125");
        sheet.SetClipValue(2, 0, 1, 2, "I\t4298");
        sheet.SetClipValue(3, 0, 1, 2, "H\t3344");
        sheet.SetClipValue(4, 0, 1, 2, "G\t2138");
        sheet.SetClipValue(5, 0, 1, 2, "F\t1890");
        sheet.SetClipValue(6, 0, 1, 2, "E\t1560");
        sheet.SetClipValue(7, 0, 1, 2, "D\t1320");
        sheet.SetClipValue(8, 0, 1, 2, "C\t1030");
        sheet.SetClipValue(9, 0, 1, 2, "B\t902");
        sheet.SetClipValue(10, 0, 1, 2, "A\t570");

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

        // データバーへの色マッピング
        FarPoint.Web.Chart.FunnelSeries fseries = (FarPoint.Web.Chart.FunnelSeries)FpSpread1.Sheets[0].Charts[0].Model.PlotAreas[0].Series[0];
        fseries.BarFills.Add(new FarPoint.Web.Chart.SolidFill(ColorTranslator.FromHtml("#dc4e95")));
        fseries.BarFills.Add(new FarPoint.Web.Chart.SolidFill(ColorTranslator.FromHtml("#de599b")));
        fseries.BarFills.Add(new FarPoint.Web.Chart.SolidFill(ColorTranslator.FromHtml("#e063a1")));
        fseries.BarFills.Add(new FarPoint.Web.Chart.SolidFill(ColorTranslator.FromHtml("#e57db1")));
        fseries.BarFills.Add(new FarPoint.Web.Chart.SolidFill(ColorTranslator.FromHtml("#e685b6")));
        fseries.BarFills.Add(new FarPoint.Web.Chart.SolidFill(ColorTranslator.FromHtml("#e88fbc")));
        fseries.BarFills.Add(new FarPoint.Web.Chart.SolidFill(ColorTranslator.FromHtml("#e993be")));
        fseries.BarFills.Add(new FarPoint.Web.Chart.SolidFill(ColorTranslator.FromHtml("#eb9cc4")));
        fseries.BarFills.Add(new FarPoint.Web.Chart.SolidFill(ColorTranslator.FromHtml("#ea95bf")));
        fseries.BarFills.Add(new FarPoint.Web.Chart.SolidFill(ColorTranslator.FromHtml("#efaece")));

        // グラフタイトル・判例を非表示
        FpSpread1.Sheets[0].Charts[0].Model.LabelAreas.Clear();
        FpSpread1.Sheets[0].Charts[0].Model.LegendAreas.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_funnel
    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.SetClipValue(0, 0, 1, 2, "対象層" & vbTab & "人数")
        sheet.SetClipValue(1, 0, 1, 2, "J" & vbTab & "5125")
        sheet.SetClipValue(2, 0, 1, 2, "I" & vbTab & "4298")
        sheet.SetClipValue(3, 0, 1, 2, "H" & vbTab & "3344")
        sheet.SetClipValue(4, 0, 1, 2, "G" & vbTab & "2138")
        sheet.SetClipValue(5, 0, 1, 2, "F" & vbTab & "1890")
        sheet.SetClipValue(6, 0, 1, 2, "E" & vbTab & "1560")
        sheet.SetClipValue(7, 0, 1, 2, "D" & vbTab & "1320")
        sheet.SetClipValue(8, 0, 1, 2, "C" & vbTab & "1030")
        sheet.SetClipValue(9, 0, 1, 2, "B" & vbTab & "902")
        sheet.SetClipValue(10, 0, 1, 2, "A" & vbTab & "570")

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

        ' データバーへの色マッピング
        Dim fseries As FarPoint.Web.Chart.FunnelSeries = DirectCast(FpSpread1.Sheets(0).Charts(0).Model.PlotAreas(0).Series(0), FarPoint.Web.Chart.FunnelSeries)
        fseries.BarFills.Add(New FarPoint.Web.Chart.SolidFill(ColorTranslator.FromHtml("#dc4e95")))
        fseries.BarFills.Add(New FarPoint.Web.Chart.SolidFill(ColorTranslator.FromHtml("#de599b")))
        fseries.BarFills.Add(New FarPoint.Web.Chart.SolidFill(ColorTranslator.FromHtml("#e063a1")))
        fseries.BarFills.Add(New FarPoint.Web.Chart.SolidFill(ColorTranslator.FromHtml("#e57db1")))
        fseries.BarFills.Add(New FarPoint.Web.Chart.SolidFill(ColorTranslator.FromHtml("#e685b6")))
        fseries.BarFills.Add(New FarPoint.Web.Chart.SolidFill(ColorTranslator.FromHtml("#e88fbc")))
        fseries.BarFills.Add(New FarPoint.Web.Chart.SolidFill(ColorTranslator.FromHtml("#e993be")))
        fseries.BarFills.Add(New FarPoint.Web.Chart.SolidFill(ColorTranslator.FromHtml("#eb9cc4")))
        fseries.BarFills.Add(New FarPoint.Web.Chart.SolidFill(ColorTranslator.FromHtml("#ea95bf")))
        fseries.BarFills.Add(New FarPoint.Web.Chart.SolidFill(ColorTranslator.FromHtml("#efaece")))

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

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

<%@ 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>