同じパネルの2つのチャートが重なっています。どうして？

Question

例EnergyAppのYe​​arlyビューと同じように、2つのグラフを並べて表示しようとしています。

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

2つのグラフが重なるが、唯一のデータではなく、軸：私はチャートを開始し、パネルにそれらを置くために使用私のコードでは、次のとおりです。 Chrome 14のスクリーンショット（Chrome 16とSafari 5でも発生します）： データが左のチャートの後ろに表示されているため、右のグラフが空であることがわかります。

3つのチャートで同じことが起こります。私はフレックス番号の代わりに固定幅と高さを設定しようとしましたが、グラフは完全に消えました。

私はGoogleとこのフォーラムを検索して、私を助けるトピックは見つかりませんでした（Sencha Learnの記事、もちろんEnergyAppのソースも読んでいます）。

ご協力いただきありがとうございます。

オフィール

Answer 1

あなたは「フィット」としてそのパネルの下の項目のレイアウトを設定しようとすることができます。