Javascript 在ExtJS 4容器/面板中呈现图表
我有一个预定义的饼图,如下所示:Javascript 在ExtJS 4容器/面板中呈现图表,javascript,extjs,extjs4,Javascript,Extjs,Extjs4,我有一个预定义的饼图,如下所示: Ext.create('Ext.chart.Chart', { width : 450, height : 300, animate : true, store : store, theme : 'Base:gradients', series : [{ type : 'pie', field : 'data1',
Ext.create('Ext.chart.Chart', {
width : 450,
height : 300,
animate : true,
store : store,
theme : 'Base:gradients',
series : [{
type : 'pie',
field : 'data1',
showInLegend : true,
tips : {
trackMouse : true,
width : 140,
height : 28,
renderer : function(storeItem, item) {
// calculate and display percentage on hover
var total = 0;
store.each(function(rec) {
total += rec.get('data1');
});
this.setTitle(storeItem.get('name') + ': ' + Math.round(storeItem.get('data1') / total * 100) + '%');
}
},
highlight : {
segment : {
margin : 20
}
},
label : {
field : 'name',
display : 'rotate',
contrast : true,
font : '18px Arial'
}
}]
});
然后我创建了一个容器/面板,在这里我使用容器
我正在寻找一种将预定义图表放入容器的方法。我看到一些示例,它们实际上在容器字段中定义了图表,但这不是我想要的。是否有任何方法可以将预先指定的图表放在下面的项字段中,以便可以呈现图表
Ext.create('Ext.container.Container', {
layout: 'fit',
width: 600,
height: 600,
renderTo: Ext.getBody(),
border: 1,
style: {boderColor: '#000000', borderStyle: 'solid', borderWidth: '1px'},
items: [{
}]
});
谢谢是的,很简单:
var chart = Ext.create('Ext.chart.Chart', {
animate: true,
store: store,
theme: 'Base:gradients',
series: [{
type: 'pie',
field: 'data1',
showInLegend: true,
tips: {
trackMouse: true,
width: 140,
height: 28,
renderer: function(storeItem, item) {
// calculate and display percentage on hover
var total = 0;
store.each(function(rec) {
total += rec.get('data1');
});
this.setTitle(storeItem.get('name') + ': ' + Math.round(storeItem.get('data1') / total * 100) + '%');
}
},
highlight: {
segment: {
margin: 20
}
},
label: {
field: 'name',
display: 'rotate',
contrast: true,
font: '18px Arial'
}
}]
});
Ext.create('Ext.container.Container', {
layout: 'fit',
width: 600,
height: 600,
renderTo: Ext.getBody(),
border: 1,
style: {
boderColor: '#000000',
borderStyle: 'solid',
borderWidth: '1px'
},
items: chart
});
还要注意,在图表上指定尺寸是没有用的,因为它被用于fit布局中