[英]Rendering pie chart using xtype and Ext.create
I first tried to render a pie chart using xtype into centre region of a panel with border layout. 我首先尝试使用xtype将饼图呈现到具有边框布局的面板的中心区域。 Here is the code: 这是代码:
{
xtype:'pie',
renderTo: Ext.getBody(),
width: 200,
height: 150,
animate: true,
layout:'fit',
store: store,
theme: 'Base:gradients',
series: [{
type: 'pie',
field: 'salary',
showInLegend: true,
highlight: {
segment: {
margin: 20
}
},
label: {
field: 'name',
display: 'rotate',
contrast: true,
font: '18px Arial'
}
}]
}
I am getting the following error: 我收到以下错误:
Uncaught TypeError: Cannot call method 'substring' of undefined
But when i take the same code and use Ext.create then it is working fine. 但是,当我使用相同的代码并使用Ext.create时,它工作正常。
var chart=Ext.create('Ext.chart.Chart', {
renderTo: Ext.getBody(),
width: 200,
height: 150,
animate: true,
layout:'fit',
store: store,
theme: 'Base:gradients',
series: [{
type: 'pie',
field: 'salary',
showInLegend: true,
highlight: {
segment: {
margin: 20
}
},
label: {
field: 'name',
display: 'rotate',
contrast: true,
font: '18px Arial'
}
}]
});
I am using chart as an item instead. 我将图表用作项目。
What can be the problem? 可能是什么问题?
Here is the store: 这是商店:
var store=Ext.create('Ext.data.Store',{
model:'Layouts.Person',
autoLoad:true,
data:{'items':[
{'name':'john','empno':'1111','salary':'1234'},
{'name':'edward','empno':'1212','salary':'2234'},
{'name':'frank','empno':'1567','salary':'9774'},
{'name':'michel','empno':'3456','salary':'8932'},
]},
proxy:{
type:'memory',
reader:{
type:'json',
root:'items'
}
}
});
The xtype for pie chart is pie: 饼图的xtype是pie:
http://www.objis.com/formationextjs/lib/extjs-4.0.0/docs/api/Ext.chart.series.Pie.html
try this code it will work out for you. 试试这个代码,它将为您解决。
{
xtype:'chart',
animate: true,
width: 500,
height: 300,
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'
}
}]
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.