Sapui5 如何在框架图中实现线性回归线？

我有一个散点图，其中需要包括一条线性回归/趋势线。你知道怎么做吗？这似乎不是vizframe“开箱即用”提供的产品？我找不到解决这个问题的办法

问题：

关于在散点图或框架图上实现回归线的可行方法，有何建议

这是我的设置代码。按下按钮时，散点图在对话框/模式中打开

sap.ui.define([
        'jquery.sap.global',
        'vizConcept/controller/BaseController',
        'sap/ui/model/json/JSONModel',
        'vizConcept/model/viewControls',
        'sap/m/Button',
        'sap/m/Dialog',
    ],

    function (jQuery, BaseController, JSONModel, viewControls, Button, Dialog) {

        "use strict";

        var controls;

        var mainController = BaseController.extend("vizConcept.controller.Main", {

            onInit: function(oEvent) {

                // Access/expose the defined model(s) configured in the Component.js or Manifest.json within the controller.
                this.getView().setModel(this.getOwnerComponent().getModel("products"), "products");
                var oModel = this.getView().getModel("products");
                this.getView().setModel(oModel);

                var sUrl = "#" + this.getOwnerComponent().getRouter().getURL("page2");

        $(function() {
            var dataset = new sap.viz.ui5.data.FlattenedDataset({ 
                dimensions : [
                 {
                   axis : 1,
                   name : 'Award Date',
                   value : "{AwdDate}"
                 }
                ],
                measures : [
                            {
                            group: 1,
                                name : 'Award Date',
                                value : '{Hist}'
                            },
                            {
                            group: 2,
                                name : 'Current PPI',
                                value : '{Current}'
                            }
                ],
                data : {
                  path : "/ProductCollection"
                }   
              });


        var scatterViz = new sap.viz.ui5.Scatter({
                id : "idscatter",
                width : "1000px",
                height : "400px",
                title : {
                  text : 'Pricing Tool Scatter Plot Example'
                },
                xAxis : {
                  title : {
                    visible : true
                  }
                },
                yAxis : {
                  title : {
                    visible : true
                  }
                },
                dataset : dataset
              });

          scatterViz.setModel(sap.ui.getCore().getModel());  
          scatterViz.setModel(oModel);


      var dlg = new sap.m.Dialog({
        id: 'vizModal',    
        title: 'Scatter Plot Example Viz',
        width : "1800px",  
        height : "600px",  
        content : [scatterViz],
        beginButton: new Button({
                            text: 'Close',
                            press: function () {
                                dlg.close();
                            }
                        })  
      });

      (new sap.m.Button({
            text: 'open',
            type: 'Accept',
            press: function() {
              dlg.open();
              scatterViz.invalidate();
            }
          })).placeAt('content');
        });
            },    

        onToPage2 : function () {
            this.getOwnerComponent().getRouter().navTo("page2");
        },


        });

        return mainController;
    });

编辑

这是在VIZ框架图上输出的“产品”模型。我在manifest.json中定义了产品模型，但那里的连接很好：

产品型号

          {
            "ProductCollection": [
                { 
                    "Item": "1",
                    "AwdDate": "20160715",
                    "Hist": 171.9,
                    "Current": 183

                },
                {
                    "Item": "2",
                    "AwdDate": "20160701",
                    "Hist" : 144.3,
                    "Current": 158.6
                },
                {
                    "Item": "3",
                    "AwdDate": "20150701",
                    "Hist": 160,
                    "Current": 165
                },
                { 
                    "Item": "1",
                    "AwdDate": "20160715",
                    "Hist": 201,
                    "Current": 167
                },
                {
                     "Item": "2",
                    "AwdDate": "20160801",
                    "Hist" : 175.3,
                    "Current": 178.2
                },
                {
                    "Item": "3",
                    "AwdDate": "20150721",
                    "Hist": 160,
                    "Current": 147
                },
                { 
                    "Item": "1",
                    "AwdDate": "20160715",
                    "Hist": 175.9,
                    "Current": 185.2
                },
                {
                    "Item": "2",
                    "AwdDate": "20161101",
                    "Hist" : 165.3,
                    "Current": 158.2
                },
                {
                    "Item": "3",
                    "AwdDate": "201700101",
                    "Hist": 160,
                    "Current": 165
                },
                {
                    "Item": "4",
                    "AwdDate": "201600401",
                    "Hist": 173,
                    "Current": 177
                }

            ]
        };    

