如何在 Vizframe 图表中实现线性回归线? [英] How can I implement a linear regression line in a Vizframe Chart?
问题描述
我有一个散点图 Vizframe 图表，我需要在其中包含线性回归/趋势线.知道如何做到这一点吗?看来这不是vizframe开箱即用"提供的东西?我找不到解决方案！
I have a scatter plot Vizframe chart in which I need to include a linear regression/trend line. Any idea how this can be done? It appears this is not something offered by vizframe 'out of box'? I can't find a solution for this!
问题:
关于在散点图 Vizframe 图表上实现回归线的可行方法有什么建议吗?
Any suggestions on a feasible way to implement a regression line on a Scatter Plot Vizframe chart?
这是我的设置代码.按下按钮时，散点图会在对话框/模式中打开.
Here is the code I have for the setup. The scatter plot opens in a dialog/modal when a button is pressed.
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;
});
编辑
这是在 vizframe 图表上输出的产品"模型.我在 manifest.json 中定义了产品模型，但那里的连接很好:
Here is the 'products' model that is outputted on the vizframe chart. I have the products model defined in the manifest.json but the connection there is fine:
产品型号
{
"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() 函数中包含这个之后就什么都没有了.
Edit 2 Here is my attempt at the solution offered here. But nothing appears after this is included in the onInit() function of the controller.
var regressionData = [];
for (var i = 0; i < 10; i++) {
regressionData[i] = [oData.ProductCollection[i].Current, oData.ProductCollection[i].Hist];
};
regression('linear', regressionData);
推荐答案
不幸的是，您有一些可视化图表固有的限制.即:
Unfortunately, you have some limitations inherent to the viz charts. Namely:
- 您不能向图表添加倾斜"参考线(= 趋势线).您只能通过 参考线 功能.查看关于此的(非直观)文档:可视化图表文档(查看 plotArea.referenceLine.line；它只是一个数字 = 将是水平/垂直线，具体取决于您的图表类型或方向).
- 您不能将散点图与折线图结合使用.如果您查看相同的 Viz Charts Documentation，你会看到在左侧的组合章节"中，没有线 - 散点"组合.
- You cannot add "oblique" reference lines (= the trend line) to the chart. You can only add vertical / horizontal ones via the Reference Line feature. Check out the (non-intuitive) documentation on this: Viz Charts Documentation (look at the plotArea.referenceLine.line; it is just a number = will be a horizontal / vertical line depending on your chart type or orientation).
- You cannot combine a scatter plot with a line chart. If you look in the same Viz Charts Documentation, you will see that in the Combination "chapter" on the left hand side, there is no "Line - Scatter" combination.
此外，您的 X 值 (AwDate) 是 字符串 形式的 ABAP 样式日期.使用日期/时间图表来正确显示它们更合适.无论如何，当您使用日期时，回归更有意义.否则，您的数据是分类的"，您可以进行回归的唯一方法是对它们进行排序并考虑它们在 X 轴上等距 - 如果您拥有非等距数据(例如您的示例中的数据)，则通常不需要.
Also, your X values (AwDate) are ABAP-style dates as string. It is more appropriate to use a date / time chart to correctly display them. Anyway, regression makes a lot more sense when you use dates. Otherwise your data is "categorical" and the only way you can make regression is by sorting them and considering them equidistant on the X axis - not what you would normally want if you have non-equidistant data (like the one in your example).
我的建议是:
- 使用折线图代替散点图(这样您还可以显示趋势线).
- 将 ABAP 样式的字符串转换为日期，以便您可以使用时间序列图表.顺便说一下，您的示例数据中有一些错误"日期:201600401".
- 根据您的需要进行回归并将其添加为单独的趋势"系列.您需要为其他系列的每个点计算趋势"系列上的一个点(基本上，您必须为 ProductCollection 中的每一行添加趋势"属性).如果您使用的是 OData 模型，那么您将需要切换到 JSON 客户端模型或使用格式化程序执行一些难看的解决方法.
根据要求，我在这里做了一个示例实现:https://jsfiddle.net/93mx0yvt/23/.我从这里借用的回归算法:https://dracoblue.net/dev/linear-least-squares-in-javascript/.代码的要点是:
As requested, I made an example implementation here: https://jsfiddle.net/93mx0yvt/23/. The regression algorithm I borrowed from here: https://dracoblue.net/dev/linear-least-squares-in-javascript/. The main points of the code are:
// format for parsing the ABAP-style dates
var oFormat = DateFormat.getDateInstance({
pattern: "yyyyMMdd"
});
// maps an ProductCollection entry to a new object
// which has the parsed date (and only the needed attributes)
var fnMapData = function(oEntry) {
return {
date: oFormat.parse(oEntry.AwdDate),
current: oEntry.Current,
historical: oEntry.Hist
};
};
var fnProcessData = function(oD) {
var aEntries = oD.ProductCollection.map(fnMapData),
aXs = aEntries.map(function(oE) { // get the Xs
// we take the millis to be able to do arithmetics
return oE.date.getTime();
}),
aYs = aEntries.map(function(oE) { // get the Ys (hist)
return oE.historical;
}),
//changed the function to only return only result Ys
aRs = findLineByLeastSquares(aXs, aYs);
//save the Ys into the result
for (var i = 0; i < aEntries.length; ++i) {
aEntries[i].trend = aRs[i];
}
return {
data: aEntries
};
};
然后您可以在 JSONModel 中使用 fnProcessData 函数返回的数据，然后基于它构建一个简单的多系列日期/时间折线图.
You can use then the data returned by the fnProcessData function inside a JSONModel and then build a simple multi-series date/time line chart based on it.
这篇关于如何在 Vizframe 图表中实现线性回归线?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
