Question

如果SAP UI5中我的图表的来源不是从服务器或文件加载的模型，而是基于现有模型的某些计算（分组/数学）的结果，我如何正确地将其绑定到图表控件并使用数据？

Answer 1

首先创建计算结果。然后在新的JSON模型中传输它并使用setData函数传递结果。然后将控件绑定到新的JSON模型。我尝试编写一些可能位于控制器中的虚拟代码：

var data = modelWithRawData.getData();
calculationOutput = doComplicatedCalculation(data);

var calculationModel = new sap.ui.model.json.JSONModel(calculationOutput)
myView.setModel(calculationModel, "calculationModel");

在绑定的路径中，您现在需要引用modelName。例如，在xmlView中：

<Chart data="{calculationModel>/PathToRelevantData}"> 
<!-- more xml -->

Answer 2

以下是使用sap.viz库的工作示例：

<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv='Content-Type' content='text/html;charset=UTF-8' />

    <script src="resources/sap-ui-core.js" id="sap-ui-bootstrap"
        data-sap-ui-libs="sap.ui.commons,sap.ui.layout,sap.ui.ux3,sap.ui.table,sap.m,sap.viz" 
        data-sap-ui-theme="sap_goldreflection">
    </script>

<script>
    var oModel = new sap.ui.model.json.JSONModel({
        businessData : [
            {text: "A", value: 100},
            {text: "B", value: 200},
            {text: "C", value: 300}
        ]
    }); 

    //DO SOME ADVANCE CALCULATION WITH THE JSON DATA...
    var data = oModel.getData();
    data.businessData[0].value += 30;
    data.businessData[1].value = data.businessData[1].value * 2;
    data.businessData[2].value = data.businessData[2].value - 100;
    //END OF SOME ADVANCE CALCULATION WITH THE JSON DATA...

    var oDataset = new sap.viz.ui5.data.FlattenedDataset({
            dimensions : [{axis : 1, name : 'Text', value : "{text}"}],
            measures : [{name : 'Value', value : '{value}'},
        ],
        data : {path : "/businessData"}

    });
    var oBarChart = new sap.viz.ui5.Bar({
        title : {
            visible : true,
            text : 'My bar chart'
        },
        dataset : oDataset
    });

    // attach the model to the chart and display it
    oBarChart.setModel(oModel);

    oBarChart.placeAt("content");
</script>

</head>
<body class="sapUiBody" role="application">
    <div id="content"></div>
</body>
</html>

希望这有帮助。

将客户端计算的结果绑定到控制（例如图表）

2 个答案: