デモアプリケーショントップ
ナビゲーション リンクのスキップ
 新機能 の展開 新機能
 InputMan連携 の展開 InputMan連携
 マルチタッチ機能 の展開 マルチタッチ機能
 セル、行、列、ヘッダ の展開 セル、行、列、ヘッダ
 シート の展開 シート
 スタイル の展開 スタイル
 選択 の展開 選択
 セル型 の展開 セル型
 編集 の展開 編集
 ソート の展開 ソート
 フィルタリング の展開 フィルタリング
 グループ化 の展開 グループ化
 ページング の展開 ページング
 スクロール の展開 スクロール
 データ連結 の展開 データ連結
 階層表示 の展開 階層表示
 コマンドバー の展開 コマンドバー
 チャート の縮小 チャート
 数式 の展開 数式
 インポート／エクスポート の展開 インポート／エクスポート
 クライアント側スクリプト の展開 クライアント側スクリプト

縦棒チャート

SPREADでは以下の24種類の縦棒チャートが提供されています。 チャートはエンドユーザーが自由に移動したりリサイズすることができます。

集合縦棒積み上げ縦棒100%積み上げ縦棒
高低縦棒3D集合縦棒3D積み上げ縦棒
3D 100%積み上げ縦棒3D縦棒3D高低縦棒
円柱形の集合縦棒円柱形の積み上げ縦棒円柱形の100%積み上げ縦棒
円柱形の3D縦棒円柱形の高低縦棒円錐形の集合縦棒
円錐形の積み上げ縦棒円錐形の100%積み上げ縦棒円錐形の3D縦棒
円錐形の高低縦棒ピラミッド形の集合縦棒ピラミッド形の積み上げ縦棒
ピラミッド形の100%積み上げ縦棒ピラミッド形の3D縦棒ピラミッド形の高低縦棒
 ABCDEF
1 SEWNNE
2S15025853026
3S29214152465
4S36526706043
5S42480261127
   

ソースコード

