Я пытаюсь поместить 2 графика рядом друг с другом, как и в представлении «Год» в примере EnergyApp.Мой код, который я использую для запуска диаграмм и помещения их в 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 графика.Я попытался установить фиксированную ширину и высоту вместо гибкого числа, но затем диаграммы полностью исчезли.
Я искал в Google и на этом форуме и не нашел ни одной темы, которая могла бы мне помочь (я также читал статьив Sencha Learn, и, конечно, источник EnergyApp).
Ваша помощь очень ценится.
Ofir