Question

专家，我想开发一个按钮来破坏表格并在同一视图中显示图表。我怎样才能做到这一点？

Answer 1

在这种情况下，ChartContainer控件最适合您的需要。该控件允许您在图表和图表之间切换。表格控件以及其他一些很酷的功能。控件中的切换按钮将允许您在表格和表格之间切换。图表视图。

这是一个简单的例子

XML代码

<mvc:View
controllerName="com.sap.app.controller.Detail"
xmlns:mvc="sap.ui.core.mvc"
xmlns:sc="sap.suite.ui.commons"
xmlns:layout="sap.ui.layout" 
xmlns:u="sap.ui.unified"
xmlns:core="sap.ui.core"
xmlns:viz="sap.viz.ui5.controls"
xmlns="sap.m">
    <sc:ChartContainer
        id="chartContainer"
        showFullScreen="true"
        showPersonalization="false"
        autoAdjustHeight="true"
        showLegend="true"
        contentChange="attachContentChange"
        title="My Products">
        <sc:content>
            <sc:ChartContainerContent
                icon = "sap-icon://line-chart"
                title = "Line Chart">
                <sc:content>
                    <viz:VizFrame id="chartContainerVizFrame" height="100%" width="100%" uiConfig="{applicationSet:'fiori'}"></viz:VizFrame>
                </sc:content>
            </sc:ChartContainerContent>
            <sc:ChartContainerContent
                icon = "sap-icon://table-view"
                title = "Table">
                <sc:content>
                    <Table id="chartContainerContentTable" items="{/Products}">
                    <columns>
                        <Column
                            width="12em">
                            <Text text="Product" />
                        </Column>
                        <Column
                            hAlign="Right">
                            <Text text="Price" />
                        </Column>
                    </columns>
                    <items>
                        <ColumnListItem>
                            <cells>
                                <Text
                                    text="{ProductName}" />
                                <Text
                                    text="{UnitPrice}" />

                            </cells>
                        </ColumnListItem>
                    </items>
                    </Table>
                </sc:content>
            </sc:ChartContainerContent>
        </sc:content>
    </sc:ChartContainer>

</mvc:View>

控制器代码

onInit: function () {


        var oVizFrame = this.getView().byId("chartContainerVizFrame");
        var oTable = this.getView().byId("chartContainerContentTable");

        var oModel = new sap.ui.model.json.JSONModel({
            Products : [
                {ProductName:"Laptop", UnitPrice:50},
                {ProductName:"Desktop", UnitPrice:20},
                {ProductName:"Mobile", UnitPrice:30}
            ]
        });
        var oDataset = new sap.viz.ui5.data.FlattenedDataset({
            dimensions: [{
                name: "Name",
                value: "{ProductName}"
            }],
            measures: [{
                name: 'Price',
                value: '{UnitPrice}'
            }],
            data: {
                path: "/Products"
            }
        });

        oVizFrame.setDataset(oDataset);
        oVizFrame.setModel(oModel);
        oTable.setModel(oModel);

        var feedValueAxis = new sap.viz.ui5.controls.common.feeds.FeedItem({
            'uid': "valueAxis",
            'type': "Measure",
            'values': ["Price"]
        }),
        feedCategoryAxis = new sap.viz.ui5.controls.common.feeds.FeedItem({
            'uid': "categoryAxis",
            'type': "Dimension",
            'values': ["Name"]
        });

    oVizFrame.setVizProperties({
        valueAxis: {
            label: {
                formatString: 'u'
            }
        },
        plotArea: {
            dataLabel: {
                visible: true,
                formatString: "#,##0"
            }
        },
        legend: {
            title: {
                visible: false
            }
        },

        title: {
            visible: true,
            text: 'Product Price'
        }
    });



    oVizFrame.addFeed(feedValueAxis);
    oVizFrame.addFeed(feedCategoryAxis);


    },

如何在SAPUI5中销毁和显示内容？

1 个答案: