同一个面板中的两个图表相互重叠。为什么？

Question

我试图把2个图表放在一起，就像EnergyApp示例中的Yearly视图一样。我用于启动图表并将它们放入Panel的代码如下：

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个图表同样的情况。我试图设定一个固定的宽度和高度，而不是一个弹性数字，但是这些图表完全消失了。

我搜索了谷歌和这个论坛，并没有找到任何主题来帮助我（我还阅读了Sencha Learn的文章，当然还有EnergyApp的源代码）。

非常感谢您的帮助。

奥菲尔

Answer 1

你可以尝试设置项目的布局，将面板作为“配合”下。