동일한 패널에있는 두 개의 차트가 서로 겹칩니다. 왜?

Question

예제 EnergyApp의 Yearly보기와 같이 서로 옆에 두 개의 차트를 넣으려고합니다.

var salesChart = new Ext.Panel({ 
    title: 'Sales', 
    iconCls: 'line', 
    cls: 'chartpanel', 
    layout: { 
     type: 'hbox', 
     align: 'stretch' 
    }, 
    items: [{ 
     flex: 1, 
     xtype: 'chart', 
     cls: 'sales', 
     store: StoreDemo.stores.SalesStore, 
     shadow: true, 
     animate: true, 
     interactions: [{ 
      type: 'iteminfo', 
      listeners: { 
       show: function(interaction, item, panel) { 
       // Can be used to pop-up more information or to load drill down chart 
       } 
      } 
     }, { 
      type: 'panzoom', 
      axes: ['bottom'] 
     }], 
     axes: [{ 
      type: 'Numeric', 
      position: 'left', 
      minimum: 0, 
      maximum: 1000, 
      fields: ['total'], 
      label: { 
       renderer: function(v) { 
        return v.toFixed(0); 
       } 
      }, 
      title: 'Total' 
     }, 
     { 
      type: 'Category', 
      position: 'bottom', 
      fields: ['month'], 
      label: { 
       renderer: function(v) { 
        return Date.monthNames[(v - 1) % 12]; 
       } 
      }, 
      title: 'Month of the Year' 
     }], 
     series: [{ 
      type: 'column', 
      axis: 'left', 
      highlight: true, 
      label: { 
       field: 'total' 
      }, 
      xField: 'month', 
      yField: 'total' 
     }, { 
      type: 'line', 
      highlight: { 
       size: 7, 
       radius: 7 
      }, 
      fill: true, 
      axis: 'left', 
      smooth: true, 
      label: { 
       field: 'forecast' 
      }, 
      xField: 'month', 
      yField: 'forecast' 
     }] 
    }, { 
     flex: 1, 
     xtype: 'chart', 
     cls: 'sales-forecast', 
     store: StoreDemo.stores.SalesForecastStore, 
     shadow: true, 
     animate: true, 
     interactions: [{ 
      type: 'iteminfo', 
      listeners: { 
       show: function(interaction, item, panel) { 
       // Can be used to pop-up more information or to load drill down chart 
       } 
      } 
     }, { 
      type: 'panzoom', 
      axes: ['bottom'] 
     }], 
     axes: [{ 
      type: 'Numeric', 
      position: 'left', 
      minimum: 0, 
      maximum: 1000, 
      fields: ['total'], 
      label: { 
       renderer: function(v) { 
        return v.toFixed(0); 
       } 
      }, 
      title: 'Total (Forecast)' 
     }, 
     { 
      type: 'Category', 
      position: 'bottom', 
      fields: ['month'], 
      label: { 
       renderer: function(v) { 
        return Date.monthNames[(v - 1) % 12]; 
       } 
      }, 
      title: 'Month of the Year' 
     }], 
     series: [{ 
      type: 'column', 
      axis: 'left', 
      highlight: true, 
      label: { 
       field: 'total' 
      }, 
      xField: 'month', 
      yField: 'total' 
     }] 
    }] 
}); 

StoreDemo.views.ChartView = new Ext.TabPanel({ 
    tabBar: { 
     dock: 'top', 
     layout: { 
      pack: 'center' 
     } 
    }, 
    ui: 'light', 
    cardSwitchAnimation: { 
     type: 'slide' 
    }, 
    items: [salesChart] 
}); 

두 차트가 겹치는하지만 데이터 만이 아닌 축 : 나는 차트를 시작하고 패널에 넣어 사용 내 코드는 다음과 같습니다. 다음은 Chrome 14의 스크린 샷입니다 (Chrome 16 및 Safari 5에서도 발생합니다). 데이터가 왼쪽 차트 뒤에 표시되므로 오른쪽 차트가 비어 있음을 알 수 있습니다.

동일한 차트가 3 개의 차트에서 발생합니다. 플렉스 번호 대신 고정 너비와 높이를 설정하려했지만 차트가 완전히 사라졌습니다.

나는 Google과이 포럼을 검색하여 도움이되는 주제를 찾지 못했습니다. Sencha Learn의 기사와 물론 EnergyApp의 출처도 읽었습니다.

귀하의 도움에 감사드립니다.

피르

Answer 1

당신이 '적합'등의 패널에서 항목의 레이아웃을 설정하려고 할 수 있습니다.