SAP UI5 中的仪表/表盘

Question

我有一个要求，其中我需要在显示温度传感器数据的页面中显示仪表/刻度盘 - 范围从 -100 到 200 C。我研究并发现 SAP UI5 只有一个仪表（径向微图）到百分比值，因此它仅显示 0 到 100。

经过一番研究，我找到了这个链接：

https://blogs.sap.com/2014/03/07/gauges-in-sapui5/

这里作者创建了一个 gauge.js 文件来在您的页面中添加自定义表盘/仪表。

我遵循的步骤：

1. 我在项目中添加了 gauge.ds。

2. 我在 index.html 中添加了以下内容：

3. 我的 XML 视图如下：

           <!-- Row-1 -->
           <Panel id="idRow1" height="350px" width="1500px" class="sapUiResponsiveMargin">
               <content>
                   <HBox>
                       <Panel id="idPanel" height="300px" width="700px">
                           <content>
                               <HBox>
                                   <FlexBox id="idSensor1" height="100px" width="100%">
                                       <items>
                                           <VBox>
                                               <Label text="Flow" class="donutDescription" align="Center" />
                                               <micro:RadialMicroChart id="idGaugeSensor1"
                                                   percentage="50" total="50">
                                               </micro:RadialMicroChart>
   
   
                                               <Slider enableTickmarks="true" showAdvancedTooltip="true"
                                                   min="0" max="100" id="idInputSensor1" class="sapUiSmallMarginBottom"
                                                   change="onChange">
                                               </Slider>
                                               <Label text="UOM: L/s" class="donutDescription" align="Center" />
   
                                           </VBox>
   
                                       </items>
                                   </FlexBox>
                                   <FlexBox height="100px" width="100px">
                                       <items>
   
                                           <Label text="" />
   
   
   
                                       </items>
                                   </FlexBox>
                                   <FlexBox id="idSensor2" height="100px" width="100%">
                                       <items>
                                           <VBox>
                                               <Label text="Pressure" class="donutDescription" />
                                               <micro:RadialMicroChart id="idGaugeSensor2"
                                                   percentage="125" total="125">
                                               </micro:RadialMicroChart>
   
                                               <Slider enableTickmarks="true" showAdvancedTooltip="true"
                                                   min="0" max="100" id="idInputSensor2" class="sapUiSmallMarginBottom"
                                                   change="onChange">
                                               </Slider>
   
                                           </VBox>
   
                                       </items>
                                   </FlexBox>
                               </HBox>
                           </content>
                       </Panel>
   
                   </HBox>
               </content>
           </Panel>
   
   
       </content>
   </Page>
   

我需要添加刻度盘/仪表来代替当前放置在 <FlexBox id="idSensor1"> 和 <FlexBox id="idSensor2"> 中的径向图

4. 我的控制器如下：

   sap.ui.define(['sap/m/MessageToast','sap/ui/core/mvc/Controller'], 功能（MessageToast，控制器）{ “使用严格”；

       var PageController = Controller.extend("sensor.Sensor", {
   
   
           onInit: function(){
   
   
           },
   
   
       });
   
       return PageController;
   
   });
   

我无法理解或弄清楚我应该在哪里添加和调用 gauge.js 函数来创建刻度盘/仪表以便可以将其放置在我想要的位置？

Answer 1

您引用的博客将指导您使用自定义库，该库通过将创建的 Gauge 放置在容器元素中来使用。理想情况下，最佳做法是创建自定义控件并在 XML 视图中使用该控件。

您可以将它们作为外部资源添加到清单文件中，而不是在 index.html 中声明这些库。您还需要包含 d3.js，因为它是量规库所必需的。

"models": {
  .....
},
"resources": {
        "js":[
            {
                "uri": "lib/d3.js"
            },
            {
                "uri": "lib/gauge.js"
            }
        ]
}

在 XML 视图中，我们需要一个容器来放置仪表控件。

<FlexBox
        width="95%"
        id="gaugeFlexBox"
        alignItems="Stretch">               
</FlexBox>

该库定义了一个全局 Gauge 对象，该对象可用于在控制器中为视图创建仪表。

    onInit: function(){
        this.gauges = [];  //Array of Gauge objects

    },

    onAfterRendering: function () {
        this.oGaugeBox = this.byId("gaugeFlexBox");
        this.oGauge = this.createGauge(this.oGaugeBox.sId, "My KPI", 0, 50);
        this.oGauge.redraw(25); //Set a value to the gauge

    },

    createGauge : function (container, label, min, max){
            var config = 
            {
                size: 120,
                label: label,
                min: undefined != min ? min : 0,
                max: undefined != max ? max : 100,
                minorTicks: 5
            }

            var range = config.max - config.min;
            config.yellowZones = [{ from: config.min + range*0.75, to: config.min + range*0.9 }];
            config.redZones = [{ from: config.min + range*0.9, to: config.max }];

            this.gauges[container] = new Gauge(container, config);
            this.gauges[container].render();
            return this.gauges[container];
   }

注意：这绝对不是一个好习惯，因为创建的 Gauge 控件不是 UI5 控件。要使其成为 UI5 控件，您必须将其扩展为自定义控件。

Answer 2

我能够通过上面@Stephen提到的方法和方法来实现它。

我在 index.html 中添加了两个 js 文件

然后在我的控制器中，在 sap.ui.define 中，我添加了到 gauge.js 的路径

这样我就可以调用 gauge.js 函数了。

非常感谢！