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

ツリーマップ

ツリーマップは、階層データを、ネストされた一連の長方形として表示します。ツリーのブランチ（枝）は長方形で表され、個々のサブブランチはさらに小さな長方形で表されます。グラフ内のさまざまな長方形には色とサイズを使い分けて、パターンを特定しやすくします。ツリーマップは、空間を効率的に使用できるという特徴もあり、大量のデータを表示する場合に便利です。
 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>