前言
在現代工作環境中，信息的處理和管理是至關重要的。表格是一種常見的數據呈現和整理工具，被廣泛應用於各行各業。然而，隨着技術的不斷髮展，市場對錶格控件的需求也越來越高。隨着工作效率的重要性日益凸顯，一款高效的表格控件成爲了開發者們的首選，因此本文小編將從葡萄城公司的純前端表格控件——SpreadJS的視角出發，爲大家介紹如何充分利用這一控件來提升開發效率和用戶體驗。
1.快速構建表格應用
作爲一款具有高性能的純前端表格組件，SpreadJS基於其本身強大的表格能力，在DataManager數據關係引擎的助力下，使得用戶在全新的表格插件下讓數據錄入有了全新的能力和體驗，快速完成數據錄入。
在設計器方面，SpreadJS擁有一套完整的可視化操作界面。通過拖拉拽的方式就可以實現數據的綁定和模板樣式的設計，無需代碼，業務人員也可以輕鬆上手操作。
性能方面，在瀏覽器端，SpreadJS在2.4秒內可以完成10萬行×6 列的分組交叉統計數據加載（不包含數據傳輸）
最後，在導入導出方面，SpreadJS支持使用Excel和CSV文件作爲模板，用戶可以直接將本地的文件導入到系統中進行修改，修改完成之後再進行導出。
使用SpreadJS構建資產負債表的步驟
（1）打開SpreadJS在線表格編輯器。
（2）導入現有模板或新建一個空白工作表。
（3）在設計器中使用拖拉拽的方式設計一個資產負債表模板。
（4）將設計完成的模板導出，可以導出爲Excel、CSV、PDF文件。
2.內置多樣化的數據展示方式
圖表作爲一種視覺化工具，在數據分析和可視化中起着重要的作用。它能夠將複雜的數據和信息以直觀且易於理解的方式呈現出來，幫助人們更好地理解數據的趨勢、關係和模式。通過使用各種圖表類型，如折線圖、柱狀圖、餅圖等，可以將數據轉化爲可視化的形式，使得數據更具可讀性和可比性。同樣的，在SpreadJS當中，也支持圖表：
（1）柱形圖
作爲數據分析中最常用的圖表類型之一，柱形圖可以直觀地展示數據的變化趨勢和比較不同數據之間的差異。
（2）折線圖
折線圖（Line Chart）是一種常見的統計圖表，用於展示數據隨時間或其他連續變量的變化趨勢。它通過連接數據點的直線來顯示數據的變化情況，可以清晰地展示數據的趨勢和波動。
（3）餅形圖
餅形圖（Pie Chart）是一種常見的統計圖表，用於展示數據的相對比例和組成關係。它以一個圓形爲基礎，將數據按照比例劃分成不同的扇形區域，每個扇形區域的面積表示該數據所佔的比例。
除了上述會用到的圖表之外，還有一些基於以上三種圖表的衍生圖表也很有可能在工作中會用到：
（1）瀑布圖表
瀑布圖表是基於柱形圖表衍生出來的一種新型圖表，該圖表將運行總計顯示爲添加或減去的值，這些值排列爲具有正值和負值的列，並通過顏色編碼來區分兩者。初始列和最終列通常與水平軸對齊，而中間值通常是浮動列。
（2）平滑線格式折線圖
和普通的折線圖不同的是，平滑線格式折線圖通過使用曲線來連接數據點，而不是直線，以呈現數據的趨勢和變化。
除此之外，SpreadJS還支持使用多選插入圖表。除了選擇連續的數據區域之外，還可以按 Ctrl 鍵選擇多個不連續的區域來創建圖表。也可以通過在每個範圍之間放置逗號來在代碼中指定多個範圍：
sheet.charts.add("chart1", GC.Spread.Sheets.Charts.ChartType.columnClustered, 0, 100, 400, 300, "Sheet1!$A$1:$C$4,Sheet1!$E$3:$G$3,Sheet2!$A$1:$A$3");
使用SpreadJS圖表美化資產負債表
第一步（快速構建表格應用）中小編使用SpreadJS設計器創建了一個資產負債表，下面介紹如何在資產負債表中增加一個柱形圖來美化圖表：
（1）打開SpreadJS在線表格編輯器。
（2）選擇需要用圖表展示的數據（區域一），然後選擇【插入】->【圖表】->【柱形圖】即可，餅狀圖和條形圖的操作方法與柱形圖一致，如下圖所示，展示的就是資產負債表中流動負債的不同項目（短期借款、交易性金融負債等）的期末餘額柱形圖。
3.高效的數據分析
除了上面講過的這些圖表外，SpreadJS還支持下列數據分析工具：
1）集算表
集算表（Consolidation Table）是一種數據處理的方法，用於將多個數據表或數據源中的數據合併、彙總和計算，從而生成一個綜合的數據報表。
通過使用集算表，可以將多個數據表或數據源中的數據按照指定的規則進行合併和彙總。這些規則可以是簡單地求和、平均值等統計函數，也可以是自定義的計算公式。集算表通常以表格的形式呈現，其中行和列代表不同的數據表或數據源，而交叉點處的數值則表示相應的彙總或計算結果。
SpreadJS中的集算表支持從數據源添加字段，新版本還支持具有公式數據類型的虛擬列。之後可以在集算表的視圖中使用這些公式列來顯示運行總和或股票價值比率等內容：
除此之外，SpreadJS的集算表可以根據特定條件重新計算數據，在輸入新值時清理數據，或爲列提供默認值。以下是觸發公式的一些示例：
var table = dataManager.addTable("Table", {
schema: {
columns: {
createdDate: {
dataType: "Date",
trigger: {
when: "onNew", <<------- apply the formula on created
formula: "=NOW()", <<------- trigger formula to set current time
// fields: "*" <<------- when triggered on new, there is no need to specify the affected fields
},
},
updatedDate: {
dataType: "Date",
trigger: {
when: "onNewAndUpdate", <<------- apply the formula on created and updated
formula: "=NOW()", <<------- trigger formula to set current time
fields: "*" <<------- all fields changed will have the formula applied to them
},
},
label: {
trigger: {
when: "onNewAndUpdate", <<------- apply the formula on updated
formula: "=UPPER([@label])" <<------- use the upper formula on the input text of the label field
fields: "label", <<------- when the current column value is updated the formula will be applied
},
},
amount: {
dataType: "number",
trigger: {
when: "onNewAndUpdate", <<------- apply the formula on updated
formula: "=[@price] * [@quantity]" <<------- automatically evaluate the amount
fields: "price,quantity", <<------- the changes of the price and quantity columns will cause the formula to calculate
},
},
price: { dataType: 'number' },
quantity: { dataType: 'number' }
},
}
});
2）甘特表
甘特表（Gantt Chart）是一種項目管理工具，用於可視化項目的進度安排和任務時間軸。它以水平條形圖的形式展示項目中的任務、工作包或活動，並顯示它們的開始時間、結束時間和持續時間。
SpreadJS新增的甘特圖插件允許創建工作分解、生產計劃及計劃進度等甘特圖類型。是一個快速、數據綁定的 DataTable 視圖，具有甘特圖行爲和電子表格用戶界面。
使用SpreadJS創建集算表的步驟
（1）需要準備的資源
（2）將代碼下載到本地
（3）使用VSCode打開本地文件夾
（4）打開文件中的index.html文件，右鍵點擊Open with Live Server。
（5）打開後系統界面如下所示，這個是SpreadJS的在線可視化界面，點擊”插入->集算表“便可以添加集算表。
總結
綜上所述，2024年的工作環境中，一款高效的表格控件是開發者們的必備選擇。而SpreadJS作爲一款高性能的的前端表格控件。可以有效地幫助業務/開發人員提升工作效率、節省時間，並提供準確而清晰的數據展示和分析能力。不論您是數據分析師、項目經理還是開發者，這款高效表格控件都將成爲您的得力助手，助您在2024年取得優秀的工作成果。
擴展鏈接：