SpreadJS 类Excel表格控件 - V12 新特性详解

我们很高兴的宣布:纯前端类Excel表格控件 - SpreadJS 正式推出了 V12 新版本,此次的新版本中包含了诸多重量级的功能和来自客户的新需求,如对形状和富文本的支持,也有新增的图表类型,还有更多在细节处的更新。

形状(Shapes):在 SpreadJS 中根据需要添加内置或自定以的形状

SpreadJS V12已经实现了诸多类 Excel 的内置形状,如线条、矩形、箭头、流程图,可以为您的前端界面添加更多的细节展现和可视化效果,并且这些内置的形状都可以无缝的进行导入导出。

(图:SpreadJS V12 内置形状)

您还可以通过 SpreadJS V12提供的新能力来自定义您所需要的形状,并且所有的形状属性均可以设置为公式,这就意味着,您的形状可以随着数据的变化而变化,从而为您的前端界面效果带来极大的提升。下面的例子就是利用自定形状来实现一个保险理赔界面的例子

(图:SpreadJS V12 自定义形状 - 保险理赔实例)

富文本格式(RichText Formatting):在同一个单元格中包含不同的文字格式

通过丰富的文本格式,用户现在可以为单个单元格添加粗体,斜体,字体和所有基本格式!

(图:SpreadJS V12 富文本格式)

新增图表类型:雷达图(Radar),旭日图(Sunburst)和树图(Treemap)

通过丰富的文本格式,用户现在可以为单个单元格添加粗体,斜体,字体和所有基本格式!这些新图表(也可在Excel中使用)具有完整的 SpreadJS 在线表格编辑器支持,您可以无缝导入和导出包含这些图表的Excel文件。

雷达图(Radar)显示具有任意数量变量的多变量观测值;它通常用于表现个性特征。

(图:SpreadJS v12 新增雷达图(Radar))

旭日图(Sunburst)展示了从根节点(中心)向外到较低层次结构的分层数据。内圆的一段是外圆的分段的父代,它位于父代的角度扫描范围内。 旭日图非常适合展示如何将一个类别或级别(环)分解为其所占的大致比例。

在下面的例子中,世界人口用大陆、区域、国家来表示,并使用颜色进行区分。这样一来,人口的分布立即变得清晰起来:

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

树图(Treemap)显示结合相对数量的分层信息。如果您的应用程序存在空间限制,并且您需要使用工作表中的表中定义的众多实体绘制数千个数据点,则它们特别有用。

以下是用树图表示的世界人口图表:

(图:SpreadJS v12 新增树图(Treemap))

新增迷你图(Sparkline)类型:条形码(Barcode)

通过设置迷你图类型,您可以轻松的在单元格中呈现您需要的条形码,SpreadJS v12已经支持 QRCode, EAN-13, EAN-8, Codabar, Code39, Code93, Code128, GS1_128, Code49, PDF417, DataMatrix

图表动画效果

借助SpreadJS为柱状图,条形图,折线图和饼图创建新的无缝加载和更新动画,让您的仪表板真正闪耀起来。

(图:SpreadJS v12 新增图表动画)

类 Excel 的精准选择

Excel 的新功能允许用户先选择一个范围,然后取消选择特定单元格。 SpreadJS 已添加此功能。

(图:SpreadJS v12 新增类Excel精确选择)

关于葡萄城

赋能开发者!葡萄城集团成立于 1980 年,是全球领先的集开发工具、商业智能解决方案、管理系统设计工具于一身的软件和服务提供商。西安葡萄城是其在中国的分支机构,面向全球市场提供软件研发服务,并为中国企业的信息化提供国际先进的开发工具、软件和研发咨询服务。葡萄城的控件和软件产品在国内外屡获殊荣,在全球被数十万家企业、学校和政府机构广泛应用。

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏理论坞

【教程】C4D样条字设计终极版 | 附源文件工程

在站酷关于C4D的样条约束文字设计教程自己注到的共有三篇, 设计文章写的都非常细致,效果也都是各有长的,有很多学习点 然后最近本人也在国外设计B站看到了几位国外...

10720
来自专栏Windows Community

Microsoft Tech Summit 2018 课程简述:利用 Windows 新特性开发出更好的手绘视频应用

Microsoft Tech Summit 2018 微软技术暨生态大会将于10月24日至27日在上海世博中心举行,这也会是国内举办的最后一届 Tech Sum...

17630
来自专栏灯塔大数据

浅谈数据可视化那些可用的工具和示例【可视化】

什么是数据可视化?数据可视化主要旨在借助于图形化手段,清晰有效地传达与沟通信息。为了有效地传达思想概念,美学形式与功能需要齐头并进,通过直观地传达关键的方面与特...

49140
来自专栏葡萄城控件技术团队

前端开发者常用的9个JavaScript图表库

当前,数据可视化已经成为数据科学领域非常重要的一部分。不同网络系统中产生的数据,都需要经过适当的可视化处理,以便更好的呈现给用户读取和分析。 对任何一个组织来说...

46470
来自专栏BestSDK

一件交互设计大事,确定按钮放在左还是右?

其实这个问题,连世界最大的IT公司都没有确切的答案。 苹果说,不论移动或电脑设备,行动按钮(Action button)都放在右边,也就是说*确定按钮放在右边...

44770
来自专栏数据小魔方

think-cell chart系列2——堆积百分比柱形图!

今天要跟大家分享的是think-cell chart系列的第二篇——堆积百分比柱形图! 我们还是先欣赏一下使用think-cell chart制作的堆积百分比柱...

71390
来自专栏QQ空间开发团队的专栏

Android相机开发那些坑

这篇文章总结了Android相机开发的相关知识、流程,以及容易遇到的坑,希望能帮助今后可能会接触Android相机开发的朋友快速上手,节省时间,少走弯路。

23.7K50
来自专栏Windows Community

UWP 手绘视频创作工具技术分享系列

开篇先来说一下写这篇文章的初衷。     初到来画,通读了来画 UWP App 的代码,发现里面确实有很多比较高深的技术点,同时也是有很多问题的,扩展性,耦合,...

365110
来自专栏儿童编程

《动物魔法学校》儿童学编程Scratch之“外观”部分

导读:本文通过一个案例《动物魔法学校》来学习Scratch语言的“外观”部分。之后通过一系列其他功能的综合运用对作品功能进行了扩展。

14040
来自专栏Android 开发者

Android 开发者和设计师必须了解的颜色知识

21730

扫码关注云+社区

领取腾讯云代金券