點擊獲取SpreadJS v15.0正式版下載

使用SpreadJS的形狀功能，需引用：

<script src='.../spreadjs/plugins/gc.spread.sheets.shapes.x.xx.xxxxx.x.min.js' type='text/javascript'></script>

SpreadJS三種形狀：

1. 基礎形狀 sheet.shapes.add()  ,SpreadJS提供182種類型的基礎形狀；

2. 線條形狀  sheet.shapes.addConnector()：

• Straight
• Elbow

3. 組合形狀 sheet.shapes.group([shape1,shape2])。

可設置的屬性：

填充色、邊框寬度、邊框顏色、填充文字、文字的居中情況、字體、字體色、背景透明度、線條的類型、線條形狀的箭頭等等。可設定一個形狀是否可被選中、可放大縮小、可被移動。

形狀組合

讓單個的形狀成為一組，可以一起被選中、放大縮小、旋轉。

// 組合形狀
sheet.shapes.group([shape1,shape2])；
//取消組合形狀
var groupShape = sheet.shapes.group(shapes)
sheet.shapes.ungroup(groupShape);

示例中選擇幾個形狀，點擊組合按鈕，可以使選中形狀成為一組，選中組合的形狀點擊取消組合可以使選中的組合形狀取消先前的組合。

自定義形狀

如示例中左下角的桃心，為自定義的一個圖形。

形狀與公式

修改示例中G14-G20單元格的內容，可對應修改左邊的圖形顯示：

SpreadJS | 下載試用

純前端表格控件SpreadJS，兼容 450 種以上的 Excel 公式，具備“高性能、跨平臺、與 Excel 高度兼容”的產品特性，備受華為、蘇寧易購、天弘基金等行業龍頭企業的青睞，并被中國軟件行業協會認定為“中國優秀軟件產品”。SpreadJS 可為用戶提供類 Excel 的功能，滿足表格文檔協同編輯、 數據填報、 類 Excel 報表設計等業務場景需求，極大的降低企業研發成本和項目交付風險。

本文轉載自