EXT中 使用的 highcharts

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

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

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

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

图表样式：

Highcharts.theme = {
		   colors: ['#058DC7', '#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4'],
		   chart: {
		      backgroundColor: {
		         linearGradient: [0, 0, 0, 0],
		         stops: [
		            [0, 'rgb(255, 255, 255)'],
		            [1, 'rgb(240, 240, 255)']
		         ]
		      }
		,
		      borderWidth: 1,
		      plotBackgroundColor: 'rgba(255, 255, 255, .9)',
		      plotShadow: true,
		      plotBorderWidth: 1
		   },
		   title: {
		      style: { 
		         color: '#000',
		         font: 'bold 16px "Trebuchet MS", Verdana, sans-serif'
		      }
		   },
		   subtitle: {
		      style: { 
		         color: '#666666',
		         font: 'bold 12px "Trebuchet MS", Verdana, sans-serif'
		      }
		   },
		   xAxis: {
		      gridLineWidth: 1,
		      lineColor: '#000',
		      tickColor: '#000',
		      labels: {
		         style: {
		            color: '#000',
		            font: '11px Trebuchet MS, Verdana, sans-serif'
		         }
		      },
		      title: {
		         style: {
		            color: '#333',
		            fontWeight: 'bold',
		            fontSize: '12px',
		            fontFamily: 'Trebuchet MS, Verdana, sans-serif'
		         }            
		      }
		   },
		   yAxis: {
		      minorTickInterval: 'auto',
		      lineColor: '#000',
		      lineWidth: 1,
		      tickWidth: 1,
		      tickColor: '#000',
		      labels: {
		         style: {
		            color: '#000',
		            font: '11px Trebuchet MS, Verdana, sans-serif'
		         }
		      },
		      title: {
		         style: {
		            color: '#333',
		            fontWeight: 'bold',
		            fontSize: '12px',
		            fontFamily: 'Trebuchet MS, Verdana, sans-serif'
		         }            
		      }
		   },
		   legend: {
		      itemStyle: {         
		         font: '9pt Trebuchet MS, Verdana, sans-serif',
		         color: 'black'
		      },
		      itemHoverStyle: {
		         color: '#039'
		      },
		      itemHiddenStyle: {
		         color: 'gray'
		      }
		   },
		   labels: {
		      style: {
		         color: '#99b'
		      }
		   }
		};
		 
		var highchartsOptions = Highcharts.setOptions(Highcharts.theme); 

 Ext.Panel 中实现的 js图表

var ac = new Ext.Panel({
				title : '图形报表',
				id : "mapDiv",
				layout : "fit",
				autoScroll : true,
				height : 400,
				listeners : {
					activate : function(p){
						var data = AjaxUtil.request({
							url : "testAction!test.action"
						});
						var myobj= data.rows;
						
						var deptname='';
						var yf =[];
						var nf =[];
						var tqb =[];
						for(var i=0;i<myobj.length;i++){
						  
							deptname += "'"+myobj[i].DEPT_NAME+"',";
						   	yf.push(myobj[i].YF);
						   	nf.push(myobj[i].NF);
						   	tqb.push(myobj[i].TQB);
						   
						}
						deptname = deptname.substring(0,deptname.length-1);
						deptname =  eval('('+"["+deptname+"]"+')');
						yf =  eval('('+"["+yf+"]"+')');
						nf =  eval('('+"["+nf+"]"+')');

						 var  chart = new Highcharts.Chart({
						      chart: {
						         renderTo: 'mapDiv'
						      },
						      title: {
						         text: '  '
						      },
						      xAxis: {
						         categories: deptname
						      },
						      yAxis: {
								 min:0,
							     minPadding: 0.2,
							     maxPadding: 0.2,
							     tickInterval:5,
							     title: {
						 			text: ' '
								}
								
							},
						      tooltip: {
						         formatter: function() {
						            var s;
						            if (this.point.name) { // the pie chart
						               s = ''+
						                  this.point.name +': '+ this.y +' fruits';
						            } else {
						               s = ''+
						                  this.x  +': '+ this.y+'条工作申请';
						            }
						            return s;
						         }
						      },
						      legend: {
						         layout: 'vertical',
						         align: 'left',
						         x: 60,
						         verticalAlign: 'top',
						         y: 50,
						         floating: true
						      },

						      series: [{
						         type: 'column',
						         name: '当月累计',
						         data: yf
						      }, {
						         type: 'column',
						         name: '前年当月',
						         data: tqb
						      }, {
						         type: 'spline',
						         name: '当年累计',
						         data:  nf 
						      }]
						   });
					}
				}
 		});

 

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

 

如附件图展示

 

评论

2 楼 liweilvjava 2014-01-22  

楼主来个完整的例子，万分感谢啊。[e-mail]

1 楼 patern_pan 2013-03-01  

LZ来个完整的例子 [e-mail]