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

箱ひげ図

箱ひげ図は、データの分散を四分位数で表示します。箱に、垂直の線（ひげ）を追加する場合もあります。この線は、上位四分位点と下位四分位点の範囲外のばらつきを示します。ひげの外側にある点は、外れ値です。箱ひげ図は通常、統計解析に用いられます。
 ABCDEFGHIJK
1商品支店A支店B支店C       
2肉類11020       
3果物101728       
4魚類132335       
5果物81527       
6魚類62130       
7野菜21427       
8肉類21221       
9野菜41530       
10野菜51932       
11果物61325       
12果物71425       
13肉類31321       
14野菜31530       
15肉類41525       
16果物91628       
17魚類92533       
   

ソースコード

別ウィンドウで表示 

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_boxwhisker : 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 = 17;
        sheet.ColumnCount = 11;
        sheet.PageSize = 25;
        sheet.DefaultColumnWidth = 58;

        // シートのフォントサイズの設定
        sheet.DefaultStyle.Font.Size = FontUnit.Parse("70%");
        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 < 17; i++)
        {
            for (int j = 0; j < 4; j++)
            {
                FpSpread1.Cells[i, j].Border = new FarPoint.Web.Spread.Border(BorderStyle.Solid, Color.LightGray, 1);
                FpSpread1.Sheets[0].Cells[i, j].HorizontalAlign = HorizontalAlign.Center;
                FpSpread1.Sheets[0].Cells[i, j].VerticalAlign = VerticalAlign.Middle;

            }
        }

        // テストデータの設定
        sheet.SetClipValue(0, 0, 1, 4, "商品\t支店A\t支店B\t支店C");
        sheet.SetClipValue(1, 0, 1, 4, "肉類\t1\t10\t20");
        sheet.SetClipValue(2, 0, 1, 4, "果物\t10\t17\t28");
        sheet.SetClipValue(3, 0, 1, 4, "魚類\t13\t23\t35");
        sheet.SetClipValue(4, 0, 1, 4, "果物\t8\t15\t27");
        sheet.SetClipValue(5, 0, 1, 4, "魚類\t6\t21\t30");
        sheet.SetClipValue(6, 0, 1, 4, "野菜\t2\t14\t27");
        sheet.SetClipValue(7, 0, 1, 4, "肉類\t2\t12\t21");
        sheet.SetClipValue(8, 0, 1, 4, "野菜\t4\t15\t30");
        sheet.SetClipValue(9, 0, 1, 4, "野菜\t5\t19\t32");
        sheet.SetClipValue(10, 0, 1, 4, "果物\t6\t13\t25");
        sheet.SetClipValue(11, 0, 1, 4, "果物\t7\t14\t25");
        sheet.SetClipValue(12, 0, 1, 4, "肉類\t3\t13\t21");
        sheet.SetClipValue(13, 0, 1, 4, "野菜\t3\t15\t30");
        sheet.SetClipValue(14, 0, 1, 4, "肉類\t4\t15\t25");
        sheet.SetClipValue(15, 0, 1, 4, "果物\t9\t16\t28");
        sheet.SetClipValue(16, 0, 1, 4, "魚類\t9\t25\t33");


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

        // ポイント、マーカーの表示設定
        FarPoint.Web.Chart.ClusteredBoxWhiskerSeries bwseries = (FarPoint.Web.Chart.ClusteredBoxWhiskerSeries)FpSpread1.Sheets[0].Charts[0].Model.PlotAreas[0].Series[0];
        foreach (FarPoint.Web.Chart.BoxWhiskerSeries boxseries in bwseries.Series)
        {
            boxseries.ShowInnerPoints = true;
            boxseries.ShowMeanLine = true;
            boxseries.ShowMeanMarkers = true;
            boxseries.ShowOutlierPoints = true;
        }

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

        // グラフタイトルを非表示
        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_boxwhisker
    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 = 17
        sheet.ColumnCount = 11
        sheet.PageSize = 25
        sheet.DefaultColumnWidth = 58

        ' シートのフォントサイズの設定
        sheet.DefaultStyle.Font.Size = FontUnit.Parse("70%")
        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 16
            For j As Integer = 0 To 3
                FpSpread1.Cells(i, j).Border = New FarPoint.Web.Spread.Border(BorderStyle.Solid, Color.LightGray, 1)
                FpSpread1.Sheets(0).Cells(i, j).HorizontalAlign = HorizontalAlign.Center

                FpSpread1.Sheets(0).Cells(i, j).VerticalAlign = VerticalAlign.Middle
            Next
        Next

        ' テストデータの設定
        sheet.SetClipValue(0, 0, 1, 4, "商品" & vbTab & "支店A" & vbTab & "支店B" & vbTab & "支店C")
        sheet.SetClipValue(1, 0, 1, 4, "肉類" & vbTab & "1" & vbTab & "10" & vbTab & "20")
        sheet.SetClipValue(2, 0, 1, 4, "果物" & vbTab & "10" & vbTab & "17" & vbTab & "28")
        sheet.SetClipValue(3, 0, 1, 4, "魚類" & vbTab & "13" & vbTab & "23" & vbTab & "35")
        sheet.SetClipValue(4, 0, 1, 4, "果物" & vbTab & "8" & vbTab & "15" & vbTab & "27")
        sheet.SetClipValue(5, 0, 1, 4, "魚類" & vbTab & "6" & vbTab & "21" & vbTab & "30")
        sheet.SetClipValue(6, 0, 1, 4, "野菜" & vbTab & "2" & vbTab & "14" & vbTab & "27")
        sheet.SetClipValue(7, 0, 1, 4, "肉類" & vbTab & "2" & vbTab & "12" & vbTab & "21")
        sheet.SetClipValue(8, 0, 1, 4, "野菜" & vbTab & "4" & vbTab & "15" & vbTab & "30")
        sheet.SetClipValue(9, 0, 1, 4, "野菜" & vbTab & "5" & vbTab & "19" & vbTab & "32")
        sheet.SetClipValue(10, 0, 1, 4, "果物" & vbTab & "6" & vbTab & "13" & vbTab & "25")
        sheet.SetClipValue(11, 0, 1, 4, "果物" & vbTab & "7" & vbTab & "14" & vbTab & "25")
        sheet.SetClipValue(12, 0, 1, 4, "肉類" & vbTab & "3" & vbTab & "13" & vbTab & "21")
        sheet.SetClipValue(13, 0, 1, 4, "野菜" & vbTab & "3" & vbTab & "15" & vbTab & "30")
        sheet.SetClipValue(14, 0, 1, 4, "肉類" & vbTab & "4" & vbTab & "15" & vbTab & "25")
        sheet.SetClipValue(15, 0, 1, 4, "果物" & vbTab & "9" & vbTab & "16" & vbTab & "28")
        sheet.SetClipValue(16, 0, 1, 4, "魚類" & vbTab & "9" & vbTab & "25" & vbTab & "33")


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

        ' ポイント、マーカーの表示設定
        Dim bwseries As FarPoint.Web.Chart.ClusteredBoxWhiskerSeries = DirectCast(FpSpread1.Sheets(0).Charts(0).Model.PlotAreas(0).Series(0), FarPoint.Web.Chart.ClusteredBoxWhiskerSeries)
        For Each boxseries As FarPoint.Web.Chart.BoxWhiskerSeries In bwseries.Series
            boxseries.ShowInnerPoints = True
            boxseries.ShowMeanLine = True
            boxseries.ShowMeanMarkers = True
            boxseries.ShowOutlierPoints = True
        Next

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

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


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

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