SPREAD for ASP.NETデモアプリケーション

現在位置 : ホーム > 製品情報 > SPREAD for ASP.NET製品仕様 > デモアプリケーショントップ > チャート > チャートマップエリア

デモアプリケーショントップ

新機能

チャートマップエリア

HTMLでは、img要素、map要素、area要素を組み合わせることで、イメージマップを設定することができます。イメージマップとは、1つの画像内に複数のリンク先を設定できる機能のことです。
SPREADでは、チャートの要素をそれぞれ識別するために、イメージマップ機能が利用されます。以下のサンプルでは、棒グラフのシリーズにマウスカーソルを移動することでツールチップが表示され、クリックすることでクリックしたシリーズの詳細がアラートで表示されます。

	A	B	C	D	E
1		Q1	Q2	Q3	Q4
2	北海道	12	15	9	13
3	新潟	8	12	16	12
4	大阪	13	14	13	13
5	福岡	15	12	16	15

ソースコード

C#
VB
ASPX

別ウィンドウで表示

using System;
using System.Web.UI.WebControls;

public partial class sheet_chartmaparea : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (IsPostBack)
        {
            FarPoint.Web.Spread.Chart.SpreadChart chart = FpSpread1.Sheets[0].Charts[0];
            chart.BeforeRenderMapAreas += new FarPoint.Web.Chart.BeforeRenderMapAreasHandler(chart_BeforeRenderMapAreas); 
            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.DefaultStyle.Font.Size = FontUnit.Parse("80%");
        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.DefaultStyle.VerticalAlign = VerticalAlign.Middle;

        // テストデータの設定
        sheet.RowCount = 5;
        sheet.ColumnCount = 5;
        sheet.Cells[0, 1].Value = "Q1";
        sheet.Cells[0, 2].Value = "Q2";
        sheet.Cells[0, 3].Value = "Q3";
        sheet.Cells[0, 4].Value = "Q4";

        sheet.Cells[1, 0].Value = "北海道";
        sheet.Cells[2, 0].Value = "新潟";
        sheet.Cells[3, 0].Value = "大阪";
        sheet.Cells[4, 0].Value = "福岡";

        sheet.Cells[1, 1].Value = 12;
        sheet.Cells[1, 2].Value = 15;
        sheet.Cells[1, 3].Value = 9;
        sheet.Cells[1, 4].Value = 13;

        sheet.Cells[2, 1].Value = 8;
        sheet.Cells[2, 2].Value = 12;
        sheet.Cells[2, 3].Value = 16;
        sheet.Cells[2, 4].Value = 12;

        sheet.Cells[3, 1].Value = 13;
        sheet.Cells[3, 2].Value = 14;
        sheet.Cells[3, 3].Value = 13;
        sheet.Cells[3, 4].Value = 13;

        sheet.Cells[4, 1].Value = 15;
        sheet.Cells[4, 2].Value = 12;
        sheet.Cells[4, 3].Value = 16;
        sheet.Cells[4, 4].Value = 15;

        // チャートの追加
        FarPoint.Web.Spread.Chart.SpreadChart chart = sheet.AddChart(new FarPoint.Web.Spread.Model.CellRange(0, 0, 5, 5), typeof(FarPoint.Web.Chart.ClusteredBarSeries), 480, 300, 40, 120);
        
        // マップエリアを有効化
        chart.RenderMapArea = true;
        
        // ツールチップの表示
        chart.AutoGenerateMapAreaToolTip = true;

        // マップエリアの設定
        chart.BeforeRenderMapAreas += new FarPoint.Web.Chart.BeforeRenderMapAreasHandler(chart_BeforeRenderMapAreas); 
    }

    void chart_BeforeRenderMapAreas(object sender, FarPoint.Web.Chart.BeforeRenderMapAreasEventArgs e)
    {
        // クライアントスクリプトを表示
        string scriptFormat = "showHitTestInfo('{0}','{1}','{2}');";
        foreach (FarPoint.Web.Chart.MapArea item in e.MapAreas)
        {
            FarPoint.Web.Chart.SeriesHitTest ht = FpSpread1.Sheets[0].Charts[0].HitTest(FarPoint.Web.Chart.MapAreaInfo.Parse(item.MapAreaInfo)) as FarPoint.Web.Chart.SeriesHitTest;
            if (ht != null)
            {
                string script = string.Format(scriptFormat, ht.Series.SeriesName, ((FarPoint.Web.Chart.BarSeries)ht.Series).CategoryNames[ht.PointIndex], ((FarPoint.Web.Chart.BarSeries)ht.Series).Values[ht.PointIndex]);
                item.Attributes.Add("onclick", script); 
            }
        }
    }
}


