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

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

您可以尝试将面板下的项目布局设置为“适合”。