日期:2014-05-16  浏览次数:20352 次

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

//#############################################################
   836 				//#1.单月柱形图和雷达图Model
   837 				//#2.单月社会存销比,柱形图store
   838 				//#3.单月社会存销比,柱形图chart
   839 				//#4.单月社会存销比,雷达图store
   840 				//#5.单月社会存销比,雷达图chart
   841 				//#6.单月社会存销比,报表chartPanel
   842 				//#############################################################
   843 				
   844 				
   845 				//===========================单月柱形图和雷达图Model============================
   846 				Ext.define('columnAndRadarModel', {
   847         			extend: 'Ext.data.Model',
   848                     fields: [ 
   849                     {
   850                         name: 'xdata'
   851                     }, //x轴显示
   852                     {
   853                         name: 'ydata'
   854                     } //y轴显示
   855                     ]
   856                 });	
   857 				//=============================end======================================
   858 				
   859 				
   860 				
   861 				//===================================单月社会存销比,柱形图store==============================
   862 				var singleSaveAndSaleColumnStore = Ext.create('Ext.data.ArrayStore', {
   863                     model: 'columnAndRadarModel',
   864                     autoLoad: false,
   865                     // 设置服务器端映射。
   866                     proxy: {
   867                         type: 'ajax',
   868                         url: 'chart/stock/getChartSocietyStocksAllType',
   869                         // 定义数据结构
   870                         reader: {
   871                             type: 'json',
   872                             root: 'root'
   873                         }
   874                     }
   875                 });
   876 				//=======================================end======================================
   877 				
   878 				
   879 				
   880 				//==================================单月社会存销比,柱形图chart===============================
   881 				  var singleSaveAndSaleColumnChart = Ext.create('Ext.chart.Chart', {
   882 					  width: document.body.clientWidth * 0.5 * 0.3 ,
   883 			    	  height:document.body.clientHeight * 0.5,	
   884 			          xtype: 'chart',
   885 			          style: 'background:#fff',
   886 			          animate: true,
   887 					  theme:'Category1',
   888 			          store: singleSaveAndSaleColumnStore,
   889 			          axes: [{
   890 			              type: 'Numeric',
   891 			              position: 'left',
   892 					      minimum: 0,
   893 			              grid: true,
   894 						  label: {
   895 	                         	 renderer:function(v){
   896 	                     			return Ext.util.Format.round(v,1);
   897 									},
   898 	                    		 font: '10px Arial'
   899 	                      }
   900 			          }, {
   901 			              type: 'Category',
   902 			              position: 'bottom',
   903 			              fields: ['xdata'],
   904 						  label: {
   905 	                            renderer: function(v){
   906 									 return markerMap.get(v);
   907 	                            },
   908 	                            font: '12px Arial'
   909 	                      }
   910 			            
   911 			          }],
   912 			          series: [
   913 					  	{
   914 			              type: 'column',
   915 						  width: 70,
   916 			              height: 25,
   917 			              axis: 'left',
   918 			              xField: 'xdata',
   919 			              yField: 'ydata',
   920 						  style:{
   921 			            		'width':40
   922 						  },
   923 						  tips: {
   924