这是Jerry在2021年的第65篇文章，也是汪子熙的第342篇原创文章公众号。观沧海曹操东面介石，观沧海。水是那样的淡，山岛耸立。树木繁茂，芳草萋萋。秋风萧瑟，洪水滔滔。日月之行，如出其外；星辰和寒光闪闪，仿佛脱离了它。幸偶哉，歌唱志向。Jerry上一篇文章使用纯JavaScript在SAPUI中展示产品主数据的3D模型视图，介绍了在SAPUI中使用threejs（一个基于WebGL的使用JavaScript进行3D模型转换和展示的库）进行展示材料方法的3D模型。目前绘制图表的第三方JavaScript库可谓精美绝伦。事实上，SAPUI5自带的Viz库足以满足企业应用软件中的大部分绘图需求。Jerry尝试在中文搜索引擎中根据SAPUI5Viz的关键词进行搜索，发现关于该库的中文资料非常少，于是写了这篇文章来介绍使用该库的详细步骤。我们打开SAPUI5的官网，找到一个使用Viz开发的图表应用的例子：https://sapui5.hana.ondemand...从最简单易行的LineChart——折线图开始学习。点击右上角的下载按钮后，可以将本例的部分源码下载到本地学习：Jerry在2012年刚开始学习SAPUI5的时候，也是零基础入门，一行代码都没写HTML/JavaScript代码，所以作为SAPUI5的初学者，面对一大片陌生的源代码，我也感到不知所措。在我看来，很多SAPUI5初学者在下载了这个折线图的示例代码之后，在使用它开始学习的时候可能会遇到一些麻烦。原因如下：(1)本地Running中无法直接使用这段代码，因为缺少折线图显示数据所需的样本数据。该数据文件在SAP官网不提供下载，只能在学习者在线访问示例应用后，在Chrome开发者工具的网络选项卡中手动下载。(2)如上图高亮区域所示，这些设置界面用于动态调整折线图的显示和渲染效果。从示例程序的完整性来看，这些功能是非常必要的，但是也大大增加了本示例的代码量。(3)源码中的package.json和ui5.yaml用于通过@ui5/cli命令行工具在本地构建和运行SAPUI5应用，与SAPUI5Viz本身的使用无关。对于SAPUI5Viz的初学者来说，掌握最基本的图表绘制方法可能是当务之急。至于JavaScript代码的使用方式，动态调整其显示效果应该是更高层次的学习目标。鉴于以上三点考虑，我对SAPUI5Viz提供的折线图示例源码进行了极大的简化和修改。运行效果如下图所示，代码量不到原例子的30%。这个例子上手比较快：从上图可以看出，Jerry修改后的例子界面只有一个折线图，去掉了动态调整显示效果的设置页面。同时补充了SAP标准示例程序中缺失的data.json文件，删除了与Viz学习本身无关的package.json和ui5.yaml文件。Jerry的例子如何运行：（1）从Jerry的代码仓库下载代码到本地：https://github.com/wangzixi-d...（2）依次执行命令行npminstall，nodelocal.js,然后浏览器可以访问如下url:http://localhost:3002/chart/下面将详细介绍Jerry例子的源码实现。Line.view.xml这个文件不到40行代码，展示了如何通过VizFrame标签在视图中声明Viz图表。在运行时，XML视图文件被浏览器加载后，XMLTemplateProcessor会被解析为DOM树，VizFrame等节点会被实例化为对应的图表实例。下图中的绿色区域是XML视图的命名空间定义。例如，第二行定义了sap.viz.ui5.controls命名空间，由前缀viz标识。这样，当我们在第10行声明一个Viz图表时，我们没有使用完整的命名格式sap.viz.ui5.controls.VizFrame，而是直接在viz前面加上命名空间的标识符，后面加上标签VizFrame就足够了，这样可以节省键入几个字符并提高XML视图的可读性。第11行的vizType属性表示图表的类型是line，即折线图。第13行的FlattenedDataset通过属性data指定了折线图的数据源，字段名为milk。这个牛奶场可以在sampledata文件夹下的data.json文件中找到。牛奶场的类型是数组。数组的每个元素的Week字段旨在用作折线图中X轴的坐标，其他Revenue和Cost字段用于构成折线图中折线的每个元素。点的Y坐标。为了完成上述设计，需要在XML视图中完成以下两项设置：(1)给data.xml中数组元素的Week属性赋值。我想将业务数据中的周字段定义为折线图中的维度。同样，业务数据中的Revenue和Cost字段定义为折线图的两个Measure。上图中绿色的uid属性，categoryAxis和valueAxis分别代表X轴和Y轴的显示项。这是SAPUI5Viz框架的硬编码值，不能随机指定为其他值。id值由用户指定，可以任意指定。(2)通过feeds标签，定义折线图X轴和Y轴显示的数据。上图定义了X轴坐标，数据来自data.json文件中的Week字段，Y轴坐标来自Revenue和Cost字段。XML视图的代码及其对应的运行时显示效果如下图所示：如果要在折线图中绘制第三条线，需要的步骤是：(1)在data.json中添加新的业务数据file字段，比如Income（2）在XML视图中定义一个新的MeasureDefinition，绑定上一步的Income字段（3）在XML视图中定义一个新的FeedItem，类型为Measure，名称定义在上一步MeasureDefinition的同名属性。点击折线图上的任意一点，会弹出一个对话框，显示该节点的X、Y坐标：这个弹出对话框的实现是通过XML视图中的Popover标签实现的。至此，XML视图的实现代码已经讲解完毕。在XML视图的头部定义了其对应的控制器的名称，下面介绍其控制器的实现。Line.controller.js控制器的代码也被Jerry大大简化，只剩不到50行。主要做了三件事：（1）设置折线图的数字显示格式和折线图节点的Y坐标显示（默认不显示，需要用代码设置visible为true）。SHORTFLOAT和SHORTFLOAT_MFD2是紧凑型显示模式，可以以k为单位显示更大的数字，例如494000显示为494k。如果把上图中的format控件和title可见属性控件代码删掉，折线图的外观就会变成如下图Display：对比之前的折线图，不难发现Y轴折线图左侧刻度值不再以k为单位；不再显示折线图上每个节点的Y坐标。(2)创建一个JSONModel实例，并使用setModel方法绑定折线图实例。(3)将XML视图中定义的Popover实例绑定到折线图实例上。至此，SAPUI5Viz使用相关的XML视图和控制器的代码已经介绍完毕。其余文件为每一个SAPUI5应用开发都需要的常用文件，这里只做简单说明。index.html第9行从SAPUI5CDN导入库文件以使用其最新版本。基于写这篇文章的SAPUI5版本是1.94.0。第11行的属性data-sap-ui-resourceroots的意思是告诉SAPUI5加载器如果遇到命名空间sap.viz.sample.Line文件中的资源，请从本地的根目录加载项目文件夹，而不是来自默认的sapui5.hana.ondemand.com/resources目录。下图中其他绿色高亮的data-sap-ui-XX等属性在SAPUI5官网上都有详细的解释，这里不再赘述。Component.js这个Component的命名空间是Jerry自定义的sap.viz.sample.Line，包含的元数据定义在项目中的另一个文件manifest.json中。我们可以把上面index.html第11行的data-sap-ui-resourceroots属性去掉作为实验：这样SAPUI5加载器会尝试从默认的sapui5.hana.ondemand.com/resources加载这个组件.js当然会遇到404错误：manifest.json文件定义了折线图应用的元数据，包括应用的入口视图，即SAPUI5框架启动后加载的第一个XML视图名称，以及应用依赖的SAPUI5库列表。本应用程序的全部源代码介绍到此结束。相信有了本文的基础，SAPUI5的初学者回过头来参考SAPUI5官网的使用Viz库绘制图表的例子，就会轻松很多。谢谢阅读。Jerry的SAPUI5题目，在没有任何前端开发经验的情况下，创建了第一个SAPFioriElements应用来回答网友的问题：如何对使用SAPFioriTools创建的FioriElements应用进行二次开发？如何将本地开发的SAPFioriElements应用部署到ABAP服务器深入理解SAPFioriElements工作原理的前提：理解SmartField深入理解SAPFioriElements工作原理系列之二：如何添加自定义SAPFioriElements应用按钮SAPFioriElements框架中SmartTable控件的工作原理介绍SAPFioriElementsListReportSmartTable中计算列项宽度的奥秘作为ABAP资深顾问，SAP技术可以你选择作为下一步的主要进攻方向？SAPUI5应用开发者理解UI5框架代码含义SAPUI5模块懒加载机制SAPUI5控件渲染机制HTML原生事件VSSAPUI5语义事件元数据SAPUI5控件元数据实现实例数据修改和读取逻辑SAPUI5控件的实现原理SAPUI5控件数据绑定SAPUI5控件数据绑定的三种模式：OneWay、TwoWay和OneTime实现原理比较说说SAPUI5的视图控件ID，以及它与Angular视图的异同。对于了解不多的初学者，从什么资料开始学习比较好？SAPUI5OData辟谣者：极短时间内发送两个Odata请求，前一个会自动取消吗？SAPUI搜索和分页技术如何在SAPUI5应用中集成第三方库：一个在移动设备上查看web应用打印调试信息的小技巧基于OData模型和JSON模型的SAPUI5表单控制行项的增删纪念特洛伊的实现英雄Sinon-SAPUI5MockServer使用步骤和工作原理介绍了一个在本地修改远程SAPUI5框架文件的小技巧。更多Jerry原创文章在：《王子熙》：
