var chart = Ext.create('Ext.chart.Chart', {
id: 'chartCmp',
xtype: 'chart',
style: 'background:#fff',
animate: true,
shadow: true,
store: 'store_gyzjz2012_11',
axes: [{
type: 'Numeric',
position: 'left',
//纵坐标轴:增加值
fields: ['BYZC'],
label: {
renderer: Ext.util.Format.numberRenderer('0,0')
},
title: 'Number of Hits',
grid: true,
minimum: 0
}, {
type: 'Category',
position: 'bottom',
//横坐标轴:分类
fields: ['GYZJZ'],
title: 'Month of the Year',
label: {
rotate: {
degrees: 30
}
}
}],
series: [{
type: 'column',
axis: 'left',
highlight: true,
//鼠标移过,提示内容
tips: {
trackMouse: true,
renderer: function(storeItem, item) {
this.setTitle(storeItem.get('GYZJZ') + ': ' + storeItem.get('BYZC'));
}
},
//column中标签内容和显示方式
label: {
display: 'insideEnd',
'text-anchor': 'middle',
field: 'BYZC',
renderer: Ext.util.Format.numberRenderer('0'),
orientation: 'vertical',
color: '#333'
},
//x轴字段
xField: 'GYZJZ',
//y轴字段
yField: 'BYZC'
}]
});
var winColumnChart = Ext.create('Ext.Window', {
width: 800,
height: 550,
//minHeight: 400,
//minWidth: 550,
hidden: false,
closable: true,
closeAction: 'hide',
maximizable: true,
title: 'Column Chart',
//renderTo: Ext.getBody(),
layout: 'fit',
tbar: [{
text: '保存图表',
handler: function() {
Ext.MessageBox.confirm('下载确认', '您确认要下载该图片吗?', function(choice){
if(choice == 'yes'){
chart.save({
type: 'image/png'
});
}
});
}
}],
items: chart
});