XYZ散布図チャート

SPREADでは以下の4種類のXYZ散布図チャートが提供されています。 チャートはエンドユーザーが自由に移動したりリサイズすることができます。

XYZ散布図(直線)XYZ散布図(直線とマーカー)
XYZ散布図(マーカーのみ)等高線
 ABCDEF
1      
2S1500246549300260
3 9261461501240650
4 650260700600428
5 240802601100268
   

ソースコード

別ウィンドウで表示
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class chart_xyzchart : 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.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.RowCount = 5;
        sheet.ColumnCount = 6;

        // テストデータの設定
        sheet.SetClipValue(1, 0, 1, 6, "S1\t500\t246\t549\t300\t260");
        sheet.SetClipValue(2, 1, 1, 5, "926\t146\t1501\t240\t650");
        sheet.SetClipValue(3, 1, 1, 5, "650\t260\t700\t600\t428");
        sheet.SetClipValue(4, 1, 1, 5, "240\t80\t260\t1100\t268");

        // シリーズを作成
        FarPoint.Web.Chart.XYZSurfaceSeries series1 = new FarPoint.Web.Chart.XYZSurfaceSeries();
        series1.SeriesName = "s1";

        FarPoint.Web.Chart.DoubleCollection doubleCollection1 = new FarPoint.Web.Chart.DoubleCollection();
        FarPoint.Web.Chart.DoubleCollection doubleCollection2 = new FarPoint.Web.Chart.DoubleCollection();
        FarPoint.Web.Chart.DoubleCollection doubleCollection3 = new FarPoint.Web.Chart.DoubleCollection();
        FarPoint.Web.Chart.DoubleCollection doubleCollection4 = new FarPoint.Web.Chart.DoubleCollection();
        series1.SeriesNameDataSource = new FarPoint.Web.Spread.Chart.SeriesDataField(this.FpSpread1, "DataFieldSeriesName", "Sheet1!$A$2:$A$2", FarPoint.Web.Spread.Chart.SegmentDataType.Text, new FarPoint.Web.Spread.Chart.ChartDataSetting(FarPoint.Web.Spread.Chart.EmptyValueStyle.Zero, false));
        doubleCollection1.DataField = "";
        doubleCollection1.DataSource = new FarPoint.Web.Spread.Chart.SeriesDataField(this.FpSpread1, "DataFieldValue0", "Sheet1!$B$2:$F$2", FarPoint.Web.Spread.Chart.SegmentDataType.Number, new FarPoint.Web.Spread.Chart.ChartDataSetting(FarPoint.Web.Spread.Chart.EmptyValueStyle.Zero, false));
        series1.Values.Add(doubleCollection1);
        doubleCollection2.DataField = "";
        doubleCollection2.DataSource = new FarPoint.Web.Spread.Chart.SeriesDataField(this.FpSpread1, "DataFieldValue1", "Sheet1!$B$3:$F$3", FarPoint.Web.Spread.Chart.SegmentDataType.Number, new FarPoint.Web.Spread.Chart.ChartDataSetting(FarPoint.Web.Spread.Chart.EmptyValueStyle.Zero, false));
        series1.Values.Add(doubleCollection2);
        doubleCollection3.DataField = "";
        doubleCollection3.DataSource = new FarPoint.Web.Spread.Chart.SeriesDataField(this.FpSpread1, "DataFieldValue2", "Sheet1!$B$4:$F$4", FarPoint.Web.Spread.Chart.SegmentDataType.Number, new FarPoint.Web.Spread.Chart.ChartDataSetting(FarPoint.Web.Spread.Chart.EmptyValueStyle.Zero, false));
        series1.Values.Add(doubleCollection3);
        doubleCollection4.DataField = "";
        doubleCollection4.DataSource = new FarPoint.Web.Spread.Chart.SeriesDataField(this.FpSpread1, "DataFieldValue3", "Sheet1!$B$5:$F$5", FarPoint.Web.Spread.Chart.SegmentDataType.Number, new FarPoint.Web.Spread.Chart.ChartDataSetting(FarPoint.Web.Spread.Chart.EmptyValueStyle.Zero, false));
        series1.Values.Add(doubleCollection4);

        // プロット領域を作成します
        FarPoint.Web.Chart.XYZPlotArea plotArea = new FarPoint.Web.Chart.XYZPlotArea();
        plotArea.Location = new System.Drawing.PointF(0.2f, 0.2f);
        plotArea.Size = new System.Drawing.SizeF(0.5f, 0.5f);
        plotArea.Elevation = 18;
        plotArea.Rotation = -24;
        plotArea.Series.AddRange(new FarPoint.Web.Chart.Series[] { series1 });

        // チャートモデルに各情報を追加します
        FarPoint.Web.Chart.ChartModel model = new FarPoint.Web.Chart.ChartModel();
        model.PlotAreas.Add(plotArea);

        // SPREADチャートにチャートモデルを設定します
        FarPoint.Web.Spread.Chart.SpreadChart chart = new FarPoint.Web.Spread.Chart.SpreadChart();
        chart.Height = 300;
        chart.Width = 400;
        chart.Left = 50;
        chart.Top = 120;
        chart.ViewType = FarPoint.Web.Chart.ChartViewType.View3D;
        chart.Model = model;

        sheet.Charts.Add(chart);
    }
}

