這是 Jerry 2021 年的第 65 篇文章，也是汪子熙公眾號總共第 342 篇原創文章。

觀滄海

曹操

東臨碣石，以觀滄海。

水何澹澹，山島竦峙。

樹木叢生，百草豐茂。

秋風蕭瑟，洪波涌起。

日月之行，若出其中;

星漢燦爛，若出其里。

幸甚至哉，歌以詠志。

Jerry 之前的文章?在SAP UI中使用純JavaScript顯示產品主數據的3D模型視圖，介紹了在 SAP UI 上，利用 threejs(一個基于 WebGL，使用 JavaScript 進行 3D 模型變換和顯示的庫），顯示物料 3D 模型的方法。

目前第三方用于繪制圖表的 JavaScript 庫可謂玲瑯滿目，其實 SAP UI5 自帶的 Viz 庫，足以勝任企業應用軟件里大多數的畫圖需求。Jerry 試著在中文搜索引擎里根據 SAP UI5 Viz 的關鍵字進行搜索，發現關于該庫的中文資料非常少，因此就寫了這篇文章，介紹該庫的詳細使用步驟。

我們打開 SAP UI5 的官方網站，找到使用 Viz 開發而成的圖表應用例子：

https://sapui5.hana.ondemand.com/#/entity/sap.viz.ui5.controls.VizFrame

從最簡單最容易入手的 Line Chart - 折線圖入手開始學習。

點擊右上角的 download 按鈕之后，可以將這個例子的部分源代碼，下載到本地學習：

Jerry 2012 年剛剛開始學習 SAP UI5 時，也是從一行 HTML/JavaScript 代碼都沒有編寫過的零基礎開始的，所以 SAP UI5 初學者，面對一大段陌生的源代碼時不知所措的心情，我也曾經也有。

在我看來，不少 SAP UI5 初學者在下載了這個折線圖的例子代碼后，在使用它們開始學習時可能會遇到一些困擾，原因如下：

(1) 這段代碼并不能夠直接在本地運行，因為缺少 Line Chart 顯示數據需要的 sample data. 這個數據文件在 SAP 官網并未提供下載，只能由學習者在線訪問該例子應用后，手動從 Chrome 開發者工具的 network 標簽中下載。

(2) 如上圖高亮區域所示，這些設置界面用于動態調整 Line Chart 的顯示和渲染效果。從示例程序的完備性角度來說，這些功能非常有必要，但也大大增加了該例子的代碼量。

(3) 源代碼里的 package.json 和 ui5.yaml, 用于本地通過 @ui5/cli 這個命令行工具構建和本地運行 SAP UI5 應用，和 SAP UI5 Viz 本身的使用無關。

對于 SAP UI5 Viz 的初學者來說，可能當務之急是掌握一個圖表最基本的繪制方法。至于用 JavaScript 代碼的方式，動態調整其顯示效果，應該是更高階的學習目標。

鑒于以上三點考慮，我對 SAP UI5 Viz 提供的折線圖例子的源代碼做了大幅地精簡和修改，其運行效果如下圖所示，代碼量不到原來例子的 30%，相信初學者能憑借該例子更快地上手：

從上圖能夠看出，Jerry 修改過后的例子，界面僅僅包含一張折線圖，移除了動態調整顯示效果的設置頁面。同時，補充了 SAP 標準例子程序里缺失的 data.json 文件，刪除了和 Viz 學習本身無關的 package.json 和 ui5.yaml 兩個文件。

Jerry 例子的運行方法：

(1) 從 Jerry 的代碼倉庫將代碼下載到本地：

https://github.com/wangzixi-diablo/ui5-toolset

(2) 依次執行命令行 npm install, node local.js，然后瀏覽器訪問如下 url 即可：

http://localhost:3002/chart/

下面詳細介紹 Jerry 例子的源代碼實現。

Line.view.xml

該文件不到 40 行代碼，展示了如何通過 VizFrame 標簽的方式，在視圖里聲明 Viz 圖表。運行時，該 XML 視圖文件被瀏覽器加載后，XMLTemplateProcessor 會被解析成一棵 DOM 樹，包括 VizFrame 在內的節點，會被實例化成對應的圖表實例。

下圖綠色區域是 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

控制器的代碼同樣經過 Jerry 大幅度精簡，剩下不到 50 行。主要做了三件事：

(1) 設置折線圖的數字顯示格式和折線圖節點的 Y 坐標顯示(默認不顯示，所以需要用代碼把 visible 設置為 true)。

SHORTFLOAT 和 SHORTFLOAT_MFD2 即緊湊顯示模式，能以 k 作為單位顯示較大的數字，比如 494000 顯示成 494k.

如果把上圖的格式控制和 title visible 屬性控制代碼刪除，折線圖的外觀將變成如下圖所示：

對比之前的折線圖，不難發現，折線圖左邊的 Y 軸刻度值，現在不再以 k 作為單位；折線圖上每個節點的 Y 坐標也不再顯示出來。

(2) 創建 JSONModel 實例，利用 setModel 方法綁定到折線圖實例上。

(3) 將 XML 視圖里定義的 Popover 實例，綁定到折線圖實例上。

至此和 SAP UI5 Viz 使用相關的 XML 視圖和控制器的代碼均介紹完畢。剩下的文件都是每一個 SAP UI5 應用開發均需要使用到的 Common 文件，這里只簡要進行說明。

index.html

第 9 行從 SAP UI5 CDN 導入庫文件，以使用其最新版本。本文寫作時基于的 SAP UI5 版本為 1.94.0.

第 11 行 data-sap-ui-resourceroots 的屬性含義是，告訴 SAP UI5 加載器，如果遇到來自命名空間 sap.viz.sample.Line 內的資源文件，請從本地工程文件夾的根目錄下加載，而非從默認的 sapui5.hana.ondemand.com/resources 目錄去加載。

而下圖其他綠色高亮的 data-sap-ui-XX 等屬性，在 SAP UI5 官網有詳細的解釋，這里不再贅述。

Component.js

該 Component 的命名空間為 Jerry 自定義的 sap.viz.sample.Line，包含的元數據定義在工程內另一個文件 manifest.json 內。我們可以把上圖 index.html 第 11 行的 data-sap-ui-resourceroots 屬性去掉做個實驗：

如此一來，SAP UI5 加載器就會試圖從默認的 sapui5.hana.ondemand.com/resources 去加載這個 Component.js, 當然會遇到 404 錯誤了：

manifest.json

該文件定義了這個折線圖應用的元數據，包含應用的入口視圖，即被 SAP UI5 框架啟動后，加載的第一個 XML 視圖的名稱，以及該應用依賴的 SAP UI5 庫列表。

這個應用的全部源代碼介紹到此結束。相信有了本文的基礎，SAP UI5 的初學者，再回過頭去查閱 SAP UI5 官方網站上使用 Viz 庫繪制圖表的例子，理解起來會覺得容易得多。

感謝閱讀。

Jerry 的 SAP UI5 專題

• 在沒有任何前端開發經驗的基礎上, 創建第一個 SAP Fiori Elements 應用

• 答網友提問：使用 SAP Fiori Tools 創建的 Fiori Elements 應用，如何進行二次開發？

• 本地開發好的 SAP Fiori Elements 應用，如何部署到 ABAP 服務器上

• 深入掌握 SAP Fiori Elements 工作原理的前提條件：理解 Smart Field

• 深入理解 SAP Fiori Elements 工作原理系列之二：如何給 SAP Fiori Elements 應用添加自定義按鈕

• SAP Fiori Elements 框架里 Smart Table 控件的工作原理介紹

• SAP Fiori Elements List Report Smart Table 列項目寬度計算的奧妙

• 作為一名 ABAP 資深顧問，下一步可以選擇哪一門 SAP 技術作為主攻方向？

• SAP UI5應用開發人員了解UI5框架代碼的意義

• SAP UI5 module懶加載機制

• SAP UI5 控件渲染機制

• HTML原生事件 VS SAP UI5 Semantic事件

• SAP UI5控件元數據的元數據實現

• SAP UI5控件的實例數據修改和讀取邏輯

• SAP UI5控件數據綁定的實現原理

• SAP UI5控件數據綁定的三種模式：One Way, Two Way和OneTime實現原理比較

• 談談 SAP UI5 的視圖控件 ID，以及其和 Angular 視圖的異同

• 對 SAP UI5 一無所知的新手，從哪些材料開始學習比較好？

• SAP UI5 OData謠言粉碎機：極短時間內發送兩個Odata request,前一個會自動被cancel掉嗎？

• SAP UI 搜索分頁技術

• 如何在 SAP UI5 應用中集成第三方庫 ：一個在移動設備上查看 Web 應用打印調試信息的小技巧

• 基于 OData 模型和 JSON 模型的 SAP UI5 表格控件行項目的添加和刪除實現

• 紀念特洛伊英雄 Sinon - SAP UI5 Mock Server 使用步驟和工作原理介紹

• 本地修改遠端 SAP UI5 框架文件的一個小技巧

更多Jerry的原創文章，盡在：“汪子熙”:

總結

以上是生活随笔為你收集整理的一个详尽的面向 SAP UI5 初学者的教程 - 如何在 SAP UI5 中绘制图表 Chart的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。