EXT中 使用的 highcharts

最近在使用EXT  中 嵌套 highcharts的时候 遇到了  图表 内置的  显示层 的大小

如果 各位看官 想对这个js图标库 进行修改的话

就把 highcharts.src.js 图标库的 getChartSize 方法   重新设置

（图表中 控制不灵活的 可以改这里。 个人意见）

图表样式：

Java代码  

1. Highcharts.theme = {  
2.            colors: ['#058DC7', '#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4'],  
3.            chart: {  
4.               backgroundColor: {  
5.                  linearGradient: [0, 0, 0, 0],  
6.                  stops: [  
7.                     [0, 'rgb(255, 255, 255)'],  
8.                     [1, 'rgb(240, 240, 255)']  
9.                  ]  
10.               }  
11.         ,  
12.               borderWidth: 1,  
13.               plotBackgroundColor: 'rgba(255, 255, 255, .9)',  
14.               plotShadow: true,  
15.               plotBorderWidth: 1  
16.            },  
17.            title: {  
18.               style: {   
19.                  color: '#000',  
20.                  font: 'bold 16px "Trebuchet MS", Verdana, sans-serif'  
21.               }  
22.            },  
23.            subtitle: {  
24.               style: {   
25.                  color: '#666666',  
26.                  font: 'bold 12px "Trebuchet MS", Verdana, sans-serif'  
27.               }  
28.            },  
29.            xAxis: {  
30.               gridLineWidth: 1,  
31.               lineColor: '#000',  
32.               tickColor: '#000',  
33.               labels: {  
34.                  style: {  
35.                     color: '#000',  
36.                     font: '11px Trebuchet MS, Verdana, sans-serif'  
37.                  }  
38.               },  
39.               title: {  
40.                  style: {  
41.                     color: '#333',  
42.                     fontWeight: 'bold',  
43.                     fontSize: '12px',  
44.                     fontFamily: 'Trebuchet MS, Verdana, sans-serif'  
45.                  }              
46.               }  
47.            },  
48.            yAxis: {  
49.               minorTickInterval: 'auto',  
50.               lineColor: '#000',  
51.               lineWidth: 1,  
52.               tickWidth: 1,  
53.               tickColor: '#000',  
54.               labels: {  
55.                  style: {  
56.                     color: '#000',  
57.                     font: '11px Trebuchet MS, Verdana, sans-serif'  
58.                  }  
59.               },  
60.               title: {  
61.                  style: {  
62.                     color: '#333',  
63.                     fontWeight: 'bold',  
64.                     fontSize: '12px',  
65.                     fontFamily: 'Trebuchet MS, Verdana, sans-serif'  
66.                  }              
67.               }  
68.            },  
69.            legend: {  
70.               itemStyle: {           
71.                  font: '9pt Trebuchet MS, Verdana, sans-serif',  
72.                  color: 'black'  
73.               },  
74.               itemHoverStyle: {  
75.                  color: '#039'  
76.               },  
77.               itemHiddenStyle: {  
78.                  color: 'gray'  
79.               }  
80.            },  
81.            labels: {  
82.               style: {  
83.                  color: '#99b'  
84.               }  
85.            }  
86.         };  
87.            
88.         var highchartsOptions = Highcharts.setOptions(Highcharts.theme);   

 Ext.Panel 中实现的 js图表

Java代码  

1. var ac = new Ext.Panel({  
2.                 title : '图形报表',  
3.                 id : "mapDiv",  
4.                 layout : "fit",  
5.                 autoScroll : true,  
6.                 height : 400,  
7.                 listeners : {  
8.                     activate : function(p){  
9.                         var data = AjaxUtil.request({  
10.                             url : "testAction!test.action"  
11.                         });  
12.                         var myobj= data.rows;  
13.                           
14.                         var deptname='';  
15.                         var yf =[];  
16.                         var nf =[];  
17.                         var tqb =[];  
18.                         for(var i=0;i<myobj.length;i++){  
19.                             
20.                             deptname += "'"+myobj[i].DEPT_NAME+"',";  
21.                             yf.push(myobj[i].YF);  
22.                             nf.push(myobj[i].NF);  
23.                             tqb.push(myobj[i].TQB);  
24.                              
25.                         }  
26.                         deptname = deptname.substring(0,deptname.length-1);  
27.                         deptname =  eval('('+"["+deptname+"]"+')');  
28.                         yf =  eval('('+"["+yf+"]"+')');  
29.                         nf =  eval('('+"["+nf+"]"+')');  
30.   
31.                          var  chart = new Highcharts.Chart({  
32.                               chart: {  
33.                                  renderTo: 'mapDiv'  
34.                               },  
35.                               title: {  
36.                                  text: '  '  
37.                               },  
38.                               xAxis: {  
39.                                  categories: deptname  
40.                               },  
41.                               yAxis: {  
42.                                  min:0,  
43.                                  minPadding: 0.2,  
44.                                  maxPadding: 0.2,  
45.                                  tickInterval:5,  
46.                                  title: {  
47.                                     text: ' '  
48.                                 }  
49.                                   
50.                             },  
51.                               tooltip: {  
52.                                  formatter: function() {  
53.                                     var s;  
54.                                     if (this.point.name) { // the pie chart  
55.                                        s = ''+  
56.                                           this.point.name +': '+ this.y +' fruits';  
57.                                     } else {  
58.                                        s = ''+  
59.                                           this.x  +': '+ this.y+'条工作申请';  
60.                                     }  
61.                                     return s;  
62.                                  }  
63.                               },  
64.                               legend: {  
65.                                  layout: 'vertical',  
66.                                  align: 'left',  
67.                                  x: 60,  
68.                                  verticalAlign: 'top',  
69.                                  y: 50,  
70.                                  floating: true  
71.                               },  
72.   
73.                               series: [{  
74.                                  type: 'column',  
75.                                  name: '当月累计',  
76.                                  data: yf  
77.                               }, {  
78.                                  type: 'column',  
79.                                  name: '前年当月',  
80.                                  data: tqb  
81.                               }, {  
82.                                  type: 'spline',  
83.                                  name: '当年累计',  
84.                                  data:  nf   
85.                               }]  
86.                            });  
87.                     }  
88.                 }  
89.         });  

 

这个图表 是双柱形和单条线图