ツリーマップ

ツリーマップは、階層データを、ネストされた一連の長方形として表示します。ツリーのブランチ(枝)は長方形で表され、個々のサブブランチはさらに小さな長方形で表されます。グラフ内のさまざまな長方形には色とサイズを使い分けて、パターンを特定しやすくします。ツリーマップは、空間を効率的に使用できるという特徴もあり、大量のデータを表示する場合に便利です。
 ABCDEFGHIJK
1種別分類1分類2ポイント       
2国際政治 1.7       
3 経済為替2.0       
4  株式1.0       
5  貿易1.0       
6  環境1.5       
7 交流 3.0       
8国内株式 1.1       
9 政治 0.9       
10 経済 0.8       
11 生活 0.7       
12科学新技術 1.7       
13 研究 1.6       
14 宇宙 2.1       
15エンタメテレビ 1.4       
16 ネット 2.0       
17 シネマ  3.0       
   

ソースコード

別ウィンドウで表示

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_treemap : 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分類1\t分類2\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\t0.9");
        sheet.SetClipValue(9, 0, 1, 4, "\t経済\t\t0.8");
        sheet.SetClipValue(10, 0, 1, 4, "\t生活\t\t0.7");
        sheet.SetClipValue(11, 0, 1, 4, "科学\t新技術\t\t1.7");
        sheet.SetClipValue(12, 0, 1, 4, "\t研究\t\t1.6");
        sheet.SetClipValue(13, 0, 1, 4, "\t宇宙\t\t2.1");
        sheet.SetClipValue(14, 0, 1, 4, "エンタメ\tテレビ\t\t1.4");
        sheet.SetClipValue(15, 0, 1, 4, "\tネット\t\t2.0");
        sheet.SetClipValue(16, 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.TreemapSeries), 388, 300, 242, 46);

        // データバーへの色マッピング
        FarPoint.Web.Chart.TreemapSeries treeseries = (FarPoint.Web.Chart.TreemapSeries)FpSpread1.Sheets[0].Charts[0].Model.PlotAreas[0].Series[0];
        treeseries.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);
        // データバーにあるラベルのフォント設定
        treeseries.LabelTextFont = labelFont;
        // 凡例のフォント
        FpSpread1.Sheets[0].Charts[0].Model.LegendAreas[0].TextFont = labelFont;

        // グラフタイトルを非表示
        FpSpread1.Sheets[0].Charts[0].Model.LabelAreas.Clear();
    }
}
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_treemap
    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 & "分類1" & vbTab & "分類2" & 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 & "0.9")
        sheet.SetClipValue(9, 0, 1, 4, vbTab & "経済" & vbTab & vbTab & "0.8")
        sheet.SetClipValue(10, 0, 1, 4, vbTab & "生活" & vbTab & vbTab & "0.7")
        sheet.SetClipValue(11, 0, 1, 4, "科学" & vbTab & "新技術" & vbTab & vbTab & "1.7")
        sheet.SetClipValue(12, 0, 1, 4, vbTab & "研究" & vbTab & vbTab & "1.6")
        sheet.SetClipValue(13, 0, 1, 4, vbTab & "宇宙" & vbTab & vbTab & "2.1")
        sheet.SetClipValue(14, 0, 1, 4, "エンタメ" & vbTab & "テレビ" & vbTab & vbTab & "1.4")
        sheet.SetClipValue(15, 0, 1, 4, vbTab & "ネット" & vbTab & vbTab & "2.0")
        sheet.SetClipValue(16, 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.TreemapSeries), 388, 300, 242, 46)

        ' データバーへの色マッピング
        Dim treeseries As FarPoint.Web.Chart.TreemapSeries = DirectCast(FpSpread1.Sheets(0).Charts(0).Model.PlotAreas(0).Series(0), FarPoint.Web.Chart.TreemapSeries)
        treeseries.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)
        ' データバーにあるラベルのフォント設定
        treeseries.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="treemapchart.aspx.cs" Inherits="chart_treemap" %>

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