EXTJs 차트가 데이터 또는 그래픽을 렌더링하지 않음

Question

EXTJs 샘플에서 직접 가져온 일부 모의 데이터가있는 선형 차트를 만들었습니다. 내 응용 프로그램에 연결하면 창에 문제가 없지만 데이터와 모든 그래픽은 표시되지 않습니다. 더욱 흥미롭게도 샘플로 제공되는 이미지로 저장 버튼을 클릭하면 샘플과 같이 정확하게 표시된 데이터, 선 및 그래픽을 얻을 수 있습니다. 나는 또한 데이터가 생성되고 있음을 볼 수있다. 나는 혼란 스럽다.

데이터 가져 오기 :

: 저장 이미지로

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

      }] 
... 

:

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 
       } 
      }] 
     }); 

를 단순히 추가를

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

모든 것이 생성되고, 데이터가 생성되며, 차트가 표시되고 그려 지지만 선이나 그래픽은 표시되지 않습니다. 다시 말하지만 이미지로 저장하면 모든 것을 올바르게 표시하는 이미지가 다운로드됩니다. 미리 감사드립니다! renderTo에 관한 문서에서

Answer 1

차트에 그래픽이 렌더링되지 않는 페이지가로드되어 일부 CSS 충돌이 발생했습니다. 최대한 빨리 위에 다른 CSS를로드 제거, 차트가 렌더링됩니다.

Answer 2

: 구성 요소가 컨테이너의 하위 항목으로 경우

이 옵션을 사용하지 마십시오. 하위 항목을 렌더링하고 관리하는 것은 컨테이너의 레이아웃 관리자 의 책임입니다.

차트 예제를 보면 가장 바깥 쪽 컨테이너 (또는 창) 만 렌더링된다는 것을 알 수 있습니다.

마찬가지로 컨테이너에 "맞춤"레이아웃을 지정하는 경우 하위 구성 요소의 크기를 지정하는 것이 대부분 중복됩니다.