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 不仅仅是一个电子表格。以下是一些想法:

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

SpreadJS | 下载试用

纯前端表格控件SpreadJS,是市面上布局与功能都与 Excel 高度类似的一款表格控件,全中文操作界面,适用于.NET、Java、移动端等多个平台的类 Excel 数据开发,备受华为、中通、民航飞行学院、浪潮等国内知名企业客户青睐。

您对SpreadJS产品的任何技术问题,都有技术支持工程师提供1对1专业解答,点击此处即可发帖提问>>技术支持论坛