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

问题描述

我有一个SAPUI5 VizFrame，其中有一个DimensionDeFinition，货币和两个MeasureDeFinition，周转和成本。成本应该始终具有相同的颜色（我使用了sapUiChartPaletteSequentialHue1）。如果“成本”高于“营业额”，则营业额应具有颜色sapUiChartPaletteSemanticBad；如果“营业额”高于或等于“成本”，则营业额应具有颜色sapUiChartPaletteSemanticGood。

这是视图中的代码：

class QuestionFormView(generic.CreateView):
    form_class = QuestionAnswerForm
    model = Answer
    template_name = 'quiz/question-form.html'
    
    def get_initial(self):
        initial = super(QuestionFormView,self).get_initial()
        initial['question'] = Question.objects.get(pk=self.kwargs['pk'])
        return initial

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

                    <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>

使用此代码，成本栏始终是相同的颜色，当营业额小于0时营业额栏为红色，而大于0则营业额栏为绿色。但是，我想将其与0进行比较，而不是比较费用栏。如果营业额> =成本，则颜色为sapUiChartPaletteSemanticGood，如果营业额

解决方法

您需要使用回调来执行两个属性之间的比较，而不是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 sapui5