使用 SAP UI5 Smart Chart 控件轻松绘制十数种不同类型的专业图表试读版

简介: 使用 SAP UI5 Smart Chart 控件轻松绘制十数种不同类型的专业图表试读版

说明

Jerry 从 2014 年加入 SAP成都研究院 CRM Fiori 开发团队之后开始接触 SAP UI5,曾经在 SAP 社区和 汪子熙 微信公众号上发表过多篇关于 SAP UI5 工作原理和源码解析的文章。


在 Jerry 这篇文章 对 SAP UI5 一无所知的新手,从哪些材料开始学习比较好? 曾经提到,Jerry 也是从 SAP UI5 菜鸟一路走过来,深知只有 ABAP 开发背景的开发者,向 SAP UI5 开发领域转型的不易,因此我在业余时间设计了这份适合 SAP UI5 不同水平的学习者的学习教程,把开发一个完整的 SAP UI5 应用的流程,拆分成若干个步骤,力求每个步骤里,把涉及到的知识点都涵盖到。


这些知识点可能不像我的 UI5 源码分析系列文章那么深入,但力求做到深入浅出,重要的知识点都配上详细的截图来辅助文字的介绍,便于教程学习者的理解。


本教程每一个步骤的源代码,都存放在我的 Github 上,分别用文件夹 01,02,03 等等来标识,例如步骤 1 的源代码在这里。


image.png


每一个步骤均是前一步骤的基础上,添加了若干新特性。建议零基础或者对 SAP UI5 知之甚少的 SAP UI5 初学者,按照顺序从第一个步骤开始循序渐进地学习,把这些代码下载到本地,配合教程的文字讲解,自己动手,以加深理解。


对于已经有一定基础的 SAP UI5 开发人员,可以通过本文的目录,跳过前面一部分比较基础的章节,直接挑选对自己工作项目有关,或者包含某些知识点自己尚未掌握的章节来有针对性地学习。


大家如果对教程的每个步骤有任何疑问,欢迎在教程对应的步骤文章里给我评论,进行留言。我虽然平时开发工作很忙,但是保证会定期查看大家给我留下的评论,对于里面涉及到的技术疑问,我一定会抽时间做出解答。





今天我们继续来学习另一种极富表现力的控件, Smart Chart.


俗话说一图胜千言,在常规的前端开发任务中,前端开发人员一般都需要掌握一种 Chart 工具库,利用工具库提供的 API 来完成图表绘制任务。


幸运的是 SAP UI5 提供了 Smart Chart 这个控件。使用该控件,SAP UI5 开发人员无需像使用其他图表工具库那样去学习繁琐的 API 调用细节,而是将必要的注解维护在 OData 元数据里,花费极少的工作量,就能获得下图这种专业的图表:


image.png


image.png


下面是具体的 Smart Chart 使用步骤介绍。

相关文章
|
6月前
|
API
在阿里云RPA中,你可以使用"SetForegroundWindow"函数来将SAP控件置顶
【2月更文挑战第28天】 在阿里云RPA中,你可以使用"SetForegroundWindow"函数来将SAP控件置顶
99 1
|
6月前
|
JavaScript
Nuxt3 实战 (四):安装 Nuxt UI 和配置 Typescript 类型检查
这篇文章介绍了在项目中安装和配置Nuxt UI以及TypeScript的步骤。作者在前言中提到考虑了AntDesignVue和Element-Plus,但最终选择了NuxtUI,因为它更适合年轻化的项目,并且与Nuxt兼容。安装Nuxt UI需要执行一系列命令,同时会自动安装一些相关模块。然后,可以在Nuxt应用中使用Nuxt UI的所有组件和可组合函数。此外,还介绍了如何添加图标库和配置TypeScript。
139 0
Nuxt3 实战 (四):安装 Nuxt UI 和配置 Typescript 类型检查
|
JavaScript 前端开发 UED
前端祖传三件套JavaScript的DOM之事件的各种具体事件类型的UI
在前端开发中,JavaScript 中的 DOM 事件机制提供了丰富的功能和灵活的方式来处理各种事件。本文将介绍 JavaScript 中常见的 UI 事件类型,包括鼠标事件、键盘事件、表单事件和窗口事件。
131 0
|
JavaScript 前端开发
SAP UI5 里 FlexBox 控件使用的一个例子
SAP UI5 里 FlexBox 控件使用的一个例子
|
算法 前端开发 容器
SAP UI5 应用 FlexBox 控件 growFactor 的使用方法
SAP UI5 应用 FlexBox 控件 growFactor 的使用方法
|
搜索推荐
SAP UI5 Smart Chart 功能介绍
SAP UI5 Smart Chart 功能介绍
138 0
|
搜索推荐
SAP Smart Table 的 Personalization(个性化配置)试读版
SAP Smart Table 的 Personalization(个性化配置)试读版
SAP UI5 Smart Table 和 Smart Filter Bar 的联合使用方法介绍试读版(2)
SAP UI5 Smart Table 和 Smart Filter Bar 的联合使用方法介绍试读版
SAP UI5 Smart Table 和 Smart Filter Bar 的联合使用方法介绍试读版(1)
SAP UI5 Smart Table 和 Smart Filter Bar 的联合使用方法介绍试读版
|
安全 网络安全
SAP CRM WebClient UI 支持的一些 url 参数
SAP CRM WebClient UI 支持的一些 url 参数