javascript - 在 SAPUI5 中使用 FacetFilters 在图表容器中进行过滤

Question

我正在使用 SAPUI5 库，我想将 FacetFilter 与 ChartContainer 元素一起使用。当我单击 FacerFilter 中的复选框时，我希望图表容器中的某些图表会受到影响。图表容器可以在下面的链接中找到: https://sapui5.hana.ondemand.com/sdk/explored.html#/entity/sap.suite.ui.commons.ChartContainer/samples 所以我的问题是如何将我的 facetfilters 项目与容器图表绑定(bind)。 我的测试.view.xml；

Edit1:我将 FacetFilters 放在 dimensionselector 中。

 <ChartContainer
    id="idChartContainer"
    showFullScreen="true"
    showPersonalization="true"
    autoAdjustHeight="true"
    showLegend="true"
    personalizationPress="attachPersonalizationPress"
    contentChange="attachContentChange">

    <dimensionSelectors>
        <m:FacetFilter
            id="facetFilterChart2"
            type="Simple"
            showPersonalization="false"
            showReset="true"
            reset="onFacetFilterReset" showPopoverOKButton="true">

            <m:lists>

                <m:FacetFilterList 
                    title="{oModel>/Facet01/Title}"
                    key="{oModel>/Facet01/Key}"
                    multiselect="true"
                    listClose="onFacetClosed"
                    items="{oModel>/Facet01/Items}" >

                    <m:items>
                        <m:FacetFilterItem
                             key="{oModel>Key}"
                             text="{oModel>Text}" />
                    </m:items>
                </m:FacetFilterList>

            </m:lists>
        </m:FacetFilter>
    </dimensionSelectors>

    <content>
        <ChartContainerContent
            icon = "sap-icon://horizontal-bar-chart" 
            title = "vizFrame Bar Chart Sample"> 
            <content>
                <viz:VizFrame id="idoVizFrame"> </viz:VizFrame>
            </content>
        </ChartContainerContent>
                    ... 

我想在我的可视化框架中使用这些 facetfilters 并使用 facet 过滤器复选框过滤我的数据。还有我的 test.controller.js；

oModel : {

      Toolbar : {

        Design : "Solid"
      },

      Facet01 : {
        Key : "Facet01",
        Title : "Departmanlar",
        Items : [
          { Key : "k1", Text : "İnsan Kaynakları" },
          { Key : "k2", Text : "Satış & Pazarlama" },
          { Key : "k3", Text : "Satınalma" },
          { Key : "k4", Text : "Finans" },
          { Key : "k5", Text : "SSH" }
        ]

      }
},

onInit : function(oEvent) {
      var oVizFrame = this.getView().byId("idoVizFrame");
      oVizFrame.setDataset(oDataset2);
      oVizFrame.setModel(amModel2);
      oVizFrame.addFeed(feedPrimaryValues2);
      oVizFrame.addFeed(feedAxisLabels2);
      oVizFrame.setVizType('bar');
      var oSelect1 = this.getView().byId("idoSelect1");

Answer 1

您的 XML 绑定(bind)看起来不正确。正确的做法是:

<m:FacetFilter
            id="facetFilterChart2"
            type="Simple"
            showPersonalization="false"
            showReset="true"
            reset="onFacetFilterReset" 
            showPopoverOKButton="true"
            lists="{model>/Facet01}">
            <m:lists>
                <m:FacetFilterList 
                    title="{oModel>Title}"
                    key="{oModel>Key}"
                    multiselect="true"
                    listClose="onFacetClosed"
                    items="{oModel>/Items}" >
                    <m:items>
                        <m:FacetFilterItem
                             key="{oModel>Key}"
                             text="{oModel>Text}" />
                    </m:items>
                </m:FacetFilterList>
            </m:lists>
</m:FacetFilter>

在controller中设置模型

var oFacetFilterModel = new sap.ui.model.json.JSONModel(this.oModel);
this.getView().byId("facetFilterChart2").setModel(oFacetFilterModel,"oModel");