Partial Class chart_xyzchart
    Inherits System.Web.UI.Page

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        If IsPostBack Then
            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.RowCount = 5
        sheet.ColumnCount = 6

        ' テストデータの設定
        sheet.SetClipValue(1, 0, 1, 6, "S1" & vbTab & "500" & vbTab & "246" & vbTab & "549" & vbTab & "300" & vbTab & "260")
        sheet.SetClipValue(2, 1, 1, 5, "926" & vbTab & "146" & vbTab & "1501" & vbTab & "240" & vbTab & "650")
        sheet.SetClipValue(3, 1, 1, 5, "650" & vbTab & "260" & vbTab & "700" & vbTab & "600" & vbTab & "428")
        sheet.SetClipValue(4, 1, 1, 5, "240" & vbTab & "80" & vbTab & "260" & vbTab & "1100" & vbTab & "268")

        ' シリーズを作成
        Dim series1 As New FarPoint.Web.Chart.XYZSurfaceSeries()
        series1.SeriesName = "s1"

        Dim doubleCollection1 As New FarPoint.Web.Chart.DoubleCollection()
        Dim doubleCollection2 As New FarPoint.Web.Chart.DoubleCollection()
        Dim doubleCollection3 As New FarPoint.Web.Chart.DoubleCollection()
        Dim doubleCollection4 As New FarPoint.Web.Chart.DoubleCollection()
        series1.SeriesNameDataSource = New FarPoint.Web.Spread.Chart.SeriesDataField(Me.FpSpread1, "DataFieldSeriesName", "Sheet1!$A$2:$A$2", FarPoint.Web.Spread.Chart.SegmentDataType.Text, New FarPoint.Web.Spread.Chart.ChartDataSetting(FarPoint.Web.Spread.Chart.EmptyValueStyle.Zero, False))
        doubleCollection1.DataField = ""
        doubleCollection1.DataSource = New FarPoint.Web.Spread.Chart.SeriesDataField(Me.FpSpread1, "DataFieldValue0", "Sheet1!$B$2:$F$2", FarPoint.Web.Spread.Chart.SegmentDataType.Number, New FarPoint.Web.Spread.Chart.ChartDataSetting(FarPoint.Web.Spread.Chart.EmptyValueStyle.Zero, False))
        series1.Values.Add(doubleCollection1)
        doubleCollection2.DataField = ""
        doubleCollection2.DataSource = New FarPoint.Web.Spread.Chart.SeriesDataField(Me.FpSpread1, "DataFieldValue1", "Sheet1!$B$3:$F$3", FarPoint.Web.Spread.Chart.SegmentDataType.Number, New FarPoint.Web.Spread.Chart.ChartDataSetting(FarPoint.Web.Spread.Chart.EmptyValueStyle.Zero, False))
        series1.Values.Add(doubleCollection2)
        doubleCollection3.DataField = ""
        doubleCollection3.DataSource = New FarPoint.Web.Spread.Chart.SeriesDataField(Me.FpSpread1, "DataFieldValue2", "Sheet1!$B$4:$F$4", FarPoint.Web.Spread.Chart.SegmentDataType.Number, New FarPoint.Web.Spread.Chart.ChartDataSetting(FarPoint.Web.Spread.Chart.EmptyValueStyle.Zero, False))
        series1.Values.Add(doubleCollection3)
        doubleCollection4.DataField = ""
        doubleCollection4.DataSource = New FarPoint.Web.Spread.Chart.SeriesDataField(Me.FpSpread1, "DataFieldValue3", "Sheet1!$B$5:$F$5", FarPoint.Web.Spread.Chart.SegmentDataType.Number, New FarPoint.Web.Spread.Chart.ChartDataSetting(FarPoint.Web.Spread.Chart.EmptyValueStyle.Zero, False))
        series1.Values.Add(doubleCollection4)

        ' プロット領域を作成します
        Dim plotArea As New FarPoint.Web.Chart.XYZPlotArea()
        plotArea.Location = New System.Drawing.PointF(0.2F, 0.2F)
        plotArea.Size = New System.Drawing.SizeF(0.5F, 0.5F)
        plotArea.Elevation = 18
        plotArea.Rotation = -24
        plotArea.Series.AddRange(New FarPoint.Web.Chart.Series() {series1})

        ' チャートモデルに各情報を追加します
        Dim model As New FarPoint.Web.Chart.ChartModel()
        model.PlotAreas.Add(plotArea)

        ' SPREADチャートにチャートモデルを設定します
        Dim chart As New FarPoint.Web.Spread.Chart.SpreadChart()
        chart.Height = 300
        chart.Width = 400
        chart.Left = 50
        chart.Top = 120
        chart.ViewType = FarPoint.Web.Chart.ChartViewType.View3D
        chart.Model = model

        sheet.Charts.Add(chart)
    End Sub
End Class
<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="xyzchart.aspx.cs" Inherits="chart_xyzchart" %>

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