如何使用 UI5 前端框架进行图表(Chart)的绘制

目前第三方用于绘制图表(Chart)的 JavaScript 库可谓玲琅满目。

我身边有不少同行,使用 UI5 这个企业级前端开发框架,开发响应式前端应用。在企业级应用领域里,常常有开发各种图表(Chart)的需求。为了实现这些需求,不少同行都选择第三方的开源库。

笔者通过本文,介绍 Viz 库的详细使用步骤,希望能够帮助到有类似需求的同行们。

我们打开 UI5 的官方网站,找到使用 Viz 开发而成的图表应用例子:

从最简单最容易入手的 Line Chart - 折线图入手开始学习。

点击右上角的 download 按钮之后,可以将这个例子的部分源代码,下载到本地学习:

笔者刚刚开始学习 SAP UI5 时,也是从一行 HTML/JavaScript 代码都没有编写过的零基础开始的,UI5 初学者,面对一大段陌生的源代码时不知所措的心情,我也曾经也有。

在我看来,不少 UI5 初学者在下载了这个折线图的例子代码后,在使用它们开始学习时可能会遇到一些困扰,原因如下:

(1) 这段代码并不能够直接在本地运行,因为缺少 Line Chart 显示数据需要的 sample data. 这个数据文件在 SAP 官网并未提供下载,只能由学习者在线访问该例子应用后,手动从 Chrome 开发者工具的 network 标签中下载。

(2) 如上图高亮区域所示,这些设置界面用于动态调整 Line Chart 的显示和渲染效果。从示例程序的完备性角度来说,这些功能非常有必要,但也大大增加了该例子的代码量。

(3) 源代码里的 package.json 和 ui5.yaml, 用于本地通过 @ui5/cli 这个命令行工具构建和本地运行 UI5 应用,和 UI5 Viz 本身的使用无关。

对于 UI5 Viz 的初学者来说,可能当务之急是掌握一个图表最基本的绘制方法。至于用 JavaScript 代码的方式,动态调整其显示效果,应该是更高阶的学习目标。

鉴于以上三点考虑,我对 UI5 Viz 提供的折线图例子的源代码做了大幅地精简和修改,其运行效果如下图所示,代码量不到原来例子的 30%,相信初学者能凭借该例子更快地上手:

从上图能够看出,笔者修改过后的例子,界面仅仅包含一张折线图,移除了动态调整显示效果的设置页面。同时,补充了官方标准例子程序里缺失的 data.json 文件,删除了和 Viz 学习本身无关的 package.json 和 ui5.yaml 两个文件。

例子的运行方法:

(1) 从代码仓库将代码下载到本地。

(2) 依次执行命令行 npm install, node local.js,然后浏览器访问如下 url 即可:

http://localhost:3002/chart/

下面详细介绍本例的源代码实现。

Line.view.xml

该文件不到 40 行代码,展示了如何通过 VizFrame 标签的方式,在视图里声明 Viz 图表。运行时,该 XML 视图文件被浏览器加载后,XMLTemplateProcessor 会被解析成一棵 DOM 树,包括 VizFrame 在内的节点,会被实例化成对应的图表实例。

