SpreadJS 類Excel表格控制元件 - V12 新特性詳解

77rou發表於2018-11-16

我們很高興的宣佈:純前端類Excel表格控制元件 - SpreadJS 正式推出了 V12 新版本,此次的新版本中包含了諸多重量級的功能和來自客戶的新需求,如對形狀和富文字的支援,也有新增的圖表型別,還有更多在細節處的更新。

形狀(Shapes):在 SpreadJS 中根據需要新增內建或自定以的形狀

SpreadJS V12已經實現了諸多類 Excel 的內建形狀,如線條、矩形、箭頭、流程圖,可以為您的前端介面新增更多的細節展現和視覺化效果,並且這些內建的形狀都可以無縫的進行匯入匯出。


SpreadJS 類Excel表格控制元件 - V12 新特性詳解


(圖:SpreadJS V12 內建形狀)


您還可以通過 SpreadJS V12提供的新能力來自定義您所需要的形狀,並且所有的形狀屬性均可以設定為公式,這就意味著,您的形狀可以隨著資料的變化而變化,從而為您的前端介面效果帶來極大的提升。下面的例子就是利用自定形狀來實現一個保險理賠介面的例子


SpreadJS 類Excel表格控制元件 - V12 新特性詳解


(圖:SpreadJS V12 自定義形狀 - 保險理賠例項)

富文字格式(RichText Formatting):在同一個單元格中包含不同的文字格式

通過豐富的文字格式,使用者現在可以為單個單元格新增粗體,斜體,字型和所有基本格式!


SpreadJS 類Excel表格控制元件 - V12 新特性詳解


(圖:SpreadJS V12 富文字格式)

新增圖表型別:雷達圖(Radar),旭日圖(Sunburst)和樹圖(Treemap)

通過豐富的文字格式,使用者現在可以為單個單元格新增粗體,斜體,字型和所有基本格式!這些新圖表(也可在Excel中使用)具有完整的 SpreadJS 線上表格編輯器支援,您可以無縫匯入和匯出包含這些圖表的Excel檔案。

雷達圖(Radar)顯示具有任意數量變數的多變數觀測值;它通常用於表現個性特徵。


SpreadJS 類Excel表格控制元件 - V12 新特性詳解


(圖:SpreadJS v12 新增雷達圖(Radar))


旭日圖(Sunburst)展示了從根節點(中心)向外到較低層次結構的分層資料。內圓的一段是外圓的分段的父代,它位於父代的角度掃描範圍內。 旭日圖非常適合展示如何將一個類別或級別(環)分解為其所佔的大致比例。

在下面的例子中,世界人口用大陸、區域、國家來表示,並使用顏色進行區分。這樣一來,人口的分佈立即變得清晰起來:


SpreadJS 類Excel表格控制元件 - V12 新特性詳解


(圖:SpreadJS v12 新增旭日圖(Sunburst))


樹圖(Treemap)顯示結合相對數量的分層資訊。如果您的應用程式存在空間限制,並且您需要使用工作表中的表中定義的眾多實體繪製數千個資料點,則它們特別有用。

以下是用樹圖表示的世界人口圖表:


SpreadJS 類Excel表格控制元件 - V12 新特性詳解


(圖:SpreadJS v12 新增樹圖(Treemap))

新增迷你圖(Sparkline)型別:條形碼(Barcode)

通過設定迷你圖型別,您可以輕鬆的在單元格中呈現您需要的條形碼,SpreadJS v12已經支援 QRCode, EAN-13, EAN-8, Codabar, Code39, Code93, Code128, GS1_128, Code49, PDF417, DataMatrix

圖表動畫效果

藉助SpreadJS為柱狀圖,條形圖,折線圖和餅圖建立新的無縫載入和更新動畫,讓您的儀表板真正閃耀起來。


SpreadJS 類Excel表格控制元件 - V12 新特性詳解


(圖:SpreadJS v12 新增圖表動畫)

類 Excel 的精準選擇

Excel 的新功能允許使用者先選擇一個範圍,然後取消選擇特定單元格。 SpreadJS 已新增此功能。


SpreadJS 類Excel表格控制元件 - V12 新特性詳解


(圖:SpreadJS v12 新增類Excel精確選擇)


關於葡萄城

賦能開發者!葡萄城集團成立於 1980 年,是全球領先的集開發工具、商業智慧解決方案、管理系統設計工具於一身的軟體和服務提供商。西安葡萄城是其在中國的分支機構,面向全球市場提供軟體研發服務,併為中國企業的資訊化提供國際先進的開發工具、軟體和研發諮詢服務。葡萄城的控制元件和軟體產品在國內外屢獲殊榮,在全球被數十萬家企業、學校和政府機構廣泛應用。




相關文章