プロパティリンクによるシェイプ

SpreadJSでは、数式を使用することによりシェイプのプロパティをワークシートのセルに連結できます。セルの内容が変更されると、連結しているシェイプに参照されているプロパティも動的に更新されます。

setFormulaメソッドは、シェイププロパティのテキスト、高さ、幅、参照される数式など文字列パラメータを受け入れます。これで、シェイププロパティが数式文字列に応じて値に連結されます。

SpreadJSは、シェイプまたはテキストボックスを参照する数式を含むExcelのインポート・エクスポートに対応し、シェイプと参照されるセルに接続するリンクも保持します。

メモ： SpreadJSは、APIを介してセルデータをリンクテキストまたは通常のテキストのいずれかにのみ設定できます。

使用例

DyeStuff化学工業が毎年副産物として化学廃水を生成する使用例を見てみましょう。化学廃水の量を円柱の高さに動的にリンクすることにより、シェイプを使用して情報を視覚的に表示できます。

次のサンプルコードは、円柱とそれに該当するセルの間にリンクを追加する方法を示しています。すべてのセルは、生成された廃水の量を強調するために円柱の高さを参照します。

JavaScript	コードのコピー
spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss'), { sheetCount: 1 }); var sheet = spread.getSheet(0); sheet.name("BuildInShape"); sheet.setArray(0, 0, [ ["DyeStuff化学工業の化学廃水分析"], ["化学廃水／年", "百万リットル"], [2017, 8.1], [2018, 9.5], [2019, 10.2], [2020, 11], [2021, 11.6] ]); var shape1 = sheet.shapes.add("shape1", GC.Spread.Sheets.Shapes.AutoShapeType.can, 150, 100, 70, 50); shape1.setFormula("height", "=BuildInShape!B315"); shape1.setFormula("text", "=BuildInShape!A3"); shape1.setFormula("y", "=221.5-BuildInShape!B315"); var shape2 = sheet.shapes.add("shape2", GC.Spread.Sheets.Shapes.AutoShapeType.can, 230, 78, 70, 50); shape2.setFormula("height", "=BuildInShape!B415"); shape2.setFormula("text", "=BuildInShape!A4"); shape2.setFormula("y", "=221.5-BuildInShape!B415"); var shape3 = sheet.shapes.add("shape3", GC.Spread.Sheets.Shapes.AutoShapeType.can, 310, 65, 70, 50); shape3.setFormula("height", "=BuildInShape!B515"); shape3.setFormula("text", "=BuildInShape!A5"); shape3.setFormula("y", "=221.5-BuildInShape!B515"); var shape4 = sheet.shapes.add("shape4", GC.Spread.Sheets.Shapes.AutoShapeType.can, 390, 52, 70, 50); shape4.setFormula("height", "=BuildInShape!B615"); shape4.setFormula("text", "=BuildInShape!A6"); shape4.setFormula("y", "=221.5-BuildInShape!B615"); var shape5 = sheet.shapes.add("shape5", GC.Spread.Sheets.Shapes.AutoShapeType.can, 470, 40, 70, 50); shape5.setFormula("height", "=BuildInShape!B715"); shape5.setFormula("text", "=BuildInShape!A7"); shape5.setFormula("y", "=221.5-BuildInShape!B715");

JavaScript

コードのコピー

spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss'), { sheetCount: 1 });
var sheet = spread.getSheet(0);
sheet.name("BuildInShape");
sheet.setArray(0, 0, [
    ["DyeStuff化学工業の化学廃水分析"],
    ["化学廃水／年", "百万リットル"],
    [2017, 8.1],
    [2018, 9.5],
    [2019, 10.2],
    [2020, 11],
    [2021, 11.6]
]);

var shape1 = sheet.shapes.add("shape1", GC.Spread.Sheets.Shapes.AutoShapeType.can, 150, 100, 70, 50);
shape1.setFormula("height", "=BuildInShape!B3*15");
shape1.setFormula("text", "=BuildInShape!A3");
shape1.setFormula("y", "=221.5-BuildInShape!B3*15");

var shape2 = sheet.shapes.add("shape2", GC.Spread.Sheets.Shapes.AutoShapeType.can, 230, 78, 70, 50);
shape2.setFormula("height", "=BuildInShape!B4*15");
shape2.setFormula("text", "=BuildInShape!A4");
shape2.setFormula("y", "=221.5-BuildInShape!B4*15");

var shape3 = sheet.shapes.add("shape3", GC.Spread.Sheets.Shapes.AutoShapeType.can, 310, 65, 70, 50);
shape3.setFormula("height", "=BuildInShape!B5*15");
shape3.setFormula("text", "=BuildInShape!A5");
shape3.setFormula("y", "=221.5-BuildInShape!B5*15");

var shape4 = sheet.shapes.add("shape4", GC.Spread.Sheets.Shapes.AutoShapeType.can, 390, 52, 70, 50);
shape4.setFormula("height", "=BuildInShape!B6*15");
shape4.setFormula("text", "=BuildInShape!A6");
shape4.setFormula("y", "=221.5-BuildInShape!B6*15");

var shape5 = sheet.shapes.add("shape5", GC.Spread.Sheets.Shapes.AutoShapeType.can, 470, 40, 70, 50);
shape5.setFormula("height", "=BuildInShape!B7*15");
shape5.setFormula("text", "=BuildInShape!A7");
shape5.setFormula("y", "=221.5-BuildInShape!B7*15");