SAPUI5 vizFrame折线图-如果可以在Y轴上将正值显示为负值

时间:2019-05-17 18:29:21

标签: javascript sapui5 linechart

我只需要转换正值即可在带有vizFrame折线图的SAPUI5上显示为负数。这与显示数据的业务意义有关。

当前,该图形通过显示数据来工作,其中考虑了数据来自oData服务的符号。同时,一些绘制的数据由用户输入。

Picture - actual app state/in red coulor desired state

在XML视图中输入数据。为了获得良好的效果,我尝试按事件在输入字段中修改模型,并将输入值乘以-1

由于以下几个原因,该解决方案效果不佳-例如您需要至少进行两次更改以更正该值。

在目标解决方案中,我想使图形的显示独立于数据输入,即用户输入正/负数据,并且图形以相反的符号绘制它们。

我的控制器-图表设置:

  _setupChart: function() {
            var formatPattern = ChartFormatter.DefaultPattern;
            var oVizFrame = this.oVizFrame = this.getView().byId("idVizFrame");

          //Set popOver
            var oPopOver = this.getView().byId("idPopOver");
            oPopOver.connect(oVizFrame.getVizUid());

            oVizFrame.setVizProperties({
                
                   plotArea: {
                	//Set size of chart - without zoom
                    window: {
                        start: "firstDataPoint", 
                        end: "lastDataPoint"
                    },
                    isSmoothed: true,
                    interaction: {
                        selectability: {
                            mode: "exclusive",
                            syncValueAxis: false
                        }
                    },
                    drawingEffect: "glossy",
                    dataLabel: {
                        type: 'value',
                        visible: true
                    },
                    dataShape: {
                        primaryAxis: ["line", "bar", "line", "bar"]
                    },
                    line: {
                        marker: {
                          shape: "circle",
                          size: 7,
                          visible: true
                        }
                      }
                },
                valueAxis: {
                    title: {
                        type: 'value',
                        visible: false
                    }
                },
                categoryAxis: {
                    title: {
                        visible: true,
                    }
                },
                title: {
                    visible: false,
                    text: "title",
                }
            });
        },

任何帮助将不胜感激。

0 个答案:

没有答案