SpreadJS 文档
SpreadJS 文档 / 开发者指南 / 特性 / 管理数据可视化和对象 / 形状 / 内置形状
在本主题中
    内置形状
    在本主题中

    SpreadJS提供了对向工作表中添加一百八十二种内置形状的支持。 用户还可以移动,调整大小,旋转或删除工作表中插入的形状。

    您可以选择多种内置形状,并将任何类型的图形对象(包括线条,矩形,方块箭头,方程形状,流程图,星形,横幅和标注等)嵌入工作表中,方法是使用SpreadJS设计器中的插入标签或通过代码。

    使用 SpreadJS Designer 插入形状时,您会看到 Shape菜单,如下面共享的截图所示。 使用此菜单,您可以根据需要插入任何类型的图形对象。 添加内置形状后,您还可以通过设置其文本,颜色和样式的格式对其进行自定义。     

    下面共享的是一个截图,它描述了一个内置形状-添加到表单中的“圆环图”。

    示例代码

    本示例说明如何使用代码在工作表中添加内置形状。

    JavaScript
    复制代码
    // Adding built-in shape "Donut" in the worksheet
    window.onload = function ()
    {
    var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
    var sheet = spread.getActiveSheet();
    // Add built-in shape "donut"
    var donutShape = sheet.shapes.add('autoShape',GC.Spread.Sheets.Shapes.AutoShapeType.donut,100,50,150,150);          
    // Adding text to built-in shape "donut"
    donutShape.text("Donut Shape");
    // Adding style to built-in shape "donut"
    var shapeStyle = donutShape.style();
    shapeStyle.textEffect.color = "Red";
    shapeStyle.textEffect.font = "18px Arial";
    shapeStyle.textFrame.hAlign = GC.Spread.Sheets.HorizontalAlign.center;
    shapeStyle.textFrame.vAlign = GC.Spread.Sheets.VerticalAlign.center;
    donutShape.style(shapeStyle);
    };
    

    注意:集成内置形状时,SpreadJS不支持以下方案:

    • 形状文本仅支持:水平方向,水平和垂直文本对齐,纯色填充,字体(名称和大小)和边距等。
    • 形状类型为HotTest的功能:形状边界超出限制的标注不完全受支持。 因此,用户无法通过单击超出形状限制的零件来选择形状。