在 ExtJS 4 容器/面板中呈现图表
Render chart in ExtJS 4 Container/Panel
我有一个预定义的饼图,如下所示:
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'
}
}]
});
然后我创建了一个容器/面板,这里我使用的是容器。
我正在寻找一种将预定义图表放入容器的方法。我看到了一些示例,它们实际上在"容器"字段中定义了图表,但这不是我想要的。有什么方法可以将预先指定的图表放在下面的items
字段中,以便可以呈现图表?
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
});
另请注意,在图表上指定维度是没有用的,因为它用于适合布局。
相关文章:
- 在Extjs中,获取自定义字段容器中的textfield值
- 调用容器的项列表中的变量.Viewport/ExtJS和Geoext
- 在 ExtJS 4 容器/面板中呈现图表
- Extjs 4.2.1 - 从xtype网格拖放到xtype容器
- ExtJS 容器将现有内容设置为项目
- 将extjs项动态添加到字段容器中
- ExtJS.隐藏容器中的所有组件
- 我如何中心一个按钮在表上,并有表填充在ExtJS的容器
- ExtJS:如何使组件在其父容器内最大化
- 在容器ExtJS上定位元素
- 带有边界布局和动态高度子节点的ExtJS容器
- Extjs 4.1 -如何创建没有窗口或容器的表面板
- Extjs动态添加图像;t调整容器面板的大小
- 如何在刑法的extjs项中多次添加容器
- Extjs 5.1 将容器动态添加到面板
- 如何从 ExtJS 控件引用祖先容器对象
- 面板字段集和容器在Extjs中的区别
- 使用ExtJS将浮动组件对齐到容器的右上角
- ExtJS如何使用renderTo配置来渲染一个组件到另一个特定的容器
- ExtJs 4,从容器中删除控件并将其从内存中删除的正确方法是什么