Блог

У меня есть визфрейм SAPUI5 с одномерным определением валюты и двухмерным определением оборота и стоимости. Стоимость всегда должна иметь один и тот же цвет (я использовал sapUiChartPaletteSequentialHue1). Оборот должен иметь цвет sapUiChartPaletteSemanticBad, если стоимость выше оборота, и цвет sapuichartpalettesemantic GOOD, если оборот выше или равен стоимости.

Это код в представлении:

                     <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 я хочу сравнить его с таблицей затрат. Если оборот >= Стоимость, цвет — sapuichartpalettesemantic GOOD, если оборот < Стоимость, цвет — sapUiChartPaletteSemanticBad. Как можно сравнить эти 2 значения?

Вместо 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>