SAPUI5 将图表附加到对话框

Question

我在 SAPUI5 中定义了一个折线图。 当我将它放在我的 HTML 中的 DIV 时，它可以正常工作。

    var oChart = new sap.viz.ui5.Line({
        dataset : oDataset,
        yAxis : yAxis,
        title : {
            visible : true,
            text : 'Trend Chart'
        },
        legend : {
            visible : true,
        },

    });

oChart.setModel(oModel2);
oChart.placeAt("visual");

我的目标是将其放置在弹出/对话框/消息框中，无论弹出什么并且能够包含图表。我试图定义一个对话框并将此图放在上面，但没有用（可能是错误的 sytanx）。然后我尝试定义一个视图并将其放在对话框中，也没有工作。有人可以帮助我如何使用一点代码 sn-p 将图表放置在对话框/弹出窗口中，看来我做不到。 谢谢！

回答：invalidate() 是关键 （由于jsbin代码不会永远休息，我想分享答案）

$(function() {
  var oDataset = new sap.viz.ui5.data.FlattenedDataset({    
    dimensions : [     
      {axis : 1,name : 'Country',value : "{Country}"}     
    ],    
    measures : [     
      {name : 'Profit',value : '{profit}'},    
      {name : 'Revenue',value : '{revenue}'}     
    ],    
    data : {path : "/businessData"}    
  });  

  var legendPosition = new sap.viz.ui5.types.Legend({layout: {  
    position: "left"  
  }});   

  var stackedColumnVizChart = new sap.viz.ui5.StackedColumn("chartStackedColumn", {  
    width : "800px",  
    height : "500px",  
    title : {  },  
    dataset : oDataset,  
    legendGroup: legendPosition  
  });  
  stackedColumnVizChart.setModel(sap.ui.getCore().getModel());  

  var oModel = new sap.ui.model.json.JSONModel({    
    businessData : [    
      {Country :"Canada",revenue:410.87,profit:-141.25, population:34789000},    
      {Country :"China",revenue:338.29,profit:133.82, population:1339724852},    
      {Country :"France",revenue:487.66,profit:348.76, population:65350000},    
      {Country :"Germany",revenue:470.23,profit:217.29, population:81799600},    
      {Country :"India",revenue:170.93,profit:117.00, population:1210193422},    
      {Country :"United States",revenue:905.08,profit:609.16, population:313490000}    
    ]                
  });    

  stackedColumnVizChart.setModel(oModel);


  var dlg = new sap.m.Dialog({
    title: 'Text',
    width : "800px",  
    height : "600px",  
    content : [stackedColumnVizChart]
  });

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

Answer 1

我们也有类似的经历。图表似乎没有呈现自己。这是一个例子 http://jsbin.com/gaveq/1/edit

你可以看到我需要调用invalidate函数来渲染图表。

-D