编辑2 以下是我尝试提供的解决方案。但是，在控制器的onInit（）函数中包含此项之后，不会显示任何内容

var regressionData = [];
for (var i = 0; i < 10; i++) {
regressionData[i] = [oData.ProductCollection[i].Current, oData.ProductCollection[i].Hist];
            };

regression('linear', regressionData);  

var回归数据=[]；
对于（变量i=0；i<10；i++）{
回归数据[i]=[oData.ProductCollection[i]。当前，oData.ProductCollection[i]。历史]；
};
回归（“线性”，回归数据）；

不幸的是，viz图表有一些固有的局限性。即：

• 不能将“斜”参考线（=趋势线）添加到图表中。您只能通过功能添加垂直/水平。查看（非直观的）文档：（查看plotArea.referenceLine.line；它只是一个数字=将是一条水平/垂直线，具体取决于图表类型或方向）
• 不能将散点图与折线图组合。如果你看相同的，你会发现在左边的组合“章节”中，没有“线-散”组合

此外，您的X值（AwDate）是ABAP样式的日期，如字符串。更适合使用日期/时间图表来正确显示它们。不管怎样，当你使用日期时，回归就更有意义了。否则，您的数据是“分类”的，您可以进行回归的唯一方法是对它们进行排序，并考虑它们在X轴上的等距-而不是您通常想要的非等距数据（如示例中的数据）

我的建议是：

• 使用折线图而不是散点图（这样也可以显示趋势线）
• 将ABAP样式字符串转换为日期，以便可以使用timeseries图表。您的示例数据中有一些“错误”的日期，顺便说一句：“201600401”
• 对你想要的任何东西进行回归，并将其添加为一个单独的“趋势”系列。您需要为其他系列上的每个点计算“趋势”系列上的一个点（基本上，您必须为ProductCollection中的每一行添加一个“趋势”属性）。如果您使用的是OData模型，那么您将需要切换到JSON客户机模型，或者使用格式化程序执行一些难看的变通方法

根据要求，我在这里做了一个示例实现：。我从这里借用的回归算法：。守则的要点如下：

//用于解析ABAP样式日期的格式
var oFormat=DateFormat.getDateInstance({
模式：“yyyyMMdd”
});
//将ProductCollection条目映射到新对象
//其中包含解析的日期（并且仅包含所需的属性）
var fnMapData=函数（入口）{
返回{
日期：oFormat.parse（oEntry.AwdDate），
电流：oEntry，电流，
历史：oEntry.Hist
};
};
变量fnProcessData=函数（oD）{
var aEntries=oD.ProductCollection.map（fnMapData），
aXs=aEntries.map（函数（oE）{//获取Xs
//我们用毫秒来做算术
返回oE.date.getTime（）；
}),
aYs=aEntries.map（函数（oE）{//获取Ys（hist）
返回oE.historical；
}),
//将函数更改为仅返回结果Ys
aRs=FindLineByEastSquares（aXs，aYs）；
//将Y保存到结果中
对于（变量i=0；i

---

然后，您可以在JSONModel中使用

fnProcessData

函数返回的数据，然后在此基础上构建一个简单的多序列日期/时间折线图。

您有线性回归线的数据吗？@Jaro刚刚添加了显示在我的图表上的模型。请让我知道我是否可以提供更多的信息或示例的压缩文件，谢谢添加数据，但我指的是线性回归数据。或者你希望这些数据是由某个VizFrame方法生成的？@Jaro我已经添加了第二个编辑，我一直在尝试遵循这个编辑。如果操作正确，应该会在散点图上生成一个回归图。@jaro“Hist”线的线性回归就是我要找的