SpreadJS纯前端表格控件v13.0发布,新增13种单元格类型,用户体验增强(下)

本文主要介绍纯JavaScript电子表格控件SpreadJS最新版的新特性。


图表增强:支持更多图表图例属性、错误提示栏、自定义边框、对数轴、趋势线等

SpreadJS v13.0 的图表功能得到大幅提升,不但支持更多的图表图例属性,如自定义位置、字体颜色、大小等,还新增了多种图表功能,如错误提示栏、自定义边框、对数轴、趋势线、悬停动画、符号等。

图表图例属性:支持字体颜色、大小和更多字体

在 SpreadJS V13.0 中,通过更改字体颜色、大小和字体的能力,开发人员能够自行匹配图表图例与应用程序的整体外观样式,而无需额外调整,这样做的好处是可以为仪表板中的所有组件,创建统一的外观样式。如下是为图例添加颜色、fontFamily、fontSize 设置:

chart.png

新图表属性:错误提示栏

在SpreadJS v13.0中,使用图表显示数据时,可以显示每个点的误差范围。借助此项新功能,您可以更改图表中显示的错误类型、样式和数量,从而一目了然的观测出图表数据的误差范围与标准偏差。

新图表属性:自定义边框

某些应用场景中,在图表周围添加边框以将图表与应用程序的其余部分区分开非常有用。借助此项新功能,开发人员可以自定义图表的边框,包括颜色、宽度、透明度和破折号样式,这样做的好处是:使开发人员可以将图表设计与应用程序的其他部分进行匹配。

SpreadJS纯前端表格控件v13.0发布,新增13种单元格类型,用户体验增强(下)

SpreadJS纯前端表格控件v13.0发布,新增13种单元格类型,用户体验增强(下)

新图表属性:对数轴

在绘制值差异巨大的数据时,我们很难以任何可读方式显示。但在SpreadJS v13.0中,借助图表增强功能,图表(不包括直方图、箱线图和瀑布图)可以支持值轴的对数刻度。这样在比较差异巨大的数据时,可以以更加易读的方式显示图表数据:

SpreadJS纯前端表格控件v13.0发布,新增13种单元格类型,用户体验增强(下)

新图表属性:趋势线

在预测数据趋势时,我们都希望能直观地查看数据趋势变化。通过SpreadJS新的图表增强功能,为柱形图、条形图、折线图、散点图和面积图添加了趋势线辅助。开发人员可以为图表创建6种不同类型的趋势线,如线性、指数和多项式。使用趋势线可以更轻松地根据数据(例如销售变化趋势)预测未来价值。

如下分别是SpreadJS的线性趋势线、指数趋势线和多项式趋势线:

SpreadJS纯前端表格控件v13.0发布,新增13种单元格类型,用户体验增强(下)

SpreadJS纯前端表格控件v13.0发布,新增13种单元格类型,用户体验增强(下)

SpreadJS纯前端表格控件v13.0发布,新增13种单元格类型,用户体验增强(下)

支持动态数组:大幅简化计算公式,提高公式运算效率

Excel 2019 推出了动态数组函数,用于简化复杂计算公式:使用动态数组,返回值将自动“输出”到相邻单元格中(未使用的)。用户只需编写一个简单的公式,而不是编写复杂的数组公式就可解决多单元格问题。

在SpreadJS v13.0中,也支持动态数组功能。

SpreadJS纯前端表格控件v13.0发布,新增13种单元格类型,用户体验增强(下)

SpreadJS实现的动态数组效果如下:

SpreadJS纯前端表格控件v13.0发布,新增13种单元格类型,用户体验增强(下)

SpreadJS纯前端表格控件v13.0发布,新增13种单元格类型,用户体验增强(下)

支持公式追踪:可快速查看公式中引用的单元格数据

在使用公式时,有时需要了解公式中引用了哪些单元格的数据,这就涉及到公式追踪的操作。在SpreadJS v13.0中,用户可以利用公式追踪API,快速且方便的构建数据关系拓扑图,以便进行审查、数据钻取、可视化显示等。

SpreadJS纯前端表格控件v13.0发布,新增13种单元格类型,用户体验增强(下)

SpreadJS纯前端表格控件v13.0发布,新增13种单元格类型,用户体验增强(下)

新增事件:ColumnChangingEvent & RowChangingEvent

当用户对工作表执行Delete/Insert/Hide/Unhide等操作时,如果希望在执行操作之前触发一个事件,该事件可以用来确认对象的数据,并控制该操作是否继续执行。此时,新增的这两个事件就可以派上用场。


行为增强:Advanced Resize

在SpreadJS v13.0中,Advanced Resize添加了一种调整大小的方法onlyNextTo。它与一般调整大小的方式不同,使用onlyNextTo调整大小只会改变当前列/行和下一个可见列/行的大小。

SpreadJS纯前端表格控件v13.0发布,新增13种单元格类型,用户体验增强(下)

自动合并:自动合并相邻单元格的相同文本

SpreadJS支持自动合并。

如果相邻单元格的文本内容相同并且不在任何范围内,它们将自动合并。SpreadJS的自动合并可以应用于任何指定范围,包括所选区域、行、列和整个工作表。

例如,原始数据如下:

SpreadJS纯前端表格控件v13.0发布,新增13种单元格类型,用户体验增强(下)

在行方向自动合并后:

SpreadJS纯前端表格控件v13.0发布,新增13种单元格类型,用户体验增强(下)

在列方向自动合并后:

SpreadJS纯前端表格控件v13.0发布,新增13种单元格类型,用户体验增强(下)

范围模板:将工作表的范围指定为模板,并使用该模板绘制相似区域

SpreadJS为客户提供了一个范围单元格类型。这种新的单元格类型允许用户将工作表的范围指定为模板,然后使用该范围来绘制具有单元格值的多个相似区域。

将样式模板应用于单元格后,可以将RangeTemplate设置为单元格样式的单元格类型。RangeTemplate将使用单元格值作为数据源,解析指定范围的bindingPath。

这样做的好处是:

  • 客户可以通过更改模板来更改批处理片段显示模式。

  • 客户可以轻松显示具有相同结构的一组数据。 

  • 客户可以在任何地方创建模板工作表,然后创建JSON/fromJSON,并设置工作表范围以便轻松复用。

其他功能增强

本次发布版本也包括其他功能增强。

*想要获得 SpreadJS 更多资源或正版授权的朋友,可以咨询【客服】了解哦~


网·1024程序员节DevExpressMyEclipseAxure RPAsposeFastReport等产品限时放“价”,给你专属宠爱!点击下方图片查看活动详情↓↓↓

QQ截图20191008171313.png

标签:

来源:慧都

声明:本站部分文章及图片转载于互联网,内容版权归原作者所有,如本站任何资料有侵权请您尽早请联系jinwei@zod.com.cn进行处理,非常感谢!

上一篇 2019年9月13日
下一篇 2019年9月13日

相关推荐

发表回复

登录后才能评论