別ウィンドウで表示 
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class chart_columnchart : 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.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.RowCount = 5;
        sheet.ColumnCount = 6;

        // 2Dを選択
        RadioButtonList1.SelectedIndex = 0;

        // テストデータの設定
        sheet.SetClipValue(0, 1, 1, 5, "S\tE\tW\tN\tNE");
        sheet.SetClipValue(1, 0, 1, 6, "S1\t50\t25\t85\t30\t26");
        sheet.SetClipValue(2, 0, 1, 6, "S2\t92\t14\t15\t24\t65");
        sheet.SetClipValue(3, 0, 1, 6, "S3\t65\t26\t70\t60\t43");
        sheet.SetClipValue(4, 0, 1, 6, "S4\t24\t80\t26\t11\t27");


        // シリーズを作成
        FarPoint.Web.Chart.BarSeries series1 = new FarPoint.Web.Chart.BarSeries();
        series1.SeriesName = "s1";
        series1.SeriesNameDataSource = new FarPoint.Web.Spread.Chart.SeriesDataField(FpSpread1, "DataFieldSeriesName", "Sheet1!$A$2:$A$2", FarPoint.Web.Spread.Chart.SegmentDataType.Text);
        series1.CategoryNames.DataSource = new FarPoint.Web.Spread.Chart.SeriesDataField(FpSpread1, "DataFieldCategoryName", "Sheet1!$B$1:$F$1", FarPoint.Web.Spread.Chart.SegmentDataType.Text);
        series1.Values.DataSource = new FarPoint.Web.Spread.Chart.SeriesDataField(FpSpread1, "DataFieldValue", "Sheet1!$B$2:$F$2");

        FarPoint.Web.Chart.BarSeries series2 = new FarPoint.Web.Chart.BarSeries();
        series2.SeriesName = "s2";
        series2.SeriesNameDataSource = new FarPoint.Web.Spread.Chart.SeriesDataField(FpSpread1, "DataFieldSeriesName", "Sheet1!$A$3:$A$3", FarPoint.Web.Spread.Chart.SegmentDataType.Text);
        series2.CategoryNames.DataSource = new FarPoint.Web.Spread.Chart.SeriesDataField(FpSpread1, "DataFieldCategoryName", "Sheet1!$B$1:$F$1", FarPoint.Web.Spread.Chart.SegmentDataType.Text);
        series2.Values.DataSource = new FarPoint.Web.Spread.Chart.SeriesDataField(FpSpread1, "DataFieldValue", "Sheet1!$B$3:$F$3");

        FarPoint.Web.Chart.BarSeries series3 = new FarPoint.Web.Chart.BarSeries();
        series3.SeriesName = "s3";
        series3.SeriesNameDataSource = new FarPoint.Web.Spread.Chart.SeriesDataField(FpSpread1, "DataFieldSeriesName", "Sheet1!$A$4:$A$4", FarPoint.Web.Spread.Chart.SegmentDataType.Text);
        series3.CategoryNames.DataSource = new FarPoint.Web.Spread.Chart.SeriesDataField(FpSpread1, "DataFieldCategoryName", "Sheet1!$B$1:$F$1", FarPoint.Web.Spread.Chart.SegmentDataType.Text);
        series3.Values.DataSource = new FarPoint.Web.Spread.Chart.SeriesDataField(FpSpread1, "DataFieldValue", "Sheet1!$B$4:$F$4");

        FarPoint.Web.Chart.BarSeries series4 = new FarPoint.Web.Chart.BarSeries();
        series4.SeriesName = "s4";
        series4.SeriesNameDataSource = new FarPoint.Web.Spread.Chart.SeriesDataField(FpSpread1, "DataFieldSeriesName", "Sheet1!$A$5:$A$5", FarPoint.Web.Spread.Chart.SegmentDataType.Text);
        series4.CategoryNames.DataSource = new FarPoint.Web.Spread.Chart.SeriesDataField(FpSpread1, "DataFieldCategoryName", "Sheet1!$B$1:$F$1", FarPoint.Web.Spread.Chart.SegmentDataType.Text);
        series4.Values.DataSource = new FarPoint.Web.Spread.Chart.SeriesDataField(FpSpread1, "DataFieldValue", "Sheet1!$B$5:$F$5");

        FarPoint.Web.Chart.ClusteredBarSeries barSeries = new FarPoint.Web.Chart.ClusteredBarSeries();
        barSeries.Series.AddRange(new FarPoint.Web.Chart.BarSeries[] { series1, series2, series3, series4 });

        // プロット領域を作成します
        FarPoint.Web.Chart.YPlotArea plotArea = new FarPoint.Web.Chart.YPlotArea();
        plotArea.Location = new System.Drawing.PointF(0.2f, 0.2f);
        plotArea.Size = new System.Drawing.SizeF(0.6f, 0.7f);
        plotArea.XAxis.MajorGridVisible = true;
        plotArea.Series.AddRange(new FarPoint.Web.Chart.Series[] { barSeries });

        // 凡例を設定します
        FarPoint.Web.Chart.LegendArea legend = new FarPoint.Web.Chart.LegendArea();
        legend.Location = new System.Drawing.PointF(0.995f, 0.5f);
        legend.AlignmentX = 1f;
        legend.AlignmentY = 0.5f;

        // チャートモデルに各情報を追加します
        FarPoint.Web.Chart.ChartModel model = new FarPoint.Web.Chart.ChartModel();
        model.LegendAreas.Add(legend);
        model.PlotAreas.Add(plotArea);

        // SPREADチャートにチャートモデルを設定します
        FarPoint.Web.Spread.Chart.SpreadChart chart = new FarPoint.Web.Spread.Chart.SpreadChart();
        chart.Model = model;
        chart.Height = 300;
        chart.Width = 400;
        chart.Left = 50;
        chart.Top = 120;

        sheet.Charts.Add(chart);
    }
    protected void RadioButtonList1_SelectedIndexChanged(object sender, EventArgs e)
    {
        FpSpread1.SaveChanges();

        if (FpSpread1.ActiveSheetView.Charts.Count > 0)
        {
            if (RadioButtonList1.SelectedIndex == 1)
            {
                FpSpread1.ActiveSheetView.Charts[0].ViewType = FarPoint.Web.Chart.ChartViewType.View3D;
                FpSpread1.ActiveSheetView.Charts[0].Model.PlotAreas[0].Elevation = 18;
                FpSpread1.ActiveSheetView.Charts[0].Model.PlotAreas[0].Rotation = -24;
            }
            else
            {
                FpSpread1.ActiveSheetView.Charts[0].ViewType = FarPoint.Web.Chart.ChartViewType.View2D;
            }
        }
    }
}


