javascript - 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)。然后我尝试定义一个 View 并将其放置在对话框中，也没有成功。有人可以帮助我如何使用一些代码片段将图表放置在对话框/弹出窗口中，看来我无法做到这一点。谢谢!

已回答: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