在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函數創建撥號/壓力錶，以便它可以放在哪裏我要？

來源

2017-06-22 Soham Shah

您引用的博客指導您使用通過將創建的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控件，您必須將其擴展爲自定義控件。

來源

2017-06-22 12:53:52

感謝您提供詳細信息，但是如果我的項目沒有清單文件，它只是一個簡單的單頁應用程序會怎麼樣？ –

您可以將其添加到組件聲明元數據中：名稱：「應用程序」，版本：「1.0」，包括：[「lib/gauge.js」，「lib/d3.js」]， –

我能夠通過上述@Stephen提到的方法和方法實現它。

我在的index.html在我的控制器中添加兩個js文件

然後，在sap.ui.define，我添加路徑gauge.js

這樣我就能夠調用計.js函數。

謝謝！

來源

2017-06-22 22:55:55

在SAP UI5中的量表/

回答

相關問題