箱ひげ図

箱ひげ図は、データの分散を四分位数で表示します。箱に、垂直の線(ひげ)を追加する場合もあります。この線は、上位四分位点と下位四分位点の範囲外のばらつきを示します。ひげの外側にある点は、外れ値です。箱ひげ図は通常、統計解析に用いられます。
 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>