Gauge/Dial 在 SAP UI5 中

Question

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

经过一些研究，我发现了这个link：

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

此处作者创建了一个 gauge.js 文件以在您的页面中添加自定义 dial/gauge。

我遵循的步骤：

我在我的项目中添加了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>

我需要添加 dial/gauge 来代替当前放置在 <FlexBox id="idSensor1"> & <FlexBox id="idSensor2">

中的径向图表

我的控制器如下：

sap.ui.define(['sap/m/MessageToast','sap/ui/core/mvc/Controller'], 功能（MessageToast，控制器）{ "use strict";
```
    var PageController = Controller.extend("sensor.Sensor", {


        onInit: function(){


        },


    });

    return PageController;

});
```

我无法理解或弄清楚我应该在哪里添加和调用 gauge.js 函数来创建 dial/gauge 以便它可以放在我想要的地方？

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 个函数。

非常感谢！

Gauge/Dial 在 SAP UI5 中

Gauge/Dial in SAP UI5

javascript

gauge

sapui5