SAPUI5：使用来自HANA DB的OData服务显示饼图或条形图

Question

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

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

请在下面找到代码段：

{
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");
}

请帮助我将饼图显示为数据，因为我是新手并处于学习阶段。

Answer 1

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

JSBin: Viz Pie Chart example

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

Answer 2

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

它显示了每个类别的产品百分比和扩展用于获取CategoryName - 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");