在SAP UI5中的量表/

问题描述：

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

经过一番研究，我发现这个链接：

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

这里笔者创建了一个gauge.js文件添加自定义您的网页拨号/压力表。

的步骤，我跟着：

我已经在我的项目加入gauge.ds。
我加入index.html中以下内容：

我的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">

我的控制器是如下：

sap.ui .define（['sap/m/MessageToast'，'sap/ui/core/mvc/Controller']， function（MessageToast，Controller）{“use strict”;
```
var PageController = Controller.extend("sensor.Sensor", { 


     onInit: function(){ 


     }, 


    }); 

    return PageController; 

}); 
```

我无法理解或找出我应该在哪里添加和调用gauge.js函数创建拨号/压力表，以便它可以放在哪里我要？

答

您引用的博客指导您使用通过将创建的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控件，您必须将其扩展为自定义控件。

感谢您提供详细信息，但是如果我的项目没有清单文件，它只是一个简单的单页应用程序会怎么样？ –

您可以将其添加到组件声明元数据中：名称：“应用程序”，版本：“1.0”，包括：[“lib/gauge.js”，“lib/d3.js”]， –

答

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

我在的index.html在我的控制器中添加两个js文件

然后，在sap.ui.define，我添加路径gauge.js

这样我就能够调用计.js函数。

谢谢！

在SAP UI5中的量表/

相关推荐