這是 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 架構檔案的一個小技巧