首页 > 其他分享 >创新工具:2024年开发者必备的一款表格控件

创新工具:2024年开发者必备的一款表格控件

时间:2024-01-11 09:12:10浏览次数:36  
标签:控件 SpreadJS 表格 2024 开发者 集算表 数据 图表

前言

在现代工作环境中,信息的处理和管理是至关重要的。表格是一种常见的数据呈现和整理工具,被广泛应用于各行各业。然而,随着技术的不断发展,市场对表格控件的需求也越来越高。随着工作效率的重要性日益凸显,一款高效的表格控件成为了开发者们的首选,因此本文小编将从葡萄城公司的纯前端表格控件——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年取得优秀的工作成果。

扩展链接:

Redis从入门到实践

一节课带你搞懂数据库事务!

Chrome开发者工具使用教程

如何在Web应用中添加一个JavaScript Excel查看器

高性能渲染——详解HTML Canvas的优势与性能

标签:控件,SpreadJS,表格,2024,开发者,集算表,数据,图表
From: https://www.cnblogs.com/powertoolsteam/p/17956358

相关文章

  • 【愚公系列】2024年01月 WPF控件专题 ListBox控件详解
    ......
  • 新火种AI|2024乍到,会成为小模型的当打之年吗?
    作者:小岩编辑:美美乘着ChatGPT爆火的东风,2023年成为了当之无愧的“大模型爆发之年”。跟随ChatGPT的脚步,诸多大厂和知名企业推出了自己的AI大模型。也正因此,大模型赛道的竞争变得异常激烈,烧钱的势头也变得异常凶猛。不过,这样的趋势很可能在2024年产生变化。每个事物的发展都要经历“......
  • 2024-01-10:用go语言,给你一个下标从 0 开始的二维整数数组 pairs 其中 pairs[i] = [sta
    2024-01-10:用go语言,给你一个下标从0开始的二维整数数组pairs其中pairs[i]=[starti,endi]如果pairs的一个重新排列满足对每一个下标i(1<=i<pairs.length)都有endi-1==starti,那么我们就认为这个重新排列是pairs的一个合法重新排列。请你返回任意一个pairs的......
  • 从嘉手札<2024-1-10>
    冬月初零 年岁缭绕秋月无影倏尔迢迢暗章难牧纵使再怎么保有年少飞扬的内心时光仍带去了我二十六年的光阴出乎意料的收到了很多人的祝福可喜的是仍有不少人记挂着我于我而言无疑是莫大的荣幸和欣喜正如十九年前我第一次收到发小两毛钱的生日蛋糕倘若说完全没有内心......
  • SOLIDWORKS 2024新功能之SOLIDWORKS PDM篇
    SOLIDWORKS2024新功能PDM篇目录概述•装配体直观•在Web2中下载文件的特定版本•文件类型图标•“更改状态”命令中的签出选项•复制树对话框•查看检出事件详细信息•系统变量•查看许可证使用•数据安全增强功能•SOLIDWORKSPDM性能改进1、装配体直观可以在SOL......
  • 使用Winform开发自定义用户控件,以及实现相关自定义事件的处理
    在我们一些非标的用户界面中,我们往往需要自定义用户控件界面,从而实现不同的内容展示和处理规则,本篇内容介绍使用Winform开发自定义用户控件,以及实现相关自定义事件的处理。1、用户控件的界面分析对于比较规范的界面,需要进行一定的分析,以便从中找到对应的规则,逐步细化为自定义用......
  • 2024年1月Java项目开发指南1:环境与工具准备
    准备工作基础能力开发能力的事咱先不谈,有两个基础技能要学一下。1.学习使用Markdown编写文档2.学会使用git拉取代码和提交代码软件准备电脑需要安装以下软件:IDEA2023.2及其以上(Java开发统一使用IDEA)Webstorm2023.2及其以上(也可以使用VScode或者Hbuilder或者Dreamweav......
  • 2024年1月Java项目开发指南2:项目设计
    确定软件架构1.前端用什么技术,什么框架,什么版本2.后端用什么技术,什么框架,什么版本3.用些什么软件,软件版本?比如:前端:vue3+Element-Plus+Axios后端:Java17SpringbootMyBatis-plusMaven3数据库:MySQL5.5后端开发工具:IDEA2023.2.2前端开发工具:Webstorm2023.2.2接口管理......
  • QuarkXPress 2024让每一页都成为艺术品
    QuarkXPress2024是一款功能强大的印刷和出版软件,广泛应用于印刷出版行业。作为Quark软件公司旗下的核心产品,QuarkXPress2024在继承了之前版本的优秀性能和功能的基础上,进一步提升了用户体验和工作效率。点击获取QuarkXPress2024首先,QuarkXPress2024提供了全新的用户界面,使......
  • 关于REACT2024挑战赛
    关于REACT2024首先,挑战赛官网如下:https://sites.google.com/cam.ac.uk/react2024/home这个挑战赛的任务是:建立一个机器学习模型,在双人交互的背景下,通过说话者的视频、音频、表情等数据,生成听者的面部反应并要保证反应的合理性(FRDistandFRCorr)、多样性(FRVar,FRDiv,andFRD......