SpreadJS 类 Excel 表格控件v12版本为您带来了一个重要的功能增强：形状！该新功能由内置和自定义形状组成，使您能够使用数据驱动的图形，流程图，甘特图，注释以及所有形状，来增强您的电子表格和应用程序。

  • 内置形状
  • 使用代码添加形状
  • 在设计器中使用形状（视频）
  • 使用自定义形状

在SpreadJS应用中使用内置的类Excel形状

使用内置形状，您可以无缝导入和导出Excel工作簿，导入导出不会带来任何功能损失。60 多种内置形状包括基本形状，箭头，气球和动作按钮。您可以轻松构建图表和仪表板。

以下是 Spread JS V12中可以使用的所有形状：

SpreadJS v12中内置的形状

在代码中为SpreadJS应用添加形状

您可以使用代码轻松地添加内置形状，只需要调用一个方法：

var heart = sheet.shapes.add('autoShape', GC.Spread.Sheets.Shapes.AutoShapeType.heart, 100, 50, 100, 150)

您还可以使用形状样式API配置形状的填充颜色，边框和文本：

heart.text('My Shape');
var heartStyle = heart.style();
heartStyle.fill.color = 'pink';
heartStyle.fill.transparency = 0.5;
heartStyle.line.color = 'green';
heartStyle.line.lineStyle = GC.Spread.Sheets.Shapes.PresetLineDashStyle.dashDot;
heartStyle.line.width = 5;
heartStyle.line.capType = GC.Spread.Sheets.Shapes.LineCapStyle.square;
heartStyle.line.joinType = GC.Spread.Sheets.Shapes.LineJoinStyle.miter;
heartStyle.line.transparency = 0.5;
heartStyle.textEffect.font = 'bold 15px Georgia';
heartStyle.textEffect.color = 'yellow';
heartStyle.textEffect.transparency = 0.5;
heartStyle.textFrame.vAlign = GC.Spread.Sheets.VerticalAlign.center;
heartStyle.textFrame.hAlign = GC.Spread.Sheets.HorizontalAlign.center;
heart.style(heartStyle);

在SpreadJS 设计器中添加形状

使用Spread向工作簿添加形状的最简单方法是使用设计器。在设计器的“插入”选项卡中，您将找到一个新的“形状”下拉列表，其中显示了所有可用的形状：

在设计器中添加形状

要添加形状，只需单击所需的形状，它就会显示在工作表中，之后您就可以在界面中对它进行自定义操作了。

当您在工作表上选中形状时，将打开“设计”选项卡，显示出可以为该形状设置的不同属性，包括样式，旋转和大小。您还可以在不丢失设置属性的情况下更改形状，这意味着您可以随时轻松地更新图表。

创建数据驱动的自定义形状

最令人兴奋的功能是您可以创建自己的自定义形状。这使SpreadJS超越了传统的电子表格：现在可以创建更高级的图表和应用程序。这包括座位表，机器/电子状态监控，利润分析和组织结构图等等。

自定义形状的强大功能之一是能够从数据生成它们。与图表类似，自定义形状属性可以由特定数据驱动，且无论是在代码中定义还是在工作簿中定义为单元格范围的引用，都可以实现与数据的联动。这允许用户轻松导入数据，并以开发人员定义的图表和仪表板的形式为他们创建形状。

一个完美的例子是我们的汽车保险定损单示例，在该示例中，数据位于单独的工作表中，图表中的形状使用该工作表中的数据定义：

数据驱动形状

虽然设计器没有自定义形状菜单，但可以通过代码定义它们。以这种方式，您可以定义具有不同属性的模型，然后在添加时将该模型应用于形状：

var shapeModel = {
    left: "=Sheet1!B7",
    top: "=Sheet1!C7",
    width: "=Sheet1!D7",
    height: "=Sheet1!E7",
    options: {
        fill: {
            type: 1,
            color: startColor,
            transparency: "0.5"
        }
    },
    path: [
        [
            ["A", 100,75,40,0,2*Math.PI],
            ["Z"]
        ]
    ]
};

sheet.shapes.add('MyShape', shapeModel);

使用 SpreadJS 形状可以完成的工作比我们在这里介绍的要多得多。通过这些升级的功能，SpreadJS 可以更好地适应更多类型的应用程序，证明 SpreadJS 不仅仅是一个电子表格。以下是一些想法：

  • 创建一个可视化的交互式平面图，允许用户查看谁坐在桌子上，或添加有关设施的信息。
  • 为制造工厂创建生产平面图，并突出显示效率降低或发生问题的区域。
  • 创建甘特图、流程图和组织结构图等，并随数据的变化联动显示。