EXTJs圖表不渲染數據或圖形

Question

我創建了一些包含一些模擬數據的折線圖，直接從EXTJs樣本中提取。當我將它插入到我的應用程序中時，它在窗口中顯示得很好，但是數據和所有圖形都不顯示。更有趣的是，當我點擊保存爲圖像按鈕（由樣本提供）時，我可以像樣本中一樣正確顯示數據，線條和圖形。我也可以看到/記錄數據正在生成。我很難過。

獲取數據：

window.generateData = function(n, floor){ 
     var data = [], 
      p = (Math.random() * 11) + 1, 
      i; 

     floor = (!floor && floor !== 0)? 20 : floor; 

     for (i = 0; i < (n || 12); i++) { 
      data.push({ 
       name: Ext.Date.monthNames[i % 12], 
       data1: Math.floor(((Math.random() - 0.5) * 100), floor), 
       data2: Math.floor(((Math.random() - 0.5) * 100), floor), 
       data3: Math.floor(((Math.random() - 0.5) * 100), floor), 
       data4: Math.floor(((Math.random() - 0.5) * 100), floor), 
       data5: Math.floor(((Math.random() - 0.5) * 100), floor), 
       data6: Math.floor(((Math.random() - 0.5) * 100), floor), 
       data7: Math.floor(((Math.random() - 0.5) * 100), floor), 
       data8: Math.floor(((Math.random() - 0.5) * 100), floor), 
       data9: Math.floor(((Math.random() - 0.5) * 100), floor) 
      }); 
     } 
     return data; 
    }; 

創建圖表：

store1.loadData(generateData(8)); 

     var chart = Ext.create('Ext.chart.Chart', { 
      xtype: 'chart', 
      renderTo: Ext.getBody(), 
      animate: true, 
      width: 760, 
      height: 480, 
      store: store1, 
      shadow: true, 
      theme: 'Category1', 
      legend: { 
       position: 'right' 
      }, 
      axes: [{ 
       type: 'Numeric', 
       minimum: 0, 
       position: 'left', 
       fields: ['data1', 'data2', 'data3'], 
       title: 'Number of Parkers', 
       minorTickSteps: 1, 
       grid: { 
        odd: { 
         opacity: 1, 
         fill: '#ddd', 
         stroke: '#bbb', 
         'stroke-width': 0.5 
        } 
       } 
      }, { 
       type: 'Category', 
       position: 'bottom', 
       fields: ['name'], 
       title: 'Month of the Year' 
      }], 
      series: [{ 
       type: 'line', 
       highlight: { 
        size: 7, 
        radius: 7 
       }, 
       axis: 'left', 
       xField: 'name', 
       yField: 'data1', 
       markerConfig: { 
        type: 'cross', 
        size: 4, 
        radius: 4, 
        'stroke-width': 0 
       } 
      }, { 
       type: 'line', 
       highlight: { 
        size: 7, 
        radius: 7 
       }, 
       axis: 'left', 
       smooth: true, 
       xField: 'name', 
       yField: 'data2', 
       markerConfig: { 
        type: 'circle', 
        size: 4, 
        radius: 4, 
        'stroke-width': 0 
       } 
      }, { 
       type: 'line', 
       highlight: { 
        size: 7, 
        radius: 7 
       }, 
       axis: 'left', 
       smooth: true, 
       fill: true, 
       xField: 'name', 
       yField: 'data3', 
       markerConfig: { 
        type: 'circle', 
        size: 4, 
        radius: 4, 
        'stroke-width': 0 
       } 
      }] 
     }); 

比我的窗口組件我只需添加：

... 
items: [{ 
       xtype: 'container', 
      id: 'dashboard-content', 
       margin: 50, 
       layout: 'fit', 
       renderTo: Ext.getBody(), 
      items: chart 

      }] 
... 

上的另存爲圖片：

... 
chart.save({ 
    type: 'image/png' 
}); 
... 

創建所有內容，生成數據，圖表顯示並繪製，但沒有任何線條或圖形。再次，如果我將圖像保存爲圖像，它會下載一張正確顯示所有內容的圖像。提前致謝！

Answer 1

原來我的頁面上加載了一些CSS衝突，導致圖表中沒有圖形顯示。只要我刪除其他的CSS加載上面的分機，圖表呈現。

Answer 2

從有關renderTo文檔：

，如果Component是一個 容器的子項，請勿使用此選項。 Container的佈局管理器 負責渲染和管理其子項。

如果您查看圖表示例，您將看到只顯示最外面的容器（或窗口）。

同樣，如果您在容器上指定「適合」佈局，則在子組件上指定大小主要是多餘的。