javascript - 在 dataPointStyle 规则回调中获取 SAPUI5 VizFrame 的 id

Question

我正在生成一些动态 vizframe 柱形图，方法是循环处理从我的 Odata 服务获得的响应。我对图表的要求之一是根据数据中的字段值以不同颜色显示列。我们称之为验证状态。

我非常清楚如何在正常情况下通过使用 setVizProperties 方法并为 dataPointStyle 属性设置规则来实现这一点。如果我对所有图表和所有值都有相同的标准，它仍然是可能的。但事实并非如此，因为我需要单独检查每条记录以确定其状态。所以我想到了使用 dataPointStyle 的回调功能。但这里的问题是，虽然它给了我上下文，但它没有告诉我这个回调是从哪个图表触发的。我的想法是，如果我得到图表名称或它的引用，那么我就可以访问它的模型并确定颜色。

因此，如果我能以某种方式从触发回调的位置获取 vizframe 的引用，它将解决我的问题。

callbackDescription:function (data, extData) {...} => true|falseA function to determine whether a given data matches the rule. Parameters:data is an object with all bound field ids as keys, and corresponding values as values. It helps to consider it as the object containing everything you see in datapoint mouseover tooltip. If unbound dimensions or measures are set in FlatTableDataset context field, the related key/value pairs will be included in this parameter as well.extData is an object with all other measure fields that in the same line with current data point. Measure Ids as keys, and corresponding values as values. It helps to compare value between different measures.

Link to the vizFrame documentation

JSFiddle

我的数据看起来像这样:

[{
    "RunLogId": "0000000040",
    "RuleId": "00016",
    "CreatedOn": "2020-07-21",
    "CreatedAt": "09:44:35",
    "NAV_SUBSCRIBED_LOGS": {
      "results": [
        {
          "RunLogId": "0000000040",
          "Sequence": "00001",
          "RuleId": "00016",
          "Variation": "-3.94",
          "ValidationStatus": "F",
          "Dimension": "ABC"
        },
        {
          "RunLogId": "0000000040",
          "Sequence": "00002",
          "RuleId": "00016",
          "Variation": "1.04",
          "ValidationStatus": "S",
          "Dimension": "DEF"
        }
      ]
    }
  },
  {
    "RunLogId": "0000000033",
    "RuleId": "00014",
    "CreatedOn": "2020-07-15",
    "CreatedAt": "11:10:09",
    "NAV_SUBSCRIBED_LOGS": {
      "results": [
        {
          "RunLogId": "0000000033",
          "Sequence": "00001",
          "RuleId": "00014",
          "Variation": "-2.36",
          "ValidationStatus": "F",
          "Dimension": "ABC"
        },
        {
          "RunLogId": "0000000033",
          "Sequence": "00002",
          "RuleId": "00014",
          "Variation": "-5.05",
          "ValidationStatus": "F",
          "Dimension": "DEF"
        }
      ]
    }
  }]

我的代码看起来像这样:

for (var i = 0; i < chartsCount; i++) {
            var oModel = new JSONModel();
            var chartData = aSubscriptions[i].NAV_SUBSCRIBED_LOGS.results;
            var aDimensions = [];
            var aDimFeeds = [];
            aDimensions.push({
                    name: "Dimension",
                    value: "{Dimension}"
                });
            aDimFeeds.push("Dimension");
            oModel.setData(chartData);
            oModel.refresh();
            
            var oDataset = new FlattenedDataset({
                dimensions: aDimensions,
                measures: [{
                    name: "Variation",
                    value: "{Variation}"
                }],
                data: {
                    path: "/"
                }
            });
            
            var oVizFrame = new VizFrame();
            oVizFrame.setVizType("column");
            oVizFrame.setHeight("450px");
            oVizFrame.setDataset(oDataset);
            oVizFrame.setModel(oModel);
            var feedValueAxisActual = new sap.viz.ui5.controls.common.feeds.FeedItem({
                    "uid": "valueAxis",
                    "type": "Measure",
                    "values": ["Variation"]
                }),
                feedCategoryAxis = new sap.viz.ui5.controls.common.feeds.FeedItem({
                    "uid": "categoryAxis",
                    "type": "Dimension",
                    "values": aDimFeeds
                });
                
            oVizFrame.addFeed(feedValueAxisActual);
            oVizFrame.addFeed(feedCategoryAxis);
            oVizFrame.setVizProperties({
                
                plotArea: {
                    
                    dataPointStyle: {
                        "rules": [
                            {
                                    callback: function (oContext, extData) {
                                        that.checkValue(oContext, "S");
                                    },
                                    "properties": {
                                        "color": "sapUiChartPaletteSemanticGoodLight1"
                                    },
                                    "displayName": "Successful"
                                }
                            , {
                                    callback: function (oContext, extData) {
                                        that.checkValue(oContext, "F");
                                    },
                                    properties: {
                                        color: "sapUiChartPaletteSemanticBadLight1"
                                    },
                                    "displayName": "Failed"
                            }
                        ],
                            others: {
                                properties: {
                                    color: "sapUiChartPaletteSemanticNeutral"
                                },
                                "displayName": "Undefined"
                            }
                    }
                }
            });
            //Chart Container
            var oChartContainer = new ChartContainer();
            var oChartContainerContent = new ChartContainerContent();
            oChartContainerContent.setContent(oVizFrame);
            oChartContainer.addContent(oChartContainerContent);
}

Answer 1

不确定我是否理解正确，但无论如何我都会试一试。如果我错了，请告诉我。

您可以循环创建图表。您想要在回调中访问特定图表。

为什么不在回调中访问 oVizFrame？

首先，我将用 forEach 替换 for 循环。 forEach 为数组中的每个元素调用给定函数:

aSubscriptions.forEach(function(oSubscription) {
    const oModel = new JSONModel();
    const chartData = oSubscription.NAV_SUBSCRIBED_LOGS.results;

    ...
}

在 for 循环中，您的变量被重用。在 forEach 函数中，为每个项目创建了一个新范围。因此，当您在回调中访问 oVizFrame 时，它与您之前声明的相同 oVizFrame。

然后您应该能够在回调中访问 oVizFrame。

oVizFrame.setVizProperties({
    plotArea: {
        dataPointStyle: {
            "rules": [{
                callback: function(oContext, extData) {
                    // >>>>>>>> Do something with oVizFrame <<<<<<<<
                    that.checkValue(oContext, "S");
                },
                ...
            }, {
                callback: function(oContext, extData) {
                    // >>>>>>>> Do something with oVizFrame <<<<<<<<
                    that.checkValue(oContext, "F");
                },
                ...
            }],
            ...
        }
    }
});