サンバースト

サンバーストを使用して、階層データを表示できます。このグラフでは、個々の階層レベルは1つのリング(円)として表現されます。最も内側の円が、階層の最上位のデータです。
 ABCDEFGHIJK
1地域都道府県市町村販売       
2東北岩手 1.7       
3 宮城仙台2.0       
4  大和1.0       
5  富谷1.0       
6  名取1.5       
7 福島 3.0       
8関東東京 1.1       
9 千葉 2.8       
10 埼玉 1.3       
11近畿大阪 1.7       
12 京都 1.6       
13 奈良 2.1       
14四国徳島 1.4       
15 香川 2.0       
16 愛媛松山3.0       
   

ソースコード

別ウィンドウで表示

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_sunburst : 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 = 16;
        sheet.ColumnCount = 11;
        sheet.PageSize = 25;
        sheet.DefaultColumnWidth = 58;
        sheet.DefaultRowHeight = 25;

        // シートのフォントサイズの設定
        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 < 16; 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都道府県\t市町村\t販売");
        sheet.SetClipValue(1, 0, 1, 4, "東北\t岩手\t\t1.7");
        sheet.SetClipValue(2, 0, 1, 4, "\t宮城\t仙台\t2.0");
        sheet.SetClipValue(3, 0, 1, 4, "\t\t大和\t1.0");
        sheet.SetClipValue(4, 0, 1, 4, "\t\t富谷\t1.0");
        sheet.SetClipValue(5, 0, 1, 4, "\t\t名取\t1.5");
        sheet.SetClipValue(6, 0, 1, 4, "\t福島\t\t3.0");
        sheet.SetClipValue(7, 0, 1, 4, "関東\t東京\t\t1.1");
        sheet.SetClipValue(8, 0, 1, 4, "\t千葉\t\t2.8");
        sheet.SetClipValue(9, 0, 1, 4, "\t埼玉\t\t1.3");
        sheet.SetClipValue(10, 0, 1, 4, "近畿\t大阪\t\t1.7");
        sheet.SetClipValue(11, 0, 1, 4, "\t京都\t\t1.6");
        sheet.SetClipValue(12, 0, 1, 4, "\t奈良\t\t2.1");
        sheet.SetClipValue(13, 0, 1, 4, "四国\t徳島\t\t1.4");
        sheet.SetClipValue(14, 0, 1, 4, "\t香川\t\t2.0");
        sheet.SetClipValue(15, 0, 1, 4, "\t愛媛\t松山\t3.0");

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

        // データバーへの色マッピング
        FarPoint.Web.Chart.SunburstSeries sseries = (FarPoint.Web.Chart.SunburstSeries)FpSpread1.Sheets[0].Charts[0].Model.PlotAreas[0].Series[0];
        sseries.Fills.AddRange(new FarPoint.Web.Chart.Fill[] {
                new FarPoint.Web.Chart.SolidFill(ColorTranslator.FromHtml("#2b80d5")),
                new FarPoint.Web.Chart.SolidFill(ColorTranslator.FromHtml("#4e95dc")),
                new FarPoint.Web.Chart.SolidFill(ColorTranslator.FromHtml("#72aae2")),
                new FarPoint.Web.Chart.SolidFill(ColorTranslator.FromHtml("#95bfea")),
                new FarPoint.Web.Chart.SolidFill(ColorTranslator.FromHtml("#b8d5f1")) });

        // チャートのフォント設定
        Font labelFont = new Font("メイリオ", 9);
        // データバーにあるラベルのフォント設定
        sseries.LabelTextFont = labelFont;
        // 凡例のフォント設定
        FpSpread1.Sheets[0].Charts[0].Model.LegendAreas[0].TextFont = 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_sunburst
    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 = 16
        sheet.ColumnCount = 11
        sheet.PageSize = 25
        sheet.DefaultColumnWidth = 58
        sheet.DefaultRowHeight = 25

        ' シートのフォントサイズの設定
        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 15
            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 & "都道府県" & vbTab & "市町村" & vbTab & "販売")
        sheet.SetClipValue(1, 0, 1, 4, "東北" & vbTab & "岩手" & vbTab & vbTab & "1.7")
        sheet.SetClipValue(2, 0, 1, 4, vbTab & "宮城" & vbTab & "仙台" & vbTab & "2.0")
        sheet.SetClipValue(3, 0, 1, 4, vbTab & vbTab & "大和" & vbTab & "1.0")
        sheet.SetClipValue(4, 0, 1, 4, vbTab & vbTab & "富谷" & vbTab & "1.0")
        sheet.SetClipValue(5, 0, 1, 4, vbTab & vbTab & "名取" & vbTab & "1.5")
        sheet.SetClipValue(6, 0, 1, 4, vbTab & "福島" & vbTab & vbTab & "3.0")
        sheet.SetClipValue(7, 0, 1, 4, "関東" & vbTab & "東京" & vbTab & vbTab & "1.1")
        sheet.SetClipValue(8, 0, 1, 4, vbTab & "千葉" & vbTab & vbTab & "2.8")
        sheet.SetClipValue(9, 0, 1, 4, vbTab & "埼玉" & vbTab & vbTab & "1.3")
        sheet.SetClipValue(10, 0, 1, 4, "近畿" & vbTab & "大阪" & vbTab & vbTab & "1.7")
        sheet.SetClipValue(11, 0, 1, 4, vbTab & "京都" & vbTab & vbTab & "1.6")
        sheet.SetClipValue(12, 0, 1, 4, vbTab & "奈良" & vbTab & vbTab & "2.1")
        sheet.SetClipValue(13, 0, 1, 4, "四国" & vbTab & "徳島" & vbTab & vbTab & "1.4")
        sheet.SetClipValue(14, 0, 1, 4, vbTab & "香川" & vbTab & vbTab & "2.0")
        sheet.SetClipValue(15, 0, 1, 4, vbTab & "愛媛" & vbTab & "松山" & vbTab & "3.0")

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

        ' データバーへの色マッピング
        Dim sseries As FarPoint.Web.Chart.SunburstSeries = DirectCast(FpSpread1.Sheets(0).Charts(0).Model.PlotAreas(0).Series(0), FarPoint.Web.Chart.SunburstSeries)
        sseries.Fills.AddRange(New FarPoint.Web.Chart.Fill() {New FarPoint.Web.Chart.SolidFill(ColorTranslator.FromHtml("#2b80d5")), New FarPoint.Web.Chart.SolidFill(ColorTranslator.FromHtml("#4e95dc")), New FarPoint.Web.Chart.SolidFill(ColorTranslator.FromHtml("#72aae2")), New FarPoint.Web.Chart.SolidFill(ColorTranslator.FromHtml("#95bfea")), New FarPoint.Web.Chart.SolidFill(ColorTranslator.FromHtml("#b8d5f1"))})

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

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

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

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