Ext.onReady(function() {
//创建每月贴现价格统计图
//通过JSON从数据库中获取数据
var chartStore = Ext.create('Ext.data.JsonStore', {
fields : [ 'date', 'price1', 'price2', 'price3', 'price4' ],
proxy : {
type : 'ajax',
url : 'chartSearch',
reader : {
type : 'json'
}
}
});
//四条按交易类别区分的统计线
var monthPriceChart=Ext.create('Ext.chart.Chart', {
id:'monthPriceChartid',
animate: true,
/* renderTo:'LineChart', */
width: 500,
height: 300,
store : chartStore,
axes : [ {//定义坐标轴
title : 'Price', //纵轴标题
type : 'Numeric',
position : 'left',
fields : [ 'price1','price2','price3','price4'],
grid:true,
minimum:0
}, {
title : 'Day',
type : 'Category',
position : 'bottom',
fields : [ 'date' ]
} ],
series : [ {
type : 'line',
highlight:{
size:7,
radius:7
},
displayName : '小票买断价',
xField : 'date',
yField : 'price1',
markerConfig:{
type:'cross',
size:4,
radius:4,
'stroke-width':0
},
style : {
color : 0xCCFF00
}
}, {
type : 'line',
highlight:{
size:7,
radius:7
},
displayName : '大票买断价',
xField : 'date',
yField : 'price2',
markerConfig:{
type:'circle',
size:4,
radius:4,
'stroke-width':0
},
style : {
color : 0xCC0000
}
}, {
type : 'line',
highlight:{
size:7,
radius:7
},
displayName : '当天出款价',
xField : 'date',
yField : 'price3',
markerConfig:{
type:'cross',
size:4,
radius:4,
'stroke-width':0
},
style : {
color : 0x0033FF
}
}, {
type : 'line',
highlight:{
size:7,
radius:7
},
displayName : '带票价',
xField : 'date',
yField : 'price4',
markerConfig:{
type:'circle',
size:4,
radius:4,
'stroke-width':0
},
style : {
color : 0x66CC00
}
} ]
});
//创建一个panel
var chartPanel = Ext.create('Ext.panel.Panel', {
id:'chartPanel',
renderTo : Ext.getBody(),
title : '价格统计图',
layout:'border',
border : false,
autoScroll:true,
tbar : [
'时间',
{
xtype : 'combo',
format : 'Y-M',//显示类型
name : 'month',
id : 'month',
store : [ '2013-07', '2013-08', '2013-09', '2013-10',
'2013-11', '2013-12', '2014-01' ],
emptyText : '2013-12',
editable : false
},
'银行类别:',
{
xtype : 'combo',
name : 'bankType',
id : 'bankSearch',
store : [ '国股', '北上南宁', '省会城商', '全国城商', '外资', '农商农合',
'信用社村镇' ],
emptyText : '国股',
editable : false
},
'-',
{
text : '查询',
handler : function() {
chartStore.load({
params : {
'month' : Ext.getCmp('month').getValue(),
'bankType' : Ext.getCmp('bankSearch')
.getValue()
}
});
}
} ]
});
chartStore.load({
params : {
'month' : '2013-12',
'bankType' : '国股'
}
});
})
以上是我的页面代码，如何使得折线图chart能够放入到panel中进行显示，我用的是extjs4-2-1版本，求详细解答，谢谢