xml 复制代码
<mvc:View controllerName="sap.viz.sample.Line.Line" xmlns="sap.m"
    xmlns:viz="sap.viz.ui5.controls" xmlns:layout="sap.ui.layout"
    xmlns:mvc="sap.ui.core.mvc" xmlns:viz.feeds="sap.viz.ui5.controls.common.feeds"
    xmlns:viz.data="sap.viz.ui5.data" height="100%">
    <layout:FixFlex id='chartFixFlex' minFlexSize="250">
    <layout:fixContent>
        <viz:Popover id="idPopOver"></viz:Popover>
    </layout:fixContent>
        <layout:flexContent>
            <viz:VizFrame id="jerryFrame" uiConfig="{applicationSet:'fiori'}"
                height='100%' width="100%" vizType='line'>
                <viz:dataset>
                    <viz.data:FlattenedDataset data="{/milk}">
                        <viz.data:dimensions>
                            <viz.data:DimensionDefinition name="Week" value="{Week}" />
                        </viz.data:dimensions>
                        <viz.data:measures>
                            <viz.data:MeasureDefinition name="Revenue" value="{Revenue}" />
                            <viz.data:MeasureDefinition name="Cost" value="{Cost}" />
                        </viz.data:measures>
                    </viz.data:FlattenedDataset>
                </viz:dataset>

                <viz:feeds>
                    <viz.feeds:FeedItem id='valueAxisFeed' uid="valueAxis" type="Measure"
                        values="Revenue" />
                    <viz.feeds:FeedItem id='valueAxisFeed2' uid="valueAxis" type="Measure"
                        values="Cost" />
                    <viz.feeds:FeedItem id='categoryAxisFeed' uid="categoryAxis" type="Dimension"
                        values="Week" />
                </viz:feeds>
            </viz:VizFrame>
        </layout:flexContent>
    </layout:FixFlex>
</mvc:View>

下图绿色区域是 XML 视图的命名空间(namespace)定义。比如第二行,定义了 sap.viz.ui5.controls 命名空间,用前缀 viz 标识。这样,当我们在第 10 行声明一个 Viz 图表时,不需使用完整的命名格式 sap.viz.ui5.controls.VizFrame, 而直接用命名空间的标识符前缀 viz, 后面紧跟着这个空间下的标签 VizFrame 即可,这样可以少敲几个字符,也提高了 XML 视图的可读性。

第 11 行的 vizType 属性指明了该图表的类型为 line 即折线图。

第 13 行的 FlattenedDataset,通过属性 data,指明了折线图的数据源,字段名为 milk.这个 milk 字段可以在 sampledata 文件夹下的 data.json 文件里找到。milk 字段的类型是一个数组,数组每个元素的 Week 字段,我打算用来作为折线图里 X 轴上的坐标,而另外的 Revenue 和 Cost 字段,我打算用来作为折线图里构成折线每个点的 Y 坐标。

为了完成上述的设计,需要在 XML 视图里完成如下两项设置:

(1) 将 data.json 里数组元素的 Week 属性,通过大括号包裹的语法,赋给 DimensionDefinition 标签,告诉 SAP UI5 Viz 框架,我想把我的业务数据里的 Week 字段,定义成折线图里的一个 Dimension(维度)。同理,将业务数据里的 Revenue 和 Cost 字段,定义成折线图的两个 Measure(度量)。

上图绿色 uid 属性,categoryAxis 和 valueAxis 分别代表 X 和 Y 轴的显示项目,这是 SAP UI5 Viz 框架硬编码的值,不能随便指定为其他值。而 id 值为用户指定,可以随意指定。

(2) 通过 feeds 标签,定义折线图的 X 轴和 Y 轴需要显示的数据。上图定义了 X 轴坐标,数据来自 data.json 文件里的 Week 字段,而 Y 轴坐标,来自 Revenue 和 Cost 字段。

XML 视图的代码,和其对应的运行时显示效果,如下图所示:

如果想在折线图里绘制第三条折线,需要的步骤是:

(1) 在 data.json 文件里添加新的业务数据字段,比如 Income (2) 在 XML 视图里定义一个新的 MeasureDefinition,绑定到前一步骤的 Income 字段去 (3) 在 XML 视图里定义一个新的 FeedItem,类型为 Measure,名称为前一步骤定义的 MeasureDefinition 的同名属性。

点击折线图上任意一个点,会弹出一个对话框,显示该节点的 X 和 Y 坐标:

这个弹出对话框的实现是通过 XML 视图里的 Popover 标签完成的。

至此,XML 视图的实现代码讲解完毕。在 XML 视图的头部,定义了其对应的控制器的名称,下面介绍其控制器的实现。

