Extjs 雷达图表初始化渲染 x轴数据

拿平板发表博客 好费劲，代码 是从hg 里拷过来的，晚上不爱开电脑，明天单位整理下格式 :)
extjs 雷达图表 页面第一次 加载 从后台返回数据 x 轴 渲染 不出来，
由于 项目原因 雷达数据要在页面初始化的时候 加载 虽然数据 返回到前台 但是x 轴的 汉字 是没有显示出来，这样就导致 图表 无法正常显示，找原因 找了好久 最后才知道 extjs 是在数据 返回之前 就渲染了图表，解决方法就是 给图表 先赋上初始值，附上代码如下:

1.在雷达图渲染之前，就初始化雷达图数据

//创建雷达图表数据集
			var radarChartStore = Ext.create('Ext.data.ArrayStore', {
				idIndex: 0,
				fields: ['xdata', 'ydata']
			});
			//初始化雷达图表数据集方法
			function radarChartStoreInit(){
				radarChartStore.add({
						xdata:"食杂店",
						ydata:""
					},{
						xdata:"便利店",
						ydata:""
					},{
						xdata:"超市",
						ydata:""
					},{
						xdata:"商场",
						ydata:""
					},{
						xdata:"烟酒商店",
						ydata:""
					},{
						xdata:"娱乐服务类",
						ydata:""
					},{
						xdata:"其它",
						ydata:""
					}
				);
			}
			//执行雷达图表数据集初始化方法
			radarChartStoreInit();

2.雷达图的定义

				//#############################################################
				//#1.单月柱形图和雷达图Model
				//#2.单月社会存销比，柱形图store
				//#3.单月社会存销比，柱形图chart
				//#4.单月社会存销比，雷达图store
				//#5.单月社会存销比，雷达图chart
				//#6.单月社会存销比，报表chartPanel
				//#############################################################


				//===========================单月柱形图和雷达图Model============================
				Ext.define('columnAndRadarModel', {
        			extend: 'Ext.data.Model',
                    fields: [ 
                    {
                        name: 'xdata'
                    }, //x轴显示
                    {
                        name: 'ydata'
                    } //y轴显示
                    ]
                });	
				//=============================end======================================



				//===================================单月社会存销比，柱形图store==============================
				var singleSaveAndSaleColumnStore = Ext.create('Ext.data.ArrayStore', {
                    model: 'columnAndRadarModel',
                    autoLoad: false,
                    // 设置服务器端映射。
                    proxy: {
                        type: 'ajax',
                        url: 'chart/stock/getChartSocietyStocksAllType',
                        // 定义数据结构
                        reader: {
                            type: 'json',
                            root: 'root'
                        }
                    }
                });
				//=======================================end======================================



				//==================================单月社会存销比，柱形图chart===============================
				  var singleSaveAndSaleColumnChart = Ext.create('Ext.chart.Chart', {
					  width: document.body.clientWidth * 0.5 * 0.3 ,
			    	  height:document.body.clientHeight * 0.5,	
			          xtype: 'chart',
			          style: 'background:#fff',
			          animate: true,
					  theme:'Category1',
			          store: singleSaveAndSaleColumnStore,
			          axes: [{
			              type: 'Numeric',
			              position: 'left',
					      minimum: 0,
			              grid: true,
						  label: {
	                         	 renderer:function(v){
	                     			return Ext.util.Format.round(v,1);
									},
	                    		 font: '10px Arial'
	                      }
			          }, {
			              type: 'Category',
			              position: 'bottom',
			              fields: ['xdata'],
						  label: {
	                            renderer: function(v){
									 return markerMap.get(v);
	                            },
	                            font: '12px Arial'
	                      }

			          }],
			          series: [
					  	{
			              type: 'column',
						  width: 70,
			              height: 25,
			              axis: 'left',
			              xField: 'xdata',
			              yField: 'ydata',
						  style:{
			            		'width':40
						  },
						  tips: {
	                        trackMouse: true,
	                        width: 60,
	                        height: 24,
	                        renderer: function(storeItem, item){
								this.setTitle((0==storeItem.get('ydata')?"0":storeItem.get('ydata')));
	                        }
	                     }
					  }
		            ]
			      });
				//=======================================end=====================================

				//==================================单月社会存销比，雷达图store===============================
				var singleSaveAndSaleRadarStore = Ext.create('Ext.data.ArrayStore', {
                    model: 'columnAndRadarModel',
                    autoLoad: false,
                    // 设置服务器端映射。
                    proxy: {
                        type: 'ajax',
                        url: 'chart/stock/getChartSocietyStocksAllType',
                        // 定义数据结构
                        reader: {
                            type: 'json',
                            root: 'root'
                        }
                    }
                });
				//=======================================end=====================================


				//==================================单月社会存销比，雷达图chart==============================
				 var singleSaveAndSaleRadarChart = Ext.create('Ext.chart.Chart', {		    
					    width: document.body.clientWidth * 0.5 * 0.7 ,
			    	  	height:document.body.clientHeight * 0.5,
						style: 'background:#fff',
						insetPadding: 20,	
					    animate: true,
					    theme:'Category1',
					    store: radarChartStore,
					    axes: [{
					        type: 'Radial',
					        position:'1,14',
							label: {
                                renderer: function(v){
									 return businessMap.get(v);
                                },
                                font: '12px Arial'
                           },
							minimum: 0
					    }],
					    series: [{
					        type: 'radar',
					        xField: 'xdata',
					        yField: 'ydata',
					        showInLegend: true,
					        showMarkers: true,
					        markerConfig: {
					            radius: 2,
					            size: 2
					        },
					        style: {
								opacity: 0.3
					        },
						    tips: {
                                trackMouse: true,
                                width: 60,
                                height: 24,
                                renderer: function(storeItem, item){
									this.setTitle((0==storeItem.get('ydata')?"0":storeItem.get('ydata')));
                                }
	                       }

					    }]
					}); 
				//=======================================end============================================

				//=====================================单月社会存销比，雷达图store，加载开始===============================
				singleSaveAndSaleRadarStore.load({
												params: {
													makeDate: makeDate,
													cityCode: cityCode,
													brandId: brandId,
													dimGoodsId: standardId,
													queryType: "stores",
													mtkAndbnsFlag: "bns"
												},
												callback: function(o, response, success){
													//改变标题
													//Ext.getCmp("singleSaveAndSaleChartPanel_id").setTitle(makeDate.substr(0, 4) + "年" + makeDate.substr(4, makeDate.length) + "月" + "  全品牌    " + "社会存销比");
													Ext.getCmp("singleSaveAndSaleChartPanel_id").setTitle("社会存销比" + "  全省" + "  全品牌 ");
													 //切换图表绑定
													 singleSaveAndSaleRadarChart.bindStore(singleSaveAndSaleRadarStore,true);
													 //重绘图表
													 singleSaveAndSaleRadarChart.redraw();
												}
											});
				//=====================================单月社会存销比，雷达图store，加载结束===============================






				//===============================单月社会存销比，报表chartPanel=========================
				var singleSaveAndSaleChartPanel = Ext.create('Ext.form.Panel',{
										id: "singleSaveAndSaleChartPanel_id",
										layout: {
									        type: 'hbox',
									        align: 'stretch'
									    },
										title: "社会存销比",
										items: [singleSaveAndSaleColumnChart,singleSaveAndSaleRadarChart]	
									}
								);									
				//======================================end==================================