Partial Class chart_columnchart
    Inherits System.Web.UI.Page

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

        ' SPREADの設定
        InitSpread(FpSpread1)

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

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

    Private Sub InitSpreadStyles(ByVal sheet As FarPoint.Web.Spread.SheetView)
        ' フォントサイズの設定
        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.RowCount = 5
        sheet.ColumnCount = 6

        ' 2Dを選択
        RadioButtonList1.SelectedIndex = 0

        ' テストデータの設定
        sheet.SetClipValue(0, 1, 1, 5, "S" & vbTab & "E" & vbTab & "W" & vbTab & "N" & vbTab & "NE")
        sheet.SetClipValue(1, 0, 1, 6, "S1" & vbTab & "50" & vbTab & "25" & vbTab & "85" & vbTab & "30" & vbTab & "26")
        sheet.SetClipValue(2, 0, 1, 6, "S2" & vbTab & "92" & vbTab & "14" & vbTab & "15" & vbTab & "24" & vbTab & "65")
        sheet.SetClipValue(3, 0, 1, 6, "S3" & vbTab & "65" & vbTab & "26" & vbTab & "70" & vbTab & "60" & vbTab & "43")
        sheet.SetClipValue(4, 0, 1, 6, "S4" & vbTab & "24" & vbTab & "80" & vbTab & "26" & vbTab & "11" & vbTab & "27")


        ' シリーズを作成
        Dim series1 As New FarPoint.Web.Chart.BarSeries()
        series1.SeriesName = "s1"
        series1.SeriesNameDataSource = New FarPoint.Web.Spread.Chart.SeriesDataField(FpSpread1, "DataFieldSeriesName", "Sheet1!$A$2:$A$2", FarPoint.Web.Spread.Chart.SegmentDataType.Text)
        series1.CategoryNames.DataSource = New FarPoint.Web.Spread.Chart.SeriesDataField(FpSpread1, "DataFieldCategoryName", "Sheet1!$B$1:$F$1", FarPoint.Web.Spread.Chart.SegmentDataType.Text)
        series1.Values.DataSource = New FarPoint.Web.Spread.Chart.SeriesDataField(FpSpread1, "DataFieldValue", "Sheet1!$B$2:$F$2")

        Dim series2 As New FarPoint.Web.Chart.BarSeries()
        series2.SeriesName = "s2"
        series2.SeriesNameDataSource = New FarPoint.Web.Spread.Chart.SeriesDataField(FpSpread1, "DataFieldSeriesName", "Sheet1!$A$3:$A$3", FarPoint.Web.Spread.Chart.SegmentDataType.Text)
        series2.CategoryNames.DataSource = New FarPoint.Web.Spread.Chart.SeriesDataField(FpSpread1, "DataFieldCategoryName", "Sheet1!$B$1:$F$1", FarPoint.Web.Spread.Chart.SegmentDataType.Text)
        series2.Values.DataSource = New FarPoint.Web.Spread.Chart.SeriesDataField(FpSpread1, "DataFieldValue", "Sheet1!$B$3:$F$3")

        Dim series3 As New FarPoint.Web.Chart.BarSeries()
        series3.SeriesName = "s3"
        series3.SeriesNameDataSource = New FarPoint.Web.Spread.Chart.SeriesDataField(FpSpread1, "DataFieldSeriesName", "Sheet1!$A$4:$A$4", FarPoint.Web.Spread.Chart.SegmentDataType.Text)
        series3.CategoryNames.DataSource = New FarPoint.Web.Spread.Chart.SeriesDataField(FpSpread1, "DataFieldCategoryName", "Sheet1!$B$1:$F$1", FarPoint.Web.Spread.Chart.SegmentDataType.Text)
        series3.Values.DataSource = New FarPoint.Web.Spread.Chart.SeriesDataField(FpSpread1, "DataFieldValue", "Sheet1!$B$4:$F$4")

        Dim series4 As New FarPoint.Web.Chart.BarSeries()
        series4.SeriesName = "s4"
        series4.SeriesNameDataSource = New FarPoint.Web.Spread.Chart.SeriesDataField(FpSpread1, "DataFieldSeriesName", "Sheet1!$A$5:$A$5", FarPoint.Web.Spread.Chart.SegmentDataType.Text)
        series4.CategoryNames.DataSource = New FarPoint.Web.Spread.Chart.SeriesDataField(FpSpread1, "DataFieldCategoryName", "Sheet1!$B$1:$F$1", FarPoint.Web.Spread.Chart.SegmentDataType.Text)
        series4.Values.DataSource = New FarPoint.Web.Spread.Chart.SeriesDataField(FpSpread1, "DataFieldValue", "Sheet1!$B$5:$F$5")

        Dim barSeries As New FarPoint.Web.Chart.ClusteredBarSeries()
        barSeries.Series.AddRange(New FarPoint.Web.Chart.BarSeries() {series1, series2, series3, series4})

        ' プロット領域を作成します
        Dim plotArea As New FarPoint.Web.Chart.YPlotArea()
        plotArea.Location = New System.Drawing.PointF(0.2F, 0.2F)
        plotArea.Size = New System.Drawing.SizeF(0.6F, 0.7F)
        plotArea.XAxis.MajorGridVisible = True
        plotArea.Series.AddRange(New FarPoint.Web.Chart.Series() {barSeries})

        ' 凡例を設定します
        Dim legend As New FarPoint.Web.Chart.LegendArea()
        legend.Location = New System.Drawing.PointF(0.995F, 0.5F)
        legend.AlignmentX = 1.0F
        legend.AlignmentY = 0.5F

        ' チャートモデルに各情報を追加します
        Dim model As New FarPoint.Web.Chart.ChartModel()
        model.LegendAreas.Add(legend)
        model.PlotAreas.Add(plotArea)

        ' SPREADチャートにチャートモデルを設定します
        Dim chart As New FarPoint.Web.Spread.Chart.SpreadChart()
        chart.Model = model
        chart.Height = 300
        chart.Width = 400
        chart.Left = 50
        chart.Top = 120

        sheet.Charts.Add(chart)
    End Sub

    Protected Sub RadioButtonList1_SelectedIndexChanged(ByVal sender As Object, ByVal e As System.EventArgs) Handles RadioButtonList1.SelectedIndexChanged
        FpSpread1.SaveChanges()

        If FpSpread1.ActiveSheetView.Charts.Count > 0 Then
            If RadioButtonList1.SelectedIndex = 1 Then
                FpSpread1.ActiveSheetView.Charts(0).ViewType = FarPoint.Web.Chart.ChartViewType.View3D
                FpSpread1.ActiveSheetView.Charts(0).Model.PlotAreas(0).Elevation = 18
                FpSpread1.ActiveSheetView.Charts(0).Model.PlotAreas(0).Rotation = -24
            Else
                FpSpread1.ActiveSheetView.Charts(0).ViewType = FarPoint.Web.Chart.ChartViewType.View2D
            End If
        End If
    End Sub
End Class

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

<%@ 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">
    <asp:RadioButtonList ID="RadioButtonList1" runat="server" AutoPostBack="True" 
        RepeatDirection="Horizontal" 
        onselectedindexchanged="RadioButtonList1_SelectedIndexChanged">
        <asp:ListItem Selected="True">2D</asp:ListItem>
        <asp:ListItem>3D</asp:ListItem>
    </asp:RadioButtonList> 
    <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>