SAPUI5：使用 HANA DB 中的 OData 服务显示饼图或条形图答案

【问题标题】：SAPUI5: Showing pie chart or Bar chart using OData service from HANA DBSAPUI5：使用 HANA DB 中的 OData 服务显示饼图或条形图
【发布时间】：2014-05-06 11:00:49
【问题描述】：

我正在从事 SAP HANA 开发项目，我需要使用 SAPUI5 和 Odata 服务开发 UI 应用程序。

我需要有关从 HANA 表中获取数据并在饼图或条形图中显示的帮助。我正在使用 odata 服务将数据获取到表（oTable），但无法在饼图中显示。

请在下面找到代码sn-p：

{
var oModel = sap.ui.model.odata.ODataModel('link of the .xsodata' false);
var oTable = new sap.ui.table.Table({tableId: "tableID", visibleRowCount: 10}); 
oTable.setTitle("Transactions"); 
oTable.setModel(oModel);
oTable.bindRows('/Transactions');

var dataset = new sap.service.visualization.dataset.SimpleDMDataset();
dataset.setDataTable(oTable);

var pie = new sap.service.visualization.chart.Pie("myPie", {
    width: "700px",
    height: "400px",
    allDeSelectable: true,
    legendFirst: true,
    selectionMode: 'single',
    legendDirection: 'right',
    title: 'Transactions',
    titleHorizontalAlign: 'center',
    subTitle: 'Q1 - 2012',
    subTitleHorizontalAlign: 'center',
    showTitle: true,
    defaultSelectedSliceIndexes: [5],
    legendFormatString: ['0.00%'],
    tooltipTextFormatString: ['0.00%'],
    tooltipMainValueFormatString: ['#,##0'],
    tooltipSubValueFormatString: ['0.00%'],
    showLegend: true,
    pieType: 'pie',
    dataset: dataset
});

pie.placeAt("uiAreaForMyControls");
}

由于我是新手且处于学习阶段，请帮助我将饼图与数据一起显示。

【问题讨论】：

标签： sapui5

【解决方案1】：

我注意到您正在尝试将 sap.service.visualization 图表与数据集一起使用，这与之前的答案不同，这里有几个使用 Northwind OData 服务的简单示例

JSBin: Viz Pie Chart example

JSBin: Viz Bar Chart example - 更高级的是在数据集上使用过滤器

【讨论】：

【解决方案2】：

以下是一个非常简单的饼图，使用 NorthWind OData 服务，格式与 XSODATA 相同

它显示每个类别的产品百分比，扩展用于获取类别名称 - live demo

var sURI = 'http://services.odata.org/v3/Northwind/Northwind.svc/';
var oModel = new sap.ui.model.odata.ODataModel(sURI, true);


// Pie Chart
var oChart = new sap.makit.Chart({
    width : "100%",
    height: "80%",
    type : sap.makit.ChartType.Pie,
    legendPosition : sap.makit.LegendPosition.Top,
    valueAxis: new sap.makit.ValueAxis({}),
    categoryAxis: new sap.makit.CategoryAxis({}),
    category : new sap.makit.Category({
        column : "category",
    }),
    values : [new sap.makit.Value({
        expression : "products",
        format : "number",
    })],
});
oChart.addColumn(new sap.makit.Column({name:"category", value:"{Category/CategoryName}"}));
oChart.addColumn(new sap.makit.Column({name:"products", value:"{ProductID}", type:"number"}));
oChart.setModel(oModel);
oChart.bindRows({
     path: "/Products",
     parameters: {select: 'ProductID,Category/CategoryName',expand: 'Category'}
});
oChart.placeAt("content");

【讨论】：