Vizframe柱状图标签选中项计数异常：零值项被计入问题求助

问题场景 #

VizFrame柱状图中最后两列的Revenue值为0，点击标签触发弹出框时，系统显示“4 Items selected”，但实际需要仅统计**有效数据项（Revenue≠0）**的数量，此场景应显示“2 Items selected”。

现有代码 #

XML视图代码 #

<viz:Popover id="idPopOver"></viz:Popover>
<viz:VizFrame id="idVizFrame" uiConfig="{applicationSet:'fiori'}"
    height='100%' width="100%" vizType='column'>
    <viz:dataset>
        <viz.data:FlattenedDataset data="{/milk}">
            <viz.data:dimensions>
                <viz.data:DimensionDefinition name="Week"
                    value="{Week}" />
            </viz.data:dimensions>
            <viz.data:measures>
                <viz.data:MeasureDefinition name="Revenue"
                    value="{Revenue}" />
            </viz.data:measures>
        </viz.data:FlattenedDataset>
    </viz:dataset>

    <viz:feeds>
        <viz.feeds:FeedItem id='valueAxisFeed' uid="valueAxis" type="Measure"
            values="Revenue" />
        <viz.feeds:FeedItem id='categoryAxisFeed' uid="categoryAxis" type="Dimension"
            values="Week" />
    </viz:feeds>
</viz:VizFrame>

数据源 #

{
   "milk":[{
         "Week":"Spring '16",
         "Revenue":325020.45
      },{
         "Week":"Summer '16",
         "Revenue":464000.3
      },{
         "Week":"Autumn '16",
         "Revenue":0
      },{
         "Week":"Winter '16",
         "Revenue":0
      }]
}

已尝试的配置 #

let oVizFrame = this.oVizFrame = this.getView().byId("idVizFrame");
oVizFrame.setVizProperties({
    general : {
        groupData : false
    },
    plotArea: {
        dataLabel: {
            formatString: formatPattern.SHORTFLOAT_MFD2,
            visible: true,
            showTotal: true
        }
    },
    legend : { visible : true },
    valueAxis: {
        label: { formatString: formatPattern.SHORTFLOAT },
    },
    categoryAxis: { title: { visible: false  } },
    title: { visible: true },
    tooltip: { visible: true },
    interaction: { selectability: { mode: 'inclusive' } }
});

解决方案 #

提供两种方案适配不同需求：

方案1：从数据源过滤0值项（彻底移除无效列） #

直接在数据绑定前过滤掉Revenue为0的记录，让VizFrame仅加载有效数据：

const oModel = this.getView().getModel();
oModel.read("/milk", {
    success: (oData) => {
        // 过滤出Revenue不为0的记录
        const filteredData = oData.results.filter(item => item.Revenue !== 0);
        // 创建临时JSON模型存储过滤后的数据
        const oFilteredModel = new sap.ui.model.json.JSONModel({ milk: filteredData });
        this.getView().setModel(oFilteredModel, "filtered");
        // 将VizFrame的数据集绑定到过滤后的模型
        this.getView().byId("idVizFrame").getDataset().setData("{filtered>/milk}");
    }
});

方案2：保留0值列显示，仅修正选中计数 #

如果需要展示全量维度但只统计有效数据的选中数量，可监听VizFrame的select事件，手动处理计数：

const oVizFrame = this.getView().byId("idVizFrame");
const oPopover = this.getView().byId("idPopOver");

oVizFrame.attachSelect((oEvent) => {
    const aSelectedData = oEvent.getParameter("data");
    // 过滤出选中项中Revenue不为0的记录
    const validSelectedItems = aSelectedData.filter(item => item.data.Revenue !== 0);
    // 更新弹出框标题为有效项数量
    oPopover.setTitle(`${validSelectedItems.length} Items selected`);
    // 重新绑定弹出框数据到有效项集合
    oPopover.setModel(new sap.ui.model.json.JSONModel({ items: validSelectedItems }));
});

内容的提问来源于stack exchange，提问作者Prashob Thekkyal