Line.controller.js

控制器的代码同样经过笔者大幅度精简,剩下不到 50 行。主要做了三件事:

(1) 设置折线图的数字显示格式和折线图节点的 Y 坐标显示(默认不显示,所以需要用代码把 visible 设置为 true)。

SHORTFLOAT 和 SHORTFLOAT_MFD2 即紧凑显示模式,能以 k 作为单位显示较大的数字,比如 494000 显示成 494k.

如果把上图的格式控制和 title visible 属性控制代码删除,折线图的外观将变成如下图所示:

对比之前的折线图,不难发现,折线图左边的 Y 轴刻度值,现在不再以 k 作为单位;折线图上每个节点的 Y 坐标也不再显示出来。

(2) 创建 JSONModel 实例,利用 setModel 方法绑定到折线图实例上。

(3) 将 XML 视图里定义的 Popover 实例,绑定到折线图实例上。

至此和 UI5 Viz 使用相关的 XML 视图和控制器的代码均介绍完毕。剩下的文件都是每一个 UI5 应用开发均需要使用到的 Common 文件,这里只简要进行说明。

index.html

第 9 行从 UI5 CDN 导入库文件,以使用其最新版本。本文写作时基于的 UI5 版本为 1.94.0.

第 11 行 data-sap-ui-resourceroots 的属性含义是,告诉 UI5 加载器,如果遇到来自命名空间 sap.viz.sample.Line 内的资源文件,请从本地工程文件夹的根目录下加载,而非从默认的 sapui5.hana.ondemand.com/resources 目录去加载。

而下图其他绿色高亮的 data-sap-ui-XX 等属性,在 UI5 官网有详细的解释,这里不再赘述。

Component.js

该 Component 的命名空间为笔者自定义的 sap.viz.sample.Line,包含的元数据定义在工程内另一个文件 manifest.json 内。我们可以把上图 index.html 第 11 行的 data-sap-ui-resourceroots 属性去掉做个实验:

如此一来,UI5 加载器就会试图从默认的 sapui5.hana.ondemand.com/resources 去加载这个 Component.js, 当然会遇到 404 错误了:

manifest.json

该文件定义了这个折线图应用的元数据,包含应用的入口视图,即被 UI5 框架启动后,加载的第一个 XML 视图的名称,以及该应用依赖的 UI5 库列表。

这个应用的全部源代码介绍到此结束。相信有了本文的基础,UI5 的初学者,再回过头去查阅 UI5 官方网站上使用 Viz 库绘制图表的例子,理解起来会觉得容易得多。

感谢阅读。

相关推荐
别拿曾经看以后~33 分钟前
【el-form】记一例好用的el-input输入框回车调接口和el-button按钮防重点击
javascript·vue.js·elementui
我要洋人死36 分钟前
导航栏及下拉菜单的实现
前端·css·css3
川石课堂软件测试39 分钟前
性能测试|docker容器下搭建JMeter+Grafana+Influxdb监控可视化平台
运维·javascript·深度学习·jmeter·docker·容器·grafana
科技探秘人1 小时前
Chrome与火狐哪个浏览器的隐私追踪功能更好
前端·chrome
科技探秘人1 小时前
Chrome与傲游浏览器性能与功能的深度对比
前端·chrome
JerryXZR1 小时前
前端开发中ES6的技术细节二
前端·javascript·es6
七星静香1 小时前
laravel chunkById 分块查询 使用时的问题
java·前端·laravel
q2498596931 小时前
前端预览word、excel、ppt
前端·word·excel
小华同学ai1 小时前
wflow-web:开源啦 ,高仿钉钉、飞书、企业微信的审批流程设计器,轻松打造属于你的工作流设计器
前端·钉钉·飞书
problc1 小时前
Flutter中文字体设置指南:打造个性化的应用体验
android·javascript·flutter