Partial Class chart_chartmaparea
    Inherits System.Web.UI.Page

    Private WithEvents spchart As FarPoint.Web.Spread.Chart.SpreadChart

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        If IsPostBack Then
            spchart = FpSpread1.Sheets(0).Charts(0)
            Return
        End If

        ' SPREADの設定
        InitSpread(FpSpread1)

        ' シート設定
        InitSpreadStyles(FpSpread1.Sheets(0))
    End Sub

    Private Sub InitSpread(ByVal spread As FarPoint.Web.Spread.FpSpread)
        spread.CssClass = "spreadStyle2"
        spread.UseClipboard = False
    End Sub

    Private Sub InitSpreadStyles(ByVal sheet As FarPoint.Web.Spread.SheetView)
        ' フォントサイズの設定
        sheet.DefaultStyle.Font.Size = FontUnit.Parse("80%")
        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.DefaultStyle.VerticalAlign = VerticalAlign.Middle

        ' テストデータの設定
        sheet.RowCount = 5
        sheet.ColumnCount = 5
        sheet.Cells(0, 1).Value = "Q1"
        sheet.Cells(0, 2).Value = "Q2"
        sheet.Cells(0, 3).Value = "Q3"
        sheet.Cells(0, 4).Value = "Q4"

        sheet.Cells(1, 0).Value = "北海道"
        sheet.Cells(2, 0).Value = "新潟"
        sheet.Cells(3, 0).Value = "大阪"
        sheet.Cells(4, 0).Value = "福岡"

        sheet.Cells(1, 1).Value = 12
        sheet.Cells(1, 2).Value = 15
        sheet.Cells(1, 3).Value = 9
        sheet.Cells(1, 4).Value = 13

        sheet.Cells(2, 1).Value = 8
        sheet.Cells(2, 2).Value = 12
        sheet.Cells(2, 3).Value = 16
        sheet.Cells(2, 4).Value = 12

        sheet.Cells(3, 1).Value = 13
        sheet.Cells(3, 2).Value = 14
        sheet.Cells(3, 3).Value = 13
        sheet.Cells(3, 4).Value = 13

        sheet.Cells(4, 1).Value = 15
        sheet.Cells(4, 2).Value = 12
        sheet.Cells(4, 3).Value = 16
        sheet.Cells(4, 4).Value = 15

        ' チャートの追加
        spchart = sheet.AddChart(New FarPoint.Web.Spread.Model.CellRange(0, 0, 5, 5), GetType(FarPoint.Web.Chart.ClusteredBarSeries), 480, 300, 40, 120)

        ' マップエリアを有効化
        spchart.RenderMapArea = True

        ' ツールチップの表示
        spchart.AutoGenerateMapAreaToolTip = True
    End Sub


    Protected Sub spchart_BeforeRenderMapAreas(ByVal sender As Object, ByVal e As FarPoint.Web.Chart.BeforeRenderMapAreasEventArgs) Handles spchart.BeforeRenderMapAreas
        ' クライアントスクリプトを表示
        Dim scriptFormat As String = "showHitTestInfo('{0}','{1}','{2}');"
        For Each item As FarPoint.Web.Chart.MapArea In e.MapAreas
            Dim ht As FarPoint.Web.Chart.SeriesHitTest = TryCast(FpSpread1.Sheets(0).Charts(0).HitTest(FarPoint.Web.Chart.MapAreaInfo.Parse(item.MapAreaInfo)), FarPoint.Web.Chart.SeriesHitTest)
            If ht IsNot Nothing Then
                Dim script As String = String.Format(scriptFormat, ht.Series.SeriesName, DirectCast(ht.Series, FarPoint.Web.Chart.BarSeries).CategoryNames(ht.PointIndex), DirectCast(ht.Series, FarPoint.Web.Chart.BarSeries).Values(ht.PointIndex))
                item.Attributes.Add("onclick", script)
            End If
        Next
    End Sub
End Class

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

<%@ Register Assembly="FarPoint.Web.SpreadJ" Namespace="FarPoint.Web.Spread" TagPrefix="FarPoint" %>

<asp:Content ID="Content1" ContentPlaceHolderID="HeaderPlaceHolder1" runat="Server">
<script type="text/javascript">
    function showHitTestInfo(seriesName, category, value) {
        alert("系列： " + seriesName + "、ポイント： " + category + "、値： " + value + "をクリックしました");
    }
</script>
</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>

このページの先頭へ戻る