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 });