在現(xiàn)代工作環(huán)境中，信息的處理和管理是至關(guān)重要的。表格是一種常見的數(shù)據(jù)呈現(xiàn)和整理工具，被廣泛應(yīng)用于各行各業(yè)。然而，隨著技術(shù)的不斷發(fā)展，市場(chǎng)對(duì)表格控件的需求也越來越高。隨著工作效率的重要性日益凸顯，一款高效的表格控件成為了開發(fā)者們的首選，因此本文小編將從葡萄城公司的純前端表格控件——SpreadJS的視角出發(fā)，為大家介紹如何充分利用這一控件來提升開發(fā)效率和用戶體驗(yàn)。
1.快速構(gòu)建表格應(yīng)用
作為一款具有高性能的純前端表格組件，SpreadJS基于其本身強(qiáng)大的表格能力，在DataManager數(shù)據(jù)關(guān)系引擎的助力下，使得用戶在全新的表格插件下讓數(shù)據(jù)錄入有了全新的能力和體驗(yàn)，快速完成數(shù)據(jù)錄入。
在設(shè)計(jì)器方面，SpreadJS擁有一套完整的可視化操作界面。通過拖拉拽的方式就可以實(shí)現(xiàn)數(shù)據(jù)的綁定和模板樣式的設(shè)計(jì)，無需代碼，業(yè)務(wù)人員也可以輕松上手操作。
性能方面，在瀏覽器端，SpreadJS在2.4秒內(nèi)可以完成10萬行×6列的分組交叉統(tǒng)計(jì)數(shù)據(jù)加載(不包含數(shù)據(jù)傳輸)
最后，在導(dǎo)入導(dǎo)出方面，SpreadJS支持使用Excel和CSV文件作為模板，用戶可以直接將本地的文件導(dǎo)入到系統(tǒng)中進(jìn)行修改，修改完成之后再進(jìn)行導(dǎo)出。
使用SpreadJS構(gòu)建資產(chǎn)負(fù)債表的步驟
(1)打開SpreadJS在線表格編輯器。
(2)導(dǎo)入現(xiàn)有模板或新建一個(gè)空白工作表。
(3)在設(shè)計(jì)器中使用拖拉拽的方式設(shè)計(jì)一個(gè)資產(chǎn)負(fù)債表模板。
(4)將設(shè)計(jì)完成的模板導(dǎo)出，可以導(dǎo)出為Excel、CSV、PDF文件。
2.內(nèi)置多樣化的數(shù)據(jù)展示方式
圖表作為一種視覺化工具，在數(shù)據(jù)分析和可視化中起著重要的作用。它能夠?qū)?fù)雜的數(shù)據(jù)和信息以直觀且易于理解的方式呈現(xiàn)出來，幫助人們更好地理解數(shù)據(jù)的趨勢(shì)、關(guān)系和模式。通過使用各種圖表類型，如折線圖、柱狀圖、餅圖等，可以將數(shù)據(jù)轉(zhuǎn)化為可視化的形式，使得數(shù)據(jù)更具可讀性和可比性。同樣的，在SpreadJS當(dāng)中，也支持圖表：
(1)柱形圖
作為數(shù)據(jù)分析中最常用的圖表類型之一，柱形圖可以直觀地展示數(shù)據(jù)的變化趨勢(shì)和比較不同數(shù)據(jù)之間的差異。
(2)折線圖
折線圖(Line Chart)是一種常見的統(tǒng)計(jì)圖表，用于展示數(shù)據(jù)隨時(shí)間或其他連續(xù)變量的變化趨勢(shì)。它通過連接數(shù)據(jù)點(diǎn)的直線來顯示數(shù)據(jù)的變化情況，可以清晰地展示數(shù)據(jù)的趨勢(shì)和波動(dòng)。
(3)餅形圖
餅形圖(Pie Chart)是一種常見的統(tǒng)計(jì)圖表，用于展示數(shù)據(jù)的相對(duì)比例和組成關(guān)系。它以一個(gè)圓形為基礎(chǔ)，將數(shù)據(jù)按照比例劃分成不同的扇形區(qū)域，每個(gè)扇形區(qū)域的面積表示該數(shù)據(jù)所占的比例。
除了上述會(huì)用到的圖表之外，還有一些基于以上三種圖表的衍生圖表也很有可能在工作中會(huì)用到：
(1)瀑布圖表
瀑布圖表是基于柱形圖表衍生出來的一種新型圖表，該圖表將運(yùn)行總計(jì)顯示為添加或減去的值，這些值排列為具有正值和負(fù)值的列，并通過顏色編碼來區(qū)分兩者。初始列和最終列通常與水平軸對(duì)齊，而中間值通常是浮動(dòng)列。
(2)平滑線格式折線圖
和普通的折線圖不同的是，平滑線格式折線圖通過使用曲線來連接數(shù)據(jù)點(diǎn)，而不是直線，以呈現(xiàn)數(shù)據(jù)的趨勢(shì)和變化。
除此之外，SpreadJS還支持使用多選插入圖表。除了選擇連續(xù)的數(shù)據(jù)區(qū)域之外，還可以按Ctrl鍵選擇多個(gè)不連續(xù)的區(qū)域來創(chuàng)建圖表。也可以通過在每個(gè)范圍之間放置逗號(hào)來在代碼中指定多個(gè)范圍：
Plain Text
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圖表美化資產(chǎn)負(fù)債表
第一步(快速構(gòu)建表格應(yīng)用)中小編使用SpreadJS設(shè)計(jì)器創(chuàng)建了一個(gè)資產(chǎn)負(fù)債表，下面介紹如何在資產(chǎn)負(fù)債表中增加一個(gè)柱形圖來美化圖表：
(1)打開SpreadJS在線表格編輯器。
(2)選擇需要用圖表展示的數(shù)據(jù)(區(qū)域一)，然后選擇【插入】->【圖表】->【柱形圖】即可，餅狀圖和條形圖的操作方法與柱形圖一致，如下圖所示，展示的就是資產(chǎn)負(fù)債表中流動(dòng)負(fù)債的不同項(xiàng)目(短期借款、交易性金融負(fù)債等)的期末余額柱形圖。
3.高效的數(shù)據(jù)分析
除了上面講過的這些圖表外，SpreadJS還支持下列數(shù)據(jù)分析工具：
(1)集算表
集算表(Consolidation Table)是一種數(shù)據(jù)處理的方法，用于將多個(gè)數(shù)據(jù)表或數(shù)據(jù)源中的數(shù)據(jù)合并、匯總和計(jì)算，從而生成一個(gè)綜合的數(shù)據(jù)報(bào)表。
通過使用集算表，可以將多個(gè)數(shù)據(jù)表或數(shù)據(jù)源中的數(shù)據(jù)按照指定的規(guī)則進(jìn)行合并和匯總。這些規(guī)則可以是簡(jiǎn)單地求和、平均值等統(tǒng)計(jì)函數(shù)，也可以是自定義的計(jì)算公式。集算表通常以表格的形式呈現(xiàn)，其中行和列代表不同的數(shù)據(jù)表或數(shù)據(jù)源，而交叉點(diǎn)處的數(shù)值則表示相應(yīng)的匯總或計(jì)算結(jié)果。
SpreadJS中的集算表支持從數(shù)據(jù)源添加字段，新版本還支持具有公式數(shù)據(jù)類型的虛擬列。之后可以在集算表的視圖中使用這些公式列來顯示運(yùn)行總和或股票價(jià)值比率等內(nèi)容：
除此之外，SpreadJS的集算表可以根據(jù)特定條件重新計(jì)算數(shù)據(jù)，在輸入新值時(shí)清理數(shù)據(jù)，或?yàn)榱刑峁┠J(rèn)值。以下是觸發(fā)公式的一些示例：
JavaScript
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)是一種項(xiàng)目管理工具，用于可視化項(xiàng)目的進(jìn)度安排和任務(wù)時(shí)間軸。它以水平條形圖的形式展示項(xiàng)目中的任務(wù)、工作包或活動(dòng)，并顯示它們的開始時(shí)間、結(jié)束時(shí)間和持續(xù)時(shí)間。
SpreadJS新增的甘特圖插件允許創(chuàng)建工作分解、生產(chǎn)計(jì)劃及計(jì)劃進(jìn)度等甘特圖類型。是一個(gè)快速、數(shù)據(jù)綁定的DataTable視圖，具有甘特圖行為和電子表格用戶界面。
使用SpreadJS創(chuàng)建集算表的步驟
(1)需要準(zhǔn)備的資源
•SpreadJS代碼(點(diǎn)擊這里下載)
•VSCode軟件
(2)將代碼下載到本地
(3)使用VSCode打開本地文件夾
(4)打開文件中的index.html文件，右鍵點(diǎn)擊Open with Live Server。
(5)打開后系統(tǒng)界面如下所示，這個(gè)是SpreadJS的在線可視化界面，點(diǎn)擊”插入->集算表“便可以添加集算表。
總結(jié)
綜上所述，2024年的工作環(huán)境中，一款高效的表格控件是開發(fā)者們的必備選擇。而SpreadJS作為一款高性能的前端表格控件，可以有效地幫助業(yè)務(wù)/開發(fā)人員提升工作效率、節(jié)省時(shí)間，并提供準(zhǔn)確而清晰的數(shù)據(jù)展示和分析能力。不論您是數(shù)據(jù)分析師、項(xiàng)目經(jīng)理還是開發(fā)者，這款高效表格控件都將成為您的得力助手，助您在2024年取得優(yōu)秀的工作成果。
（免責(zé)聲明：本網(wǎng)站內(nèi)容主要來自原創(chuàng)、合作伙伴供稿和第三方自媒體作者投稿，凡在本網(wǎng)站出現(xiàn)的信息，均僅供參考。本網(wǎng)站將盡力確保所提供信息的準(zhǔn)確性及可靠性，但不保證有關(guān)資料的準(zhǔn)確性及可靠性，讀者在使用前請(qǐng)進(jìn)一步核實(shí)，并對(duì)任何自主決定的行為負(fù)責(zé)。本網(wǎng)站對(duì)有關(guān)資料所引致的錯(cuò)誤、不確或遺漏，概不負(fù)任何法律責(zé)任。
任何單位或個(gè)人認(rèn)為本網(wǎng)站中的網(wǎng)頁(yè)或鏈接內(nèi)容可能涉嫌侵犯其知識(shí)產(chǎn)權(quán)或存在不實(shí)內(nèi)容時(shí)，應(yīng)及時(shí)向本網(wǎng)站提出書面權(quán)利通知或不實(shí)情況說明，并提供身份證明、權(quán)屬證明及詳細(xì)侵權(quán)或不實(shí)情況證明。本網(wǎng)站在收到上述法律文件后，將會(huì)依法盡快聯(lián)系相關(guān)文章源頭核實(shí)，溝通刪除相關(guān)內(nèi)容或斷開相關(guān)鏈接。 ）
