不同的条形颜色取决于 SAPUI5 VizFrame 中的值

Question

我有一个 SAPUI5 VizFrame，其中包含一个 DimensionDefinition、Currency 和两个 MeasureDefinition、Turnover 和 Cost。成本应始终具有相同的颜色（我使用了 sapUiChartPaletteSequentialHue1）。如果成本高于营业额，营业额应具有颜色 sapUiChartPaletteSemanticBad，如果营业额高于或等于成本，则营业额应具有颜色 sapUiChartPaletteSemanticGood。

这是视图中的代码：

                    <viz:VizFrame xmlns="sap.viz" id="idDetailVizFrame" vizType='column' width="100%" height="100%" uiConfig="{applicationSet:'fiori'}">
                    <viz:dataset>
                        <vizData:FlattenedDataset data="{/DataSet}">
                            <vizData:dimensions>
                                <vizData:DimensionDefinition name="Currency" value="{Currency}"/>
                            </vizData:dimensions>
                            <vizData:measures>
                                <vizData:MeasureDefinition identity="idCost" name="{i18n>labelCost}" value="{Cost}" unit="{Currency}" />
                                <vizData:MeasureDefinition identity="idTurnover" name="{i18n>labelAccountBalance}" value="{Turnover}" unit="{Currency}" />
                            </vizData:measures>                             
                        </vizData:FlattenedDataset>
                    </viz:dataset>
                    <viz:feeds>
                        <vizFeeds:FeedItem id='valueCost' uid="valueAxis" type="Measure" values='idCost'/>
                        <vizFeeds:FeedItem id='valueTurnover' uid="valueAxis" type="Measure" values='idTurnover'/>
                        <vizFeeds:FeedItem id='categoryAxisFeed' uid="categoryAxis" type="Dimension" values="Currency"/>
                    </viz:feeds>
                </viz:VizFrame>

这是控制器中代码的相关部分：

                plotArea: {
                dataLabel: {
                    visible: false
                },
                dataPointStyle: {
                            "rules":
                            [
                                {
                                    "dataContext": {"idTurnover": {"min": 0}},
                                    "properties": {
                                        "color":"sapUiChartPaletteSemanticBad"
                                    },
                                    "displayName":"Loss"
                                },
                                {
                                    "dataContext": {"idTurnover": {"max": 0}},
                                    "properties": {
                                        "color":"sapUiChartPaletteSemanticGood"
                                    },
                                    "displayName":"Profit"
                                }                                       
                            ],
                            "others":
                            {
                                "properties": {
                                     "color": "sapUiChartPaletteSequentialHue1"
                                },
                                    "displayName":"Cost"                                    
                            }
                        }                    
            },

使用此代码，成本条始终是相同颜色，营业额小于 0 时营业额条为红色，营业额大于 0 时为绿色。但我不想将值与 0 进行比较，而是想比较它到成本栏。如果 Turnover >= Cost，颜色为 sapUiChartPaletteSemanticGood，如果 Turnover < Cost，颜色为 sapUiChartPaletteSemanticBad。如何比较这 2 个值？

Answer 1

您需要使用回调来执行两个属性之间的比较，而不是 dataContext。示例代码如下：-

dataPointStyle: {
                        rules: [{
                            callback: function (oContext, extData) {
                                /* I can access my Turnover value by using :- */
                                //oContext.Turnover
                                /* I can access my Cost value by using :- */
                                //extData.Cost
                                
                                //Return either true or false, based on your logic,
                                 return oContext.Turnover < extData.Cost;
                            },
                            properties: {
                                color: "sapUiChartPaletteSemanticBad"
                            },
                            displayName: "Loss"
                        },
                        {
                            callback: function (oContext, extData) {
                                  return oContext.Turnover >= extData.Cost;
                            },
                            properties: {
                                color: "sapUiChartPaletteSemanticGood"
                            },
                            displayName: "Profit"
                        }],
                        others: {
                            properties: {
                                color: "sapUiChartPaletteSequentialHue1",
                            },
                            displayName: "Cost"
                        }
                    }

vizframe 用于复制问题：-

<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="Turnover" value="{Turnover}"/>
                            <viz.data:MeasureDefinition name="Cost" value="{Cost}"/>
                        </viz.data:measures>
                    </viz.data:FlattenedDataset>
                </viz:dataset>
                <viz:feeds>
                    <viz.feeds:FeedItem id='valueAxisFeed1' uid="valueAxis" type="Measure" values="Turnover"/>
                    <viz.feeds:FeedItem id='valueAxisFeed2' uid="valueAxis" type="Measure" values="Cost"/>
                    <viz.feeds:FeedItem id='categoryAxisFeed' uid="categoryAxis" type="Dimension" values="Week"/>
                </viz:feeds>
            </viz:VizFrame>

不同的条形颜色取决于 SAPUI5 VizFrame 中的值

Different bar color depending on values in SAPUI5 VizFrame

sapui5