UI5 1.71版本VizFrame Bullet Chart的SelectData返回Null问题

核心问题定位 #

你遇到的问题是因为事件参数名称使用错误，同时存在不必要的手动调用事件处理函数的代码，导致无法获取点击的分类数据。

解决方案步骤 #

1. 纠正事件参数获取方式

在onClickEventVizFrame函数中，UI5 1.71版本的selectData事件返回的选中数据参数名为selectedData，而非你注释里的data。修改后的函数代码如下：

onClickEventVizFrame: function (oControlEvent) {
    var selectedData = oControlEvent.getParameter('selectedData');
    console.log("选中的图表数据：", selectedData);
    
    // 提取点击的分类（Item Category）
    if (selectedData && selectedData.length > 0) {
        var clickedCategory = selectedData[0].data["Item Category"]; // 对应DimensionDefinition的name属性
        console.log("点击的分类：", clickedCategory);
    }
}

2. 移除不必要的手动调用

在onInit方法中，你手动调用了this.onClickEventVizFrame();，这会导致页面初始化时无参数触发函数，和点击事件无关，直接删除这行代码：

onInit: function () {
    // ... 其他代码保持不变 ...
    this.onReadTableData();
    this.onReadVizFrameData();
    // 移除下面这行代码
    // this.onClickEventVizFrame();
}

3. （可选）显式开启图表交互

虽然Bullet Chart默认支持选中交互，但可以在vizProperties中显式配置交互规则，确保功能正常：

<viz:VizFrame id="oVizFrame" selectData="onClickEventVizFrame" busy="false" busyIndicatorDelay="1000" visible="true"
    uiConfig="{ 'applicationSet': 'fiori' }" vizType="bullet" legendVisible="false"
    vizProperties="{ 
        valueAxis: { title: { visible: false, text: 'Vertical Info' } }, 
        title: { visible: true, text: 'Accounts for Total Payroll' }, 
        plotArea: { 
            colorPalette: ['#00b482'],
            interactivity: {
                selectability: {
                    mode: 'single' // 可选值：single/multiple/none
                }
            }
        } 
    }">

验证效果 #

修改完成后，点击Bullet Chart的任意分类项，控制台会输出完整的选中数据对象，以及对应的分类名称，即可正常获取点击的分类信息。

内容的提问来源于stack exchange，提问作者Evan Grant