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 trackMouse: true, 925 width: 60, 926 height: 24, 927 renderer: function(storeItem, item){ 928 this.setTitle((0==storeItem.get('ydata')?"0":storeItem.get('ydata'))); 929 } 930 } 931 } 932 ] 933 }); 934 //=======================================end===================================== 935 936 //==================================单月社会存销比，雷达图store=============================== 937 var singleSaveAndSaleRadarStore = Ext.create('Ext.data.ArrayStore', { 938 model: 'columnAndRadarModel', 939 autoLoad: false, 940 // 设置服务器端映射。 941 proxy: { 942 type: 'ajax', 943 url: 'chart/stock/getChartSocietyStocksAllType', 944 // 定义数据结构 945 reader: { 946 type: 'json', 947 root: 'root' 948 } 949 } 950 }); 951 //=======================================end===================================== 952 953 954 //==================================单月社会存销比，雷达图chart============================== 955 var singleSaveAndSaleRadarChart = Ext.create('Ext.chart.Chart', { 956 width: document.body.clientWidth * 0.5 * 0.7 , 957 height:document.body.clientHeight * 0.5, 958 style: 'background:#fff', 959 insetPadding: 20, 960 animate: true, 961 theme:'Category1', 962 store: radarChartStore, 963 axes: [{ 964 type: 'Radial', 965 position:'1,14', 966 label: { 967 renderer: function(v){ 968 return businessMap.get(v); 969 }, 970 font: '12px Arial' 971 }, 972 minimum: 0 973 }], 974 series: [{ 975 type: 'radar', 976 xField: 'xdata', 977 yField: 'ydata', 978 showInLegend: true, 979 showMarkers: true, 980 markerConfig: { 981 radius: 2, 982 size: 2 983 }, 984 style: { 985 opacity: 0.3 986 }, 987 tips: { 988 trackMouse: true, 989 width: 60, 990 height: 24, 991 renderer: function(storeItem, item){ 992 this.setTitle((0==storeItem.get('ydata')?"0":storeItem.get('ydata'))); 993 } 994 } 995 996 }] 997 }); 998 //=======================================end============================================ 999 1000 //=====================================单月社会存销比，雷达图store，加载开始=============================== 1001 singleSaveAndSaleRadarStore.load({ 1002 params: { 1003 makeDate: makeDate, 1004 cityCode: cityCode, 1005 brandId: brandId, 1006 dimGoodsId: standardId, 1007 queryType: "stores", 1008 mtkAndbnsFlag: "bns" 1009 }, 1010 callback: function(o, response, success){ 1011 //改变标题 1012 //Ext.getCmp("singleSaveAndSaleChartPanel_id").setTitle(makeDate.substr(0, 4) + "年" + makeDate.substr(4, makeDate.length) + "月" + " 全品牌 " + "社会存销比"); 1013 Ext.getCmp("singleSaveAndSaleChartPanel_id").setTitle("社会存销比" + " 全省" + " 全品牌 "); 1014 //切换图表绑定 1015 singleSaveAndSaleRadarChart.bindStore(singleSaveAndSaleRadarStore,true); 1016 //重绘图表 1017 singleSaveAndSaleRadarChart.redraw(); 1018 } 1019 }); 1020 //=====================================单月社会存销比，雷达图store，加载结束=============================== 1021 1022 1023 1024 1025 1026 1027 //===============================单月社会存销比，报表chartPanel========================= 1028 var singleSaveAndSaleChartPanel = Ext.create('Ext.form.Panel',{ 1029 id: "singleSaveAndSaleChartPanel_id", 1030 layout: { 1031 type: 'hbox', 1032 align: 'stretch' 1033 }, 1034 title: "社会存销比", 1035 items: [singleSaveAndSaleColumnChart,singleSaveAndSaleRadarChart] 1036 } 1037 ); 1038 //======================================end================================== 1039 //创建雷达图表数据集 87 var radarChartStore = Ext.create('Ext.data.ArrayStore', { 88 idIndex: 0, 89 fields: ['xdata', 'ydata'] 90 }); 91 //初始化雷达图表数据集方法 92 function radarChartStoreInit(){ 93 radarChartStore.add({ 94 xdata:"食杂店", 95 ydata:"" 96 },{ 97 xdata:"便利店", 98 ydata:"" 99 },{ 100 xdata:"超市", 101 ydata:"" 102 },{ 103 xdata:"商场", 104 ydata:"" 105 },{ 106 xdata:"烟酒商店", 107 ydata:"" 108 },{ 109 xdata:"娱乐服务类", 110 ydata:"" 111 },{ 112 xdata:"其它", 113 ydata:"" 114 } 115 ); 116 } 117 //执行雷达图表数据集初始化方法 118 radarChartStoreInit();