Question

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

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

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（[＆＃39; SAP /米/ MessageToast＆＃39;＆＃39; SAP / UI /核心/ MVC /控制器＆＃39]， function（MessageToast，Controller）{ ＆＃34;使用严格的＆＃34 ;;
```
    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中，我添加了gau.js的路径

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

非常感谢！

SAP UI5中的量表/拨号

